How to design for screen reader compatibility?



Creating a good user experience requires us to think carefully about the diverse needs and devices of our users. It is not hard for a sighted user to visualize how being visually impaired could make using a computer difficult. Just close your eyes, and you will immediately experience that even processing text is impossible.

Now, a range of software is available that can help using a computer for a more comfortable, enjoyable, and productive experience for visually impaired users.

Screen readers

A "screen reader" is the general term for a program that helps blind people use a computer. A screen reader will "read" or "speak" the content of a page to the blind user. Screen readers convert digital text into synthesized speech. They empower users to hear content and navigate with the keyboard.

Screen readers read content differently from humans. The voice may sound somewhat robotic and monotone. It takes time to get used to a screen reader, but once users become accustomed to it, they can race through content at speeds that awe sighted individuals.

What screen reader do we keep in mind when building a website?

The Web Accessibility team at ONE BCG does not code for the screen reader but instead follow the rules by the best practices for web accessibility.

All screen readers share similar functionality and capabilities. However, keyboard shortcuts, voices, and ways of calling out links, images, and so on, vary between them. Since users will be accustomed to their preferred screen reader's conventions, these differences don't typically impact coding practices. The key is to adhere to accessibility standards and generally-accepted accessibility techniques.

The web accessibility team at ONE BCG will test most extensively with JAWS for Windows because it is the most popularly used screen reader (as reported by the WebAIM annual survey(link is external).
The team also tests with Voiceover for Mac and NVDA for Windows, both of which are growing in popularity.
Why it is important to define the language of the document?
  • Text-to-speech engines, like screen readers, know how to read the text
  • Spell checkers know what language to use
  • Text styling 
If you do not define the language of the page, the user agent will default to using its default language setting for rendering the page.

If both the page and the user agent are in the same language, everything will work fine. However, if, for instance, the user agent is set up for English and the page is in French, a user agent such as a screen reader will attempt to speak the French text like a bad American tourist.
Layout the code of your page so that if CSS is turned off, the content displays in reading order.

Why is content linearization necessary?

Screen readers don't process CSS, so they read the content in the order it is coded. This can be confusing if the content is not laid out in a logical order. Audio interfaces present content linearly to users, one item at a time. This contrasts with how most people use visual interfaces. Sighted users can scan an entire screen almost instantaneously, comprehending the overall layout, the artistic style, and other macro-level aspects of the content. Screen reader users cannot understand these macro-level aspects as quickly.

How does site hierarchy & navigation matter?

The term "sitemap" refers to two things. First, it means the hierarchical arrangement of pages on a website. A visitor may start on a home page and go deeper through a series of menus to drill down to a particular page they are looking for. If the site hierarchy makes sense, this process should be accessible on a screen reader. If not, the desired page may never be found.

Second, "sitemap" refers to an actual page that lists other pages on a site. A user may visit this page if they prefer to see all pages on a site at once, rather than clicking through progressively more targeted pages to reach their desired goal. Ideally, the sitemap page should reflect the hierarchy around which a site is organized; a sitemap page should have headings and structure to make it a helpful list.

Menus & navigation

Menus are a list of links that allow the user to navigate hierarchically through a website. In most websites, a primary menu will be at the top of a desktop version of a site, and a local menu will be on the left or (less frequently) right sidebar. In mobile websites, menus are often hidden behind icons or located within dropdown lists. Footers and headers often contain additional menus for utility links.
Menus are how a user becomes aware of a site's hierarchy. Menus can also provide shortcuts to frequently-accessed pages that are otherwise buried deep within a sitemap. Getting menus correct so that a website can be navigated is one of the most important aspects of usability.

How screen readers read the content?
  • Screen readers pause for periods, semicolon, commas, question marks, exclamation, paragraph ending.

  • Screen readers read letters out loud as you type them, but say "star" or "asterisk" for password fields.

  • Screen readers announce the page title (the <title> element in the HTML markup) when first loading a web page.

  • Screen readers will read the alternative text of images if alt text is present. JAWS precedes the alternative text with the word "graphic." If the image is a link, JAWS precedes the alternative text with a "graphic link."

  • Screen readers ignore images without alternative text and say nothing, but users can set their preferences to read the file name.

  • If an image without alternative text is a link, screen readers will generally read the link destination (the href attribute in the HTML markup) or may read the image file name.

  • Screen readers announce headings and identify the heading level. NVDA and JAWS, for example, precede <h1> headings with "heading level 1."

  • Some screen readers announce the number of links on a page as soon as the page finishes loading in the browser.

  • JAWS says "same page link" if the link destination is on the same page as the link itself and "visited link" for links that are previously accessed.

  • Screen readers in table navigation mode inform the user how many rows and columns are in a data table.

  • Users can navigate in any direction from cell to cell in table navigation mode. If the table is marked up correctly, the screen reader will read the column and/or row heading as the user enters each new cell.

  • Screen readers inform users when they have entered into a form. Users have the option to enter form navigation mode.

  • Screen readers can be thrown off by homographs. For example, the word read can be pronounced "reed" or "red," depending on the context: "I'm going to read the newspaper" vs. "I already read the newspaper." A sentence such as "I read the newspaper every day" is ambiguous to all readers—humans and screen readers alike.

  • Screen readers may or may not read out punctuation, depending on the user's verbosity setting. Ensure that you convey the intended meaning in either case.


No comments:

Powered by Blogger.