On this page
Two thirds of accessibility defects that end up in production originate in the design phase of the software development lifecycle. It’s important to design with accessibility in mind from the beginning.
- Remember that if something is hard to make accessible, some other fundamental (information architecture, interaction model, mental model) is likely broken and disabled users are the first ones to feel the pain.
- Ensure design annotations cover all users. Think at all the levels of the UX “stack”:
- Information architecture.
- Clear and concise.
- One goal/call to action per page/viewing area.
- Hierarchical information.
- Structure and viewports.
- Containers and landmarks.
- Headings and content.
- Links vs buttons.
- Data tables.
- Visual design.
- Color contrast.
- Touch target size.
- Color and meaning.
- Focus, order, and interaction.
- Content order and tab order.
- Keyboard interactions – anything unusual.
- Focus management and display.
- Text alternatives and alternate content.
- Visible and hidden states.
- Voice, keyboard, mouse, touch.
- Information architecture.
- Plan your designs so that Engineering can use HTML over WAI-ARIA, and native components over custom components.
- Explicitly communicate the accessibility implementation that you planned for your design, so that everyone is in agreement on how to build an accessible design.
- Familiarize yourself with the visual design guidelines provided by Deque.
- Learn about hidden content techniques to understand when and how to add hidden content.
- Avoid using read-only forms.
- Design focus states that help the user navigate and understand where they are.
- Help users understand form fields and help them avoid and correct mistakes.
- If an image truly can’t be made accessible, design a second route for users to get that information.
- Ensure that information and its relationships are can either be programmatically determined or are available in text. ( WCAG guideline 1.3.1).
- Become familiar with basic accessibility testing.
- Be mindful of trends and their impacts on accessibility
- Seek out and hire a diverse team including people who have disabilities
Additional Resources
- 14 Easy Ways to Make Your Website More Accessible by Carl Cahill and Joss Cook on Creative Bloq
- Optimizing keyboard navigation using tabindex and ARIA by Sara Soueidan on her website.
- Designing for Web Accessibility by the W3C.
- Deque University Fast Track for Designers