An Accessibility Checklist for Designers and Developers
How to create accessible UI, and why it matters
Accessibility: (noun) the qualities that make an experience open to all
Accessible design is good design — an accessible user interface (UI) opens experiences to a wider range of users and improves experiences for existing users. That’s the beauty of designing with all abilities in mind — it benefits everyone, not just those with limited vision, hearing, or mobility.
When designing for disabilities, you’re solving for a few, but extending to many. Take, for example, a technology like closed captioning. Although it was designed for users with limited hearing, many people use closed captioning to watch movies or TV shows nowadays. Keyboard navigation is another great example: users with limited mobility use the keyboard to navigate screens, but many other users also use keyboards to quickly navigate through pages. Clearly, all users can benefit from more accessible features, and designing accessible UI is no different.
Creating accessible UI does require some planning and thinking, but if it’s integrated into your design from the start, it shouldn’t take much extra time or effort at all. Here’s a checklist to get you started on thinking about accessible UI design…
✔️ Hierarchy and order
Can users visually navigate a page? When scanning a page for information, users rely on visual hierarchy: important things at the top, related items grouped together, and headers summarizing content. Users should be able to gather key information quickly, and in a logical order. Essential elements include:
- A page title describing the purpose of the page.
- Headers that convey the structure of the page.
- Visual order that matches reading order.
Can screen readers scan your app’s UI? Visual hierarchy helps assistive technology, too. To scan pages for users, screen readers typically follow the UI’s visual order, announcing headers, landmarks, and hyperlinks along the way. Ideally, there should be a linear, logical order for all users and assistive technologies to navigate your UI.
Is there a logical, predictable order for keyboard navigation? Users with limited vision and mobility rely on keyboard focus to navigate pages, and the order of navigation should also reflect the desired visual order. For more information on implementing keyboard access in your app, see the UWP guidelines for keyboard interactions.
✔️ Labels
Do UI elements have appropriate labels? Text labels not only clarify the purpose of UI elements and provide instructions to users, but they also help screen readers narrate the context of the UI elements.
Does all non-text content (media, figures, tables) have alt text? Screen readers automatically announce an image/video, but specifying alternative text and captions provides a description. Additionally, in some cases when media can’t load (i.e., poor internet connection), alt text can be useful for all users.
Are UI elements labeled with accessible names for screen readers? An accessible name is a short, descriptive text string that a screen reader uses to announce a UI element, and they’re especially necessary for interactive UI elements without text, such as text boxes or buttons with icons. While icons are great because they’re universal across languages, not everyone can see them!
✔️ Color and contrast
Is information conveyed through means other than color? Color doesn’t translate perfectly across cultures or abilities. Rather than rely only on color, you can also use text, shapes, and textures to communicate information.
Does text meet minimum contrast ratio requirements? When users use dimmed displays or have limited vision, higher contrast makes seeing the screen’s content much easier. According to the W3C, the minimum text to background contrast ratio should be 4.5:1.
✔️ Feedback
Do you provide feedback for user interactions? Communication is key! Feedback communicates the results of interactions, allowing users to understand what they’ve done, and what they can do next. Form controls should have appropriate validation/error messages, and actions with significant consequences should have confirmation dialogs.
✔️ Scalable layout
Can your layout accommodate zoom? If users choose larger font options, zoom, or use other assistive technology, your UI should adjust appropriately. UI that do not scale correctly may cause important components to overlap or hide other components and can become inaccessible. If your UI has many components, consider re-factoring for different magnification levels and screen sizes.
More resources
If you’re interested in building an accessible app, check out the UWP accessibility guidelines. There’s plenty of specific guidance on using controls with built-in accessibility features, testing your app for accessibility, and more.
For more general design thinking about universal solutions, check out Microsoft Inclusive Design for toolkits and inspirational videos.
Already designing accessible user experiences? We’d love to hear about your processes and challenges! Tell us about them in the comments :)
To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.
