Audio Auditing

[ 45 minutes ]

In this activity, we will listen to websites together and reverse engineer them. In groups of 3, we will pull up our favorite websites in our web browsers, use our default operating systems’ Screen Readers and keyboards to navigate them, and try to re-draw the websites from what we hear. Each group will consist of:

A Controller: Opens the webpage, launches the Screen Reader, hides the computer and receives orders from the Navigator.
A Navigator: Listens to the Screen Reader and decides where to navigate by telling the Controller what keys to press.
A Harvester: Listens to the interaction between the Screen Reader and Navigator and uses their drawing tools to reproduce the website.

Goals

This is intended as a short exercise to

Experience how screen readers navigate the web and explore the alternative navigation systems created for them (or not!).
Grasp how much the fields of user interface and user experience design currently assume about the user’s ability to see and wayfind in standardized ways.
Inspect the ableist characteristics of the “standardized” computer user.
Have fun designing by listening.

Important: This is intended as a short exercise to momentarily experience the web through screen-readers and keyboard-navigation and in no way assumes that by doing so we “know” what it means to navigate the web as a blind or visually impaired person, nor do we assume that we are subsequently granted the authority to design for the blind or visually impaired.

Requirements

computer
web browser and internet connectivity
screen reader (default for operating system is okay)
pen and paper (or any other illustration materials)

Steps

[ 5 minutes ] Before we start, please agree on working together on a fixed list of websites whose designs we like. These will be shuffled. What matters most when making a choice is trying not to pick common websites such as The Guardian or Instagram. Instead, try to pick something that is less likely to have been visited by your peers or whose design is less easy to guess.
[ 5 minutes ] Break up into groups of 3; groups of 2 will also work.
[ 20 minutes ] In each group, play the audio auditing game as follows. Repeat with different websites from the list as many times as you like within the time frame; rotating roles each time:
1. Prep
  1. Decide who is the Controller, Navigator, and Harvester. In case of a group of 2, the Navigator and the Harvester are merged into the same role.
  2. The Harvester picks a website from the list that they don’t know. They add their name next to it. They do not open the link.
  3. The Controller takes the computer, hides the screen from the other players, opens the link, and launches the Screen Reader.
    1. On MacOS, this is called the VoiceOver utility and can be launched by pressing the CMD and F5 keys together.
    2. On Windows, this is called Narrator, which can be launched by opening the start menu and typing Narrator in the search box.
    3. Most Linux distributions will have window managers using the software Orca. Launching Orca varies per distribution.
2. Navigate / Control / Harvest
  1. The Screen Reader starts describing the contents of the webpage on the Controller’s computer. The Navigator and Harvester cannot see it.
  2. The Navigator gives orders to the Controller on where and how to navigate the website. Keep in mind that, although clicking and scrolling is possible, you will probably not be very successful since you are not seeing the website. Try the keyboard instead, here are some hints:
    1. Most webpages will have a linear navigation, meaning that every element in the webpage can only be reached from its previous sibling, and you have to go through it to reach its following sibling.
    2. The TAB key is the most important key for navigation. It moves navigation to the next element in the document order.
    3. Pressing SHIFT + TAB will take you to the previous element in the document order.
    4. The ENTER key is generally used as the equivalent of a “left click”, for example to open a link or activate a button.
    5. The SPACEBAR key is often used to make selections, toggle checkboxes or radio buttons.
    6. Try to see where the arrow keys take you.
    7. ESC often takes you out of children elements and into their parent elements.
    8. Of course, most important is to take your time and listen to the Screen Reader, as they will be telling you where you can go and what you can do most of the time.
  3. The Harvester, with their drawing tools in their hands, re-constructs, from what they hear, the design and contents of the webpage. Some hints:
    1. Listen carefully to the Screen Reader, they are the main source of information on the document structure.
    2. Some websites have designed special elements just for Screen Readers. Most of the time, these are also visually hidden.
    3. Make note of the interaction between the Navigator and the Screen Reader. Do not try to reproduce their step-by-step interaction, but try to use this information to add detail to your drawing.
    4. Try to ignore what you know about web-design and try to think about your knowledge of architecture and urban design. You might hear words such as “Landmark” and “Anchor” come up.
3. Document
  1. When the time is up, place the original website next to the Harvester’s re-production. Together, decide on an accuracy score for the website (between 0 and 10), where 10 is “uncanny” and 0 is “all websites are squares”.
[ 15 minutes ] Presenting results and discussion