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.
