Is your site organized such that everyone can navigate it easily?
Why it’s important: Beth has a lower tech literacy level and needs a site’s layout to be clear.
Julian has low vision and uses a screen reader to navigate the web. Kendra has a newborn and her attention is often divided; she needs to be able to understand a site’s contents at a glance.
Lyle is undergoing a crisis and needs to quickly find just the content pertinent to him.
Steps to take
- Write descriptive page titles. Users who rely on assistive technologies like screen readers may not be able to use visual cues to determine a page’s purpose. Make sure your page titles concisely convey each page’s focus.
- Make sure users can navigate a site in multiple ways. Some strategies include providing a table of contents, providing a sitemap, linking between pages, and including sitewide search.
- Indicate changes in language (for example, when including a foreign word in a predominantly English text). This will help people using screen readers, people with cognitive disabilities, and folks using braille translation software to fully understand your content.
- Use a screen reader or simulator to make sure you can land on controls and that they’re announcing things as they should.
- Determine whether the HTML document has a language attribute so that screen readers will read it with the correct accent and pronunciation. For example:
<html lang="en">. (Note: If you’re not comfortable taking this step, feel free to ask another designer on your project team to help.)
- If forms are present, make sure the screen reader reads labels and instructions.
- Turn VoiceOver on: command (⌘) + F5
- Go into web area: control + alt + shift + down arrow (⬇)
- Navigate right: control + alt + right arrow (➡️️)
- Navigate by headings: control + alt + command (⌘) + H
- Click: control + alt + spacebar
Use rotor to browse pages. The rotor lists common elements like headings, links, and images, and lets you navigate directly to the element of your choosing.
- Turn on rotor: control + alt + U
- Navigate rotor: left and right, up and down arrows
WCAG 2.0 references