You are here
Screen Readers and Visual Accessibility
The purpose of this lesson is to introduce the students to screen reader software, so that they will be aware of the challenges that blind people face in using web sites, and so that they can adjust their own sites to accomodate access for the visually challenged.
To teach students about accessibility issues when building and designing web sites.
This lesson requires the following equipment:
- A classroom equipped with computers for each student, including Internet connections.
- Headphones for each student.
- A screen reader program.
- A screen blocker card (optional)
A more limited version of the lesson, demonstration only, can be done in any classroom equipped with a computer for the instructor.
Headphones are necessary because when you have a classroom full of 15-25 students the din of the computers all speaking at once makes it considerably harder for the students to distinguish their own computer from the others. While the lesson can be done without headphones, it’s substantially more difficult.
Many people who build web sites are unaware of or have no direct experience with screen readers, the software that blind and visually disabled people use to access web sites (and indeed all the software on their computers). The purpose of this lesson is to introduce the participants to that software, so that they will be aware of the challenges that blind people face in using web sites, and so that they can adjust their own sites to accomodate access for the visually challenged.
The most common screen reader programs, JAWS and WindowEyes, are commercial software, and not cheap. Typical JAWS licenses may run up to $1200 USD per seat. There is a 40-minute demonstration version available, but its licensing terms make it unclear whether it’s legal to use the demonstration version for these purposes. So I prefer the free and open source screen readers FireVox or NVDA. Because they are open source projects, there are no licensing fees to worry about, and the students may have copies of their own if they wish.
The two have some significant differences. NVDA, short for “Non-Visual Desktop Access,” is a fully-featured screen reader. It can read not just web pages, but any application the operating system might run. Because it must deal with a much wider selection of software, NVDA has fairly complex controls. It is only available for Microsoft Windows.
FireVox, by contrast, is an extension for the Firefox web browser. It turns Firefox into a “self-voicing” browser which can read web pages aloud. But it cannot access other desktop applications. Because it works with only one program, FireVox’s controls are fairly simple. It works with Windows, Linux, and Mac OS X (though it’s buggy on Mac). Because of its comparative simplicity and its broader availability, I prefer using FireVox for this lesson.
There are other screen readers out there — for example Orca on Linux. I will assume from here on in that you are using FireVox. Regardless of wich screen reader you use, I recommend that you become comfortable with its controls before teaching the lesson, so that you’ll be able to aid students who get stuck.
You'll need to install a screen reading software on the computer system. For detailed instructions on configuring FireVox, see the "additional resources" section below.
The lesson breaks down into three phases:
At the beginning of class, I talk briefly about the challenges that disabled persons face in using the Internet. I tell the students specifically about the importance of alt text, skip links, and structural headings in web design. Typically I write the HTML code for these on the board, describing each one and fielding any questions as necessary. I mostly limit my technical discussion to visual impairments, because that’s the focus of the lesson. However, I usually mention other accessibility problems as well, such as the general lack of captions for the deaf on Internet videos, the difficulty that paralyzed people face in typing, and so on.
In a class period lasting 1 hour and 15 minutes, this portion of the exercise should take approximately 20-25 minutes.
During the demonstration phase, I start FireVox on the instructor computer and attempt to locate a specified piece of information on the web, reciting aloud for the students each command I give. For example, I might try to find out how much a copy of the course text book costs through Amazon. First I press CONTROL+L to highlight the location bar. Then I type in Amazon’s address. Once the page is loaded I press CONTROL+SHIFT+L to bring up a list of elements in the page, use the arrow keys to navigate through that list, and then select a search box from the form elements. I type in the title and press ENTER. Once the new page has loaded, I press TAB repeatedly to move through the links in the document until I find one that sounds right, then I press SPACE to trigger the link. Once the page has loaded, I slowly walk through the document using a combination of TAB, CONTROL+SHIFT+F (for Forward) and CONTROL+SHIFT+D (for Back). I do this using a remote keyboard, with my back to the screen. However, I leave the projector in the classroom running. FireVox highlights the particular section of the screen it’s reading at any given moment, and it’s useful for the students to see those visual cues as I am in the process of using the audio to determine where I am and what I’m doing.
Inevitably, I run across an image which does not have alt text, nested tables, or some other impediment to my understanding of the text. At this point I might stop and show them the code, or I might simply point to my hand-written version. Often I fail in whatever objective I’ve set for myself, but this generally doesn’t matter too much, since the point of this section is just to show them what the process is like before they try for themselves.
In a class period lasting 1 hour and 15 minutes, this portion of the exercise should take approximately 5-10 minutes. Those with a flair for the dramatic might make a show of putting on a blindfold.
Lastly, I give the students a task to complete without being able to see the screen. (see "Instructions For Students" below)
Here are the steps the students need to perform in order to activate FireVox, assuming that you have pre-installed it using the Profile Switcher extension as described above:
- Collect a pair of headphones
- Plug them into their computer
- Log In
- Start Firefox
- Click File → Launch Another Profile → FireVox
- They can close the existing window or not, as they choose.
Once FireVox is up and running, they need to blank out their screens, either by turning them off or by putting a blocker card in front of them. Typically, I ask them to find their own contact information in the UT directory. If they have removed themselves from the directory, I tell them to find me, or a neighbor. Some students accomplish this task quickly, in which case I ask them to just go and browse around on the web.
this assignment was not evaluated
I have had excellent luck with this lesson. The students are invariably fascinated by the process. Frequently they had assumed that the blind simply could not use the web at all, so not only observing someone surfing the web blind but doing it themselves is — if you’ll forgive the phrase — an eye-opener. As a consciousness raising effort, it works fairly well.
At the very end of the class I try to contextualize their experience. The brevity of the exercise — a single class period — means that they experience the initial feelings that come with trying to learn a deeply unfamiliar interface. The two most common reactions are excitement and frustration. What they do not get is the sense of accomplishment and pride that comes with mastering that interface, because they don’t work at it long enough. Typical comments run along the line of “I’ve never been so glad to have my sight,” which highlights the frustration and unease of the experience. So, at the very end of the lesson, I try to compensate for that a bit by pointing out that blind people, who cannot independently access the Internet in any other way, soon become highly proficient at using the screen reader. They often remain frustrated, but that frustration tends to spring from encounters with badly designed web sites more than frustration with the screen reader interface.
On balance, I think using a screen reader is a valuable experience for anyone with any kind of responsibility for a web site. It takes accessibility problems out of the realm of the abstract and makes them concrete, tangible. Making future web designers palpably aware of the issue helps ensure that they will stop to consider access for the blind in their future work.
Installing and Configuring FireVox
The web site for FireVox can be found at the Firevox website. The installation process is straightforward, but there are considerations to take into account:
- Do your computers automatically undo changes made during a session when you log out?
- Do you have other Firefox extensions installed?
If your computers automatically undo changes made during a session whenever someone logs out, then you may wish to walk the students through the process of installing FireVox themselves. it’s a useful exercise for them. However, if the computers do not undo this change, then subsequent classes in the same room may be troubled by web browsers which inexplicably speak to them. In that case it’s best to install FireVox beforehand.
If you have other Firefox extensions installed, it’s possible that some of their shortcut keys may conflict with one another. For example, both FireVox and the Web Developer Toolbar use the keyboard shortcutCONTROL+SHIFT+F. In FireVox, that shortcut instructs the browser to move on to the next element in the document and read it aloud. But in the Web Developer Toolbar, the same shortcut enables the Element Information dialog. If you have both extensions installed and pressCONTROL+SHIFT+F, then both actions will be triggered.
You probably don’t want Firefox to speak all the time. And key conflicts are annoying. The best way to resolve both of these is to install Firevox in a fresh profile, which allows one copy of Firefox to be used by many individual users with separate sets of configuration info (including extensions). You can either do this manually (using the -p option on the command line) or you can use the Profile Switcher extension (I prefer the latter approach). Here are precise step-by-step instructions for installing FireVox in its own profile:
- Download the Profile Switcher extension:
- Click the link above;
- Right-click the link that says “Download (for Firefox)” and save the XPI file to your desktop;
- Once the download is complete, click “File → Open” in Firefox and open the file;
- There will be a brief countdown; when it is done click “Install Now”;
- Quit Firefox and restart it.
- Create a new profile for FireVox to live in:
- Click File → Open Profile Manager;
- It doesn’t matter whether you close the current profile or not, pick “Yes” or “No” as you please;
- Click Create Profile;
- Click Next;
- Enter a name for the profile — this can be anything you like, I generally use “FireVox”;
- Click Finish;
- Click your new profile in the list of profiles;
- Click Start Firefox;
- Download and install the FireVox extension:
- Go to the FireVox download page;
- Right-click the “CLC-4-TTS Suite with Fire Vox - Bundle Pack” link and save the XPI file to your desktop;
- Once the download is complete, click “File → Open” in Firefox and open the file;
- There will be a brief countdown; when it is done click “Install Now”
- Quit Firefox and restart it;
- If you are on Mac, click Tools → FireVox TTS Selection → Mac TTS
- At this point, you should hear FireVox talking to you every time a page loads. If you don’t hear it, then:
- Make sure your speakers/headphones are turned on;
- Make sure the system volume isn’t muted;
- If you’re on Mac, make sure you selected the “Mac TTS” option correctly (see previous step);
- If it’s still not working ... uh, keep poking at it till it does. You do have sound drivers installed, right? Can other programs make noise?
- PressCONTROL+SHIFT+H. This should bring up a list of headings in the document. If instead you see a new window called “Library,” then you’re using Firefox 3.x. There’s a conflict between FireVox and Firefox — the command is triggering two effects at once. You can correct this in one of two ways:
- Method A — Remap the Key:
- Click Tools → FireVox Options;
- Scroll down till you find “List of Headings” in the list of assigned keys;
- Assign it a new key — the letter T will work;
- Click OK;
- The list of headings may now be brought up usingCONTROL+SHIFT+T. You may need to restart Firefox for this to take effect.
- Method B — Unbind the H key from the History window:
- Install the Keyconfig extension;
- Restart Firefox;
- Click Tools → Keyconfig;
- In the list of defined shortcuts, find the “Show All History” entry, mapped toCONTROL+SHIFT+Hand click it to select it;
- Click the Disable button;
- Close Firefox completely and restart it;
- The list of headings may now be brought up usingCONTROL+SHIFT+H.
- Method A — Remap the Key:
FireVox is now installed and configured correctly on this machine. I usually install a copy of the Profile Switcher extension in the FireVox profile too. It doesn’t conflict with FireVox at all, and it makes it easier to switch back and forth between FireVox and your regular Firefox profile.
Take some time and familiarize yourself with the Firefox controls. You can see all of the available keyboard shortcuts by clicking Tools → FireVox Options. FireVox does not use the mouse, because blind people cannot see the mouse pointer to use it.
I’m going to assume from here on out that you’re using Profile Switcher and a separate FireVox profile.
Screen Blocker Card
For best effect, the students should not be able to see the monitor of their computer while performing this exercise. If the computers in your classroom have a power button for the monitor, then you can just turn off the monitors. However, some computers (such as recent iMacs) do not offer a switch for turning off the monitor power. In this case you will need to create blocker cards before class.
These are very simple — just get some cardstock large enough to cover the screen and thick enough to block it out, and have the students prop them up in front of their monitors. If you wish, you can tape a keyboard shortcut cheat sheet to one side so that students can see a list of commands in front of them.
Keyboard Shortcut Cheat Sheet
Here is the cheat sheet which I attach to my blocker cards:
Firefox Shortcut Keys
|Ctrl + L||Select the address bar|
(so you can type in a new location).
|Alt + Left Arrow||Go back one page.|
|Alt + Right Arrow||Go forward one page.|
|Ctrl + T||New tab.|
|Ctrl + N||New window.|
|Ctrl + W||Close tab/window.|
|Ctrl + Tab||Next tab.|
|Ctrl + Shift + Tab||Previous tab.|
|Ctrl + F||Find in this page.|
|F3||Find next in page.|
|Shift + F3||Find previous in page.|
|Ctrl + F5||Reload and ignore cached page.|
|Ctrl + C||Copy text.|
|Ctrl + X||Cut text.|
|Ctrl + V||Paste text.|
|Spacebar||Activate current link (or form element).|
|Shift F6||Previous frame.|
|Ctrl + Shift + D||Read previous.|
|Ctrl + Shift + F||Read next.|
|Ctrl + Shift + E||Repeat.|
|Ctrl + Shift + O||Speak selected text.|
|Ctrl + Shift + Q||Query current element for more info.|
|Ctrl + Shift + U||Speak parent element text.|
|Ctrl + Shift + P||Read current position.|
|Ctrl + Shift + A||Auto-read from current point on.|
|Ctrl + Shift + H||List Headings.|
|Ctrl + Shift + L||List all elements.|
|Ctrl + Shift + S||Spell out a word.|
|Ctrl + Shift + M||FireVox Options|
|Ctrl + Shift + Y||Toggle Live Region announcements.|
|Pause/Break||Toggle Sticky Keys|
|F16||Toggle Sticky Keys (Mac keyboard)|
Using FireVox Sticky Keys
When sticky keys are turned on, you don’t need to press Ctrl + Shift for each FireVox command; just the letter itself. This is convenient, but causes problems any time you have to type information into a form. Always turn sticky keys off when typing information in a form.
This exercise is useful for any course in which students are asked to compose online or construct web sites.