By Ryan Jones.
[Editor’s note: This is an edited version of an article originally published by The Paciello Group, an international accessibility agency. The original post is linked to at the end of this article. Its author, Ryan Jones, is a project manager and trainer at The Paciello Group.]
For those of us who use screen-reading software such as JAWS, NVDA, or VoiceOver to access information on the web, the user experience can be quite different from those who can visually see the content. One of my goals throughout the many accessibility-focused training classes I have led has been to help others more accurately understand what it is like for someone using screen-reading software to navigate through a web page.
It is commonplace for most people to want to jump straight into the technical details, such as: what keystrokes do I press? Which screen-reader should I test with? What browser should I use?
While these are all important considerations, it is best to first step back and ask: “What is the experience like and how can I simulate that experience if I can see the screen?”
I would like to present several illustrations that have been effective for communicating answers to that question.
An open door
Let’s set the stage for our first illustration. Imagine you have just opened a door and are looking into a large conference room. In the centre of the room is a large conference table with ten chairs (five on each side of the table). Seated at the table are two men and two women. All four people are seated at the same side of the table (they are facing the door you are standing at). On the far side of the room (behind the people seated at the table) are three large windows that look out over a courtyard with benches, flowers, and small trees. On the right side of the room is a counter with a coffee pot and microwave sitting on it. The left side of the room has a large flat screen television mounted on the wall.
Assuming you are not already familiar with the layout of this room, what is the first thing you would do after opening the door? Some of you might visually scan the room from left to right. Some might scan from right to left. Others might first look at the table in the centre and then scan the perimeter of the room. No matter how you do it, most of you would in some way scan the room with your eyes to get a quick sense of the layout and contents. The scan might only take a couple of seconds and most of you won’t even realise you did it. You might then focus in on certain elements of interest, such as the people sitting at the table or the television.
A darkened room
Now, let’s reimagine the scene. This time when you open the door, the room is completely dark. No light is present and you can see absolutely nothing at first glance. But you have been given a small flashlight. When you switch it on, the light allows you to see a small area at a time. The area you can see is a small circle about two feet in diameter.
How would you now observe the contents of the room?
Some of you might move the light back and forth from left to right, starting at your feet and moving away from you. Some of you might start from the back of the room and move the light toward you, while others might randomly point the light at various places in the room with no pattern. As you move the light around the room you will need to build a mental map or image of what is in the room and how it is laid out. Building this mental map will take significantly longer than visually scanning the room, when all the lights were on. As you move the flashlight around, you will need to remember each thing you have seen and how they all relate together. If you forget where something is located, it will take more time to locate it.
For example, was the counter with the coffee pot on the right side of the room or was it in the back? How many people were sitting at the table? Was it four or five?
Answering these questions when you can see the entire room at once will take little effort, but answering them when you can only see a small area at a time will take much longer.
An analogous scenario
This second scenario is analogous to how a screen-reader user reviews a web page or smartphone app.
While keyboard commands or touch gestures can move the screen-reading software around the page, it is only possible to read one thing at a time. There is no way for the visually impaired user to get a quick (one-to-three second) overview of the page, similar to what someone who can see the screen might do.
Fortunately, if accessible page navigation techniques such as headings or regions are used, this can help the user focus in on certain areas of the page.
Stepping back to our dark room scenario from above, imagine there are now small red dots of light on key elements in the room, such as the table, counter, television and each person sitting at the table. You still have to use the flashlight to look around, but the red dots give you an idea of where the most important things might be located.
Another significant challenge that screen-reader users may face is dynamically changing content on a page. Returning to our light and dark room examples from above, pretend that one of the men gets up and moves to the other side of the table. There are now two women and one man on one side of the table, and one man on the other side. In the lit room example, you would most likely notice the movement as it happens.
Even if you weren’t looking directly at the man who moved, you would probably notice movement out of the corner of your eye and then turn to see what was happening. In our dark room scenario it would be very difficult to know that anything happened unless you happened to have the flashlight beam directly on the man who moved at the exact right time. It is more likely you would never know he moved until later, when you might move the light over the chair he vacated.
This, in effect, is what happens when page content changes but does not alert screen-reading software. The user may never know that something changed on the page unless they happen to move across the new information and realise that it is now different.
This challenge is best solved by ensuring that dynamic content uses techniques such as alerts or live regions, which cause the screen-reading software to announce the updated information to the user.
In our dark room scenario above, the man might verbally announce that he is moving from one side of the table to the other. Even if your light wasn’t on him, you would hear the announcement and better understand what is changing.
In one final illustration, let’s take the windows that look out to the courtyard. In the lighted room scenario you would be able to quickly see that the windows face a courtyard with benches, flowers and trees. But in the dark room example, even if you pointed the light at the windows, you would not be able to see what was outside. This illustrates visual elements, such as images that do not have a text label associated with them.
For example, screen-reading software can identify that an image is present on a page, but the only way it can communicate information about the image is through the alternative text label that can be assigned. Without the text label, the screen-reader user would have no idea what the image is showing. In our dark room example, a sign might be placed next to the windows with a description of what appears outside. When you locate the windows with your light, you would then be able to read the sign.
One of the best ways to understand the screen-reader user experience is to try it yourself. It is certainly advantageous to try using screen-reading software to navigate web page content. In addition, though, here is a simple exercise to simulate the scenarios above.
1. Print out a paper copy of a web page. I recommend one that is not too large, but contains a variety of elements, such as text, links, menus, etc.
2. Find a blank sheet of paper and make a small hole in the centre of it. The hole should be about the size of two or three words (around half an inch in diameter is usually sufficient).
3. Place the paper with the hole in it over the printout of the web page and try making sense of what is there. Slide the paper with the hole in it around, in order to read the contents of the web page print out below.
It will probably be very difficult and time-consuming to understand what is on the page, but this gives you a general idea of what it is like for a screen-reader user, especially if no page navigation techniques are used.
[Editor’s note: this is an edited version of an article from The Paciello Group. Read the original version at The Paciello Group’s website.]