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.
Content presented in visual order: top to bottom, left to right.
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.
The arrow and tab keys are used for keyboard navigation.
Tab order matches visual order.
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.
Labels and placeholder text provide context for 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!
Buttons with icons should have accessible names.
✔️ 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.
Hyperlinks use color and underlines as visual cues.
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.
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.
Deleting a file permanently can’t be undone, so better confirm with the user.
✔️ 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.
UI can respond to changes in screen width or zoom.
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.
This article was originally published on Serena’s Medium page.
Get started with Marvel Enterprise
Some of the worlds most creative companies use Marvel to scale design across their organisation.
Get started with Enterprise
Digital interfaces make a huge impact in our lives. We frequently use websites or digital applications to accomplish certain goals. Indeed, when interacting with an interface, we are surrounded by typography and our experience is driven by the words and messages we read and understand. In one of his articles, Oliver Reichenstein confirms the importance of typography in all websites… Read More ￫
It’s been a couple of weeks now, two, as I’m writing this, since I got the email. I’d had a super long day so I was lying down feeling sorry for myself when I saw this: Hi Viba, I came across your application and am impressed by your experience and design work. I work on hiring students for our Product… Read More ￫
We’ve all been there — hopelessly staring at the screen and waiting for design inspiration to swoop in and save the day. When that doesn’t happen, use these tactics to help you get out of those design ruts: Sketch it out There are certainly many scenarios when we have to move quickly to crank out a design. But when it’s possible,… Read More ￫