Learning not to see

Posted by:
Sarah Bourne, Director of Assistive Technology & Mass.gov Chief Technology Strategist, Information Technology Division

New perspectives

You can unplug your mouse to see what it's like when you have a mobility or dexterity problems. You can turn off the sound to see what it's like when you can't hear. But it's a little more difficult to replicate the experience of being blind.

The human brain has a very strong visual bias. For instance, the thought of ordinary people using computers wasn't even imaginable until there was a graphical user interface (GUI.) Sighted people rarely realize how dependent they are on their vision because it's so central to how they do things. This makes it makes it hard to really understand how different web and other computer experiences are when you have a visual disability. Without this understanding, it's harder to learn and remember specific development techniques, which in turn makes it harder to integrate them with your other requirements.

The most common way of demonstrating assistive technology for vision impairment is to fire up a screen reader. This is very effective at showing that you don't have to be able to see to use a computer. However, this experience is frequently overwhelming to a visually-oriented person. They have to actively translate sounds into what they're used to seeing in a glance. This cognitive load, plus having to learn how to do it, makes it difficult for most developers to use a screen reader for ad hoc testing.

What does a screen reader see?

If you are a sighted person, you automatically scan a web page for clues: What are the different areas of the page? What's most important? It's the first step in creating a "mental map" of the page. You do this before even consciously thinking about things like, "What's in each area?" and "Where is the thing I'm looking for?"

The equivalent for someone using a screen reader is to listen to a list of the headings on a page. On a web page, they may alternately listen to a list of the links. These pieces of information give you an idea of what your options are. Screen readers have tools that allow you to jump directly to items in the lists, either headings or links. You could choose to have the entire page read to you, but it takes a lot longer and is rarely a first choice. Being able to navigate by headings and links means you can skip over the parts you don't care about, the same way a sighted person glances over parts of the page they don't care about.

Help for sighted developers

Fortunately, there are tools for desktop testing that can give a visual interpretation of what a non-visual user "sees" on a web page. If you find using a screen reader too difficult, you may be more comfortable using some of these for day-to-day testing. You can think of them as assistive technologies, compensating for your visual bias.

Microsoft Word

When you made your Word document, did you use headings, or did you just make it bold and bigger? You can easily see by viewing it in Outline mode, which allows you to collapse and expand sections to make sure you've used the proper heading levels and nested lists correctly. Or you can turn on the "Document Map", which does the same thing in a more abbreviated way, but can also be used to jump to those places in the document.

Firefox extensions for web pages

Some of my favorite desktop testing tools are available as extensions to the Firefox browser. They have a lot more features than I'm going to discuss here; I encourage you to look at them in more depth. You may be surprised at how much can learn about accessible development just by using tools like these.

• Fangs (https://addons.mozilla.org/en-US/firefox/addon/402/) provides a text view of a web page as a screen reader sees it. The first tab, "Screen reader output" shows what a screen reader would read, in the order it would read it in. Words that are in shaded boxes are things screen readers add to give more information, such as "link" and "graphic". The other tabs show a list of headings and a list of links. Blank lines on the link list mean that there is no text for it, which means someone using a screen reader won't know what it's for.
• Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60/) has tools for "linearizing" a page (displaying it in the order a screen reader would read it in) and adding outlines around various elements, including headings and links. It can also produce a document map, which is very similar to the Word Outline mode.
• Firefox Accessibility Extension (https://addons.mozilla.org/en-US/firefox/addon/5809/) creates pop-up boxes to list links and headers. You can sort the lists by any of the information columns it provides. When you select an item, it highlights that element on the original browser window.

Do you have any other strategies and tools for desktop accessibility testing? We would love to hear about them!

Comments

[MicroAngelo]

Good article and fantastic tips!

Another couple of great and quick features of the Firefox Web Develper addon:

Images -> Outline Images -> Images Without Alt Attributes
Images -> Replace Images With Alt Attributes

With the later you may still have CSS background images - make sure that these aren't required to get information from the site!

Alt attributes are what the screen reader will read to the viewer who can't see the image - these should be replacement text to use instead of the image, not necessarily a description of the image (e.g. for your logo at the top of your page, the alt should be "MyCompanyName" rather then "Logo").

You can also try "View -> Page Style -> No Style" in Firefox too to get a look at the page without all the visual niceties - the structure should still make sense!

[Sarahebourne]

Thanks for the additional tips, @MicroAngelo. The trick with talking about the Web Developer toolbar is stopping! I seem to run across a new useful feature, or a new use for a feature, every time I use it.

[guild wars 2 gold]

This is very effective at showing that you don't have to be able to see to use a computer.

[Jordan Shoes]

I only recently started leaving comments! Makes me imagine a tiny additional about what I enjoyed and learned about the post! Fantastic ideas, thanks!