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
As hardware begins to fade and software experiences come to the foreground, it is essential to focus on the way we design the interfaces that users will see and interact with. Over the last decade, interface design has seen a turn from replication of the physical/material (referred to as skeuomorphism) to a much more flat, abstract aesthetic. While this new… Read More ￫
Background A new fast food franchise is opening 500 new stores across the U. S. and Canada. Each store has 5–12 employees and each employee needs 3 uniforms: the main uniform and 2 seasonal ones. Currently the franchise is in the process of hiring and preparing all stores for a grand opening. Corporate is collecting orders and holding them for… Read More ￫
There are quite a few articles on the web that deal with responsive logos. The most popular example might be the Responsive Logos website that shows some very well known logos in different variations for different screen sizes. When I first saw this example, I thought it wasn’t much more than a little gimmick. In the end, it is just… Read More ￫