Skip to content

Screen Readers

More instructions will be provided in-class. Please bring headphones! 🎧

Here’s how you enable and use the built-in screen reader for your OS:

Please look through the controls and shortcuts! These are important to remember (write them on a note if needed).

Answer the questions below in the Canvas/Gradescope quiz for credit.

Part 1: The Instructions

  1. What OS are you using?
  2. What is the shortcut to enable/disable the screen reader?
  3. What do you press to cycle through links on a page?
  4. What do you press to go through headings?

Part 2: The A11y Project

Start on the a11yproject.com home page. Cover your laptop or partly close the lid so you can’t see what’s on the screen.

Your goal is to get to the “spotlight” for Alex Chen, learn more about him, and then tell me what the name of his software agency is called.

Afterwards, navigate around some more on the page to get a feel for it.

  1. What is the name of Alex Chen’s software agency?
  2. How well were you able to navigate the website?
    • What went well?
    • What didn’t go well?
  3. Take a look at the source code. Do you see anything interesting?
    • How is the code structured?
    • Do they use semantic tags (like header, nav, etc.)?

Part 3: Inaccessible Site

Go to: Intentionally inaccessible websites

Find one of the sites there and try to navigate it using the screen reader.

  1. Were you able to navigate the website (not just a single page)?
    • What went well?
    • What didn’t go well?
  2. Take a look at the source code. Do you see anything interesting?
    • How is the code structured?
    • Do they use semantic tags (like header, nav, etc.)?
  3. Compare your experience in Part 2 with Part 3. Which site was easier to navigate, and why?

Part 4: Accessibility Audit

  1. Put each site (Part 2 and Part 3) into the WAVE accessibility checker.
    • How did each website do?
    • Do the results match with your experience using each site?
  2. Pick a random site or one of your favorite sites. Try to navigate the site with a screen reader, and check the site using WAVE. Write a short critique for the site.