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 is the second of three articles about our journey growing a culture of accessibility at Trade Me. For tips on getting started, see ‘Growing a culture of accessibility at Trade Me’. After understanding a bit more about our users’ needs and making some progress towards a more inclusive product, we started working towards getting buy-in from our peers. If… Read More ￫
This is the first of three articles about our journey growing a culture of accessibility at Trade Me. We’ll share a bit of the process of understanding our customers and our company, as well as some tips for other companies to get started. Trade Me is New Zealand’s leading online marketplace and auctions website. It has 1.5 million active members…. Read More ￫