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
At times, it seems like eCommerce is a never ending search for conversions; for a strategy that leads to sale after sale. But, as you’ve undoubtedly realized by now, that’s sadly not possible. Sure, you can do something here and something there that will help you out—to a certain extent—but nothing remotely close to an eCommerce holy grail that makes… Read More ￫
There are lots of great tools for drawing wireframes today. However, I still prefer my good ol’ paper wireframing kit. In this post I’ll tell you why and explain how paper wireframing will make you a better designer. In 2012 I was planning on taking my wireframing skills to the next level. I had gotten the excellent app Paper by… Read More ￫
Your portfolio is a story about you and your work — your expression of growth through all the obstacles, surprises, successes and failures. This is your epic. Illuminate the arc of your career and why you matter. For the audience, your portfolio showcases your problem-solving superpowers, hard and soft skills, and your ability to reflect upon your successes and failures…. Read More ￫