Most people who build websites have never watched someone use one with a screen reader. That is simply how the work usually goes: a page gets designed by looking at it, tested by clicking through it, and shipped. Whether it works for someone who cannot see it, or cannot use a mouse, is a question nobody in the room thought to ask.

The people who would answer it use a set of tools collectively called assistive technology. Knowing roughly how they work changes how you look at your own store.

Screen readers

A screen reader turns what is on the screen into speech, or into braille on a separate display. It reads the page in order and announces what each thing is: a heading, a link, a button, a form field, an image.

Screen readers are widely used. In WebAIM's most recent survey of screen reader users (external site), with 1,539 respondents, the most common screen readers on a computer were JAWS (40.5%) and NVDA (37.7%), with Apple's built-in VoiceOver at 9.7%. And 91.3% of respondents also used a screen reader on a phone, most often VoiceOver on an iPhone.

What matters is how people move around with one. Listening to a whole page from top to bottom would take minutes, so people rarely do. When asked how they first find information on a long page, 71.6% said they navigate through the headings. A screen reader can jump from heading to heading, list every link on the page, or skip straight to the main content, the way a sighted person glances down a page.

That only works if the page gives it something to work with:

  • Headings that are real headings. Text that is just made big and bold looks like a heading but is announced as ordinary text, so it cannot be jumped to.
  • Images with a description. Without one, a product photo is read out as a file name, or skipped as if it were not there.
  • Buttons and links that say what they do. An icon-only basket button with no label is announced as "button". A list of links all called "Read more" tells you nothing when read out of context.
  • Form fields with labels. A field without one is announced as "edit text", with no hint of whether it wants your name, your email or your card number.

When the same survey asked what causes the most problems, the top answers were CAPTCHAs, menus and dialogs that do not behave as expected, links and buttons that do not make sense, parts of the screen that change without warning, and things that cannot be reached with a keyboard.

Keyboard only

Many people do not use a mouse at all: people with motor disabilities, tremors or repetitive strain injuries, and, on a computer, most screen reader users, who navigate by keyboard too. They move through a page with Tab to go forward, Shift+Tab to go back, Enter to follow a link or press a button, and the arrow keys inside menus and lists.

Two things decide whether that works. Every interactive part of the page has to be reachable with Tab, in a sensible order. And you have to be able to see where you are: the outline that marks the focused element is the keyboard user's cursor. Removing it to make a design look cleaner leaves them navigating blind.

Some people use switch devices instead, a single button or two, often operated by a hand, a foot or a head movement, which step through the page one element at a time. A page that works well with a keyboard usually works with a switch too.

Magnification and contrast

People with low vision often zoom the page to two, four or more times its size, or use magnification software that enlarges a small part of the screen at a time. Others turn up contrast, invert colours or use their own colour settings.

Zoomed in that far, a layout has to reflow into a single column rather than spilling sideways, and text that was already faint becomes harder still to read. Low-contrast text is the most common failure in WebAIM's yearly study of a million home pages (external site), found on 83.9% of them, and it affects far more people than it seems to, including anyone reading a phone in bright sunlight.

Voice control

Voice control software lets people operate a computer or phone by speaking: "click Add to basket", "scroll down", "show numbers" to label every clickable thing on screen. It is used by people who cannot use their hands, or cannot use them for long.

It relies on what the controls are called. If a button looks like it says "Add to basket" but its accessible name is something else, or nothing, saying the words on the screen does nothing. Matching visible text and accessible names is what makes voice control work.

Captions and transcripts

People who are deaf or hard of hearing rely on captions for video and transcripts for audio. For a store, that usually means product videos and any explainer content. Captions also help everyone watching on a phone with the sound off, which is a lot of people.

What this means for a store

All of these tools depend on the same small set of basics: real headings, labelled buttons and fields, described images, enough contrast, a visible focus outline, and everything working from the keyboard.

Those basics are also what an automated scan checks first, which makes it a good place to start. Fix what it finds, then put the mouse aside and try to buy something from your own store with only the keyboard. If you can, a large share of your visitors who browse differently probably can too.

Sources