Web accessibility concepts 101 for the visually impaired: screen readers

Our goal is to make websites more accessible to those who have difficulty using the web, particularly those with visual impairments.

Imagine the scene: You’re about to take an important test but you feel confident. You know you’ve worked hard to learn everything you need to about the topic. You begin the test but realize that you can’t read the question properly because the text is too small. The color contrast is off too, making certain questions almost impossible to decipher. Panic begins to set in and affect your performance, and not in a good way.

This may sound like the stuff of nightmares but it’s an unfortunate reality for many students with visual impairments.

According to the National Federation of the Blind, there are above 90 thousand blind (legally defined as 20/200 vision) or visually impaired school-age children in the US alone.

Because so much information in education is color-coded, relatively benign conditions such as color blindness can turn school into a major challenge for lots of students, especially in pressurized environments such as tests. Even though technology is more advanced than ever, it can also fail to make content more accessible.

That’s bad news, especially considering that:

“Most educational and employment opportunities are now and will continue to be dependent on the blind individual’s ability to access and use a full range of computer and Internet technology.” (National Federation of the Blind)

As things stand, 70 percent of working-age adults in the US are unemployed. The chances are that the number will grow too, given the National Eye Institute’s projection that “the number of people with visual impairment or blindness in the United States is expected to double to more than 8 million by 2050”.

Education must therefore make every effort to be inclusive of all learners, and web accessibility has a massive part to play in achieving this. It’s also why we make accessibility a top consideration as we develop our assessment technology.

Learnosity’s Assess API is built to accommodate students with special requirements, which means we need to know our stuff. In this post we’ll go over some fundamental concepts of screen readers and accessibility.

Using a screen reader to navigate the web

People with visual impairments can use a screen reader to make use of the web.

A screen reader is a program that runs on the user’s computer (or their mobile device).

The screen reader assists the user by describing the page content. It also helps them control their keyboard focus (kind of like pressing Tab – but in more elaborate ways).

The user controls the screen reader, directing it to read the specific parts of the page that are of interest until their objective on the page is completed.

However, for most websites, this doesn’t come free – we need to develop and test our pages to make sure they make sense when accessed with a screen reader.

Screen readers generally share the following concepts:

Cursor

Each screen reader has a cursor that moves across the page via keyboard controls. It’s conceptually pretty similar to your keyboard focus – but it can select objects that are not interactive, such as Text, or Table Cells (<td> elements).

Grouping

Elements on the page are arranged in groups. Some elements naturally form a group (for example, <select> can normally be treated as a group) but the developer of the page can also use ARIA to define which elements should logically behave as a group.

ARIA

ARIA is a set of attributes that can be attached to HTML elements, to give the screen reader some hints on how they should be handled.

With ARIA attributes, you can:

• declare what should be read out when the screen reader cursor visits an element
• make an element invisible to the screen reader
• make an element stand out as a prominent part of the page

Jumping/Skimming:

Each screen reader comes with its own navigation shortcuts built-in for faster navigation.

On the web, these tend to take forms such as:

• “jump to the next heading”
• “jump to the next unvisited link”
• “jump to the next table”
• or even “jump to the next change in text formatting”

For this reason, it’s important to structure the HTML document semantically, not just visually. Here are some examples:

• check boxes should use a <label> tag
• page headers should be used consistently across the page

Landmarks

Landmarks allow the user to jump to common parts of a webpage – such as “navigation” (generally a Table of Contents), “contentinfo” (generally the page footer, with company info and outbound links), and “main” (generally the content itself).

A page with well-defined landmarks allows the user to focus on the part of the page they’re interested in.

• Screen reader #1: VoiceOver
  If you have access to a Mac, VoiceOver is a great screen reader for learning the concepts because it has a visible cursor. VoiceOver comes pre-installed in all modern versions of Mac OS.
• Screen reader #2: NVDA
  NVDA is a free, open source screen reader for Microsoft Windows. It can be downloaded at http://www.nvaccess.org/ free of charge.

Each screen reader has its own set of keyboard shortcuts.

To get you started, here are the shortcuts in VoiceOver (which comes pre-installed with Mac OS) and NVDA (open-source, $0 software for Microsoft Windows):

Note that NVDA also has a Laptop Mode for users whose keyboard doesn’t include a numeric keypad.