Web Accessibility

Preparation

First, read the article “Accessibility, the future, and why Domino’s matters.” The article is about a lawsuit filed against Domino’s because its website and app were not accessible to users with disabilities. Watch the embedded videos as well.

Next, watch this video about “How to Check Web Accessibility with a Screen Reader and Keyboard.”

Finally, configure and test using a screen reader on your device. Screen readers exist for most platforms, including Windows, macOS, iOS, and Android. These videos will guide you through the process of enabling and using a screen reader:

• Windows:
  • Screen Reader Basics: NVDA
  • NVDA Cheatsheet
• macOS:
  • Screen Reader Basics: VoiceOver
  • macOS VoiceOver Cheatsheet
• iOS:
  • Assistive Tech: VoiceOver on iOS
  • iOS VoiceOver Cheatsheet
• Android:
  • Assistive Tech: TalkBack on Android
  • Talkback Cheatsheet

Test your knowledge by using a screen reader to navigate the course website. If you’re having difficulty learning to use a screen reader, please visit office hours or TA hours.

In class, we will test the accessibility of popular websites. Bring your device and headphones to class, so you can use headphones while using a screen reader.

Note: Skilled users of screen readers will have very different experiences than users who are just learning to use these tools. For example, experienced users often listen to text at high speed, and use screen reader features to jump between areas of interest on webpages. Thus, the usability evaluations you will perform in this activity can’t replace testing by people who use accessibility tools every day. Nevertheless, a preliminary evaluation is useful for catching obvious usability issues (e.g., images without alt text).

Optional: Consider also reading:

• Is There a Right Way to Act Blind?
• The Hidden Image Descriptions Making the Internet Accessible
• For Blind Internet Users, the Fix Can Be Worse Than the Flaws
• Tech journalism’s accessibility problem
• The Unintended Negative Consequences of Disability Simulations

In Class

You can complete this activity either individually or with a partner.

You should try to identify accessibility issues with three popular websites. For each website, record:

• The name of the website
• How you tested the website (i.e., screen reader or keyboard navigation, on which platform?)
• A description of the accessibility issue(s) you discovered
  • For each issue, also describe how it negatively affects users

You can test using a screen reader or keyboard navigation:

• If testing using keyboard navigation:
  • In Chrome and Edge, simply press the “Tab” key to navigate forward through elements, “Shift-Tab” to go backwards, and “Enter” to interact with an element. In Safari, first enable tab navigation under “Preferences,” “Advanced,” “Press Tab to highlight each item on a webpage.”
  • Test with physically impaired users in mind (i.e., sighted, but unable to use the mouse)
  • Can you make full use of the page without using the mouse? Is the focus ring always visible?
• If testing using a screen reader:
  • Use NVDA, VoiceOver, or Talkback
  • Test with visually impaired users in mind
  • Can you make full use of the page without sight? Does what you hear make sense without vision (e.g., do images have meaningful alt text descriptions)? Are links described meaningfully? Are headings used appropriately?

In either case, try to accomplish tasks a typical user might try. For example, when testing Grubhub’s website, I tried to order a meal.

Example: Grubhub

• Website name: Grubhub
• Testing method: Keyboard navigation in Safari on macOS
• Accessibility issues:
  • Tabbing through the food types, the focus ring can go off the edge of the page.
    • This prevents users from searching for certain types of food.
  • When you are on a restaurant’s page, you cannot tab to the location control.
    • This prevents users from locating restaurants near them.
  • When you are on a restaurant’s page, if you select the stars, you cannot tab to the “All Reviews” link.
    • This prevents users from reading a restaurant’s reviews.
  • When you are adding an item, if you check an option by pressing “Enter,” it immediately adds the item to your order.
    • The prevents users from customizing their orders, which may be a serious issue if they have allergies.
  • If you open the list of items in your order, you cannot remove items from your order.
    • This might cause users to unintentionally order items they don’t want.

If you finish early, re-test the websites using a different testing approach (i.e., screen reader or keyboard navigation).

Share Your Results

After you have thoroughly tested at least three websites:

• List the worst accessibility issues you discovered on the “Wall of Shame” on the board
• Also, list any websites that were highly accessible (i.e., websites with only minor usability issues, if any)

Note: If you couldn’t find any accessibility issues, test more websites until you find some!

After all teams have finished testing, the instructor will lead a discussion of the class’s findings.

Submit

If you worked with a partner, remember to join a group on Canvas with your partner.

Upload a PDF containing:

• Your name(s)
• The results of your accessibility testing for three different websites, in the format shown in the example
• A short paragraph for each of these prompts. Write at least 300 words total.
  • Based on the class’s findings, do you think most websites are easily used by people with visual and/or motor impairments?
  • Why do you think things are this way?
  • What should be done to improve web accessibility?
• Thoughts on how this activity could be improved in the future

Further Reading

This activity focused on accessibility for users with visual and upper mobility impairments. However, additional factors should be considered when designing accessible websites. For example, websites should avoid flashing patterns to avoid triggering seizures for those with photosensitive epilepsy. The World Wide Web Consortium’s Web Accessibility Initiative (W3C WAI) offers a more comprehensive list of accessible design requirements.

For web developers, the W3C WAI also offers lists of tools for evaluating web accessibility, and guidelines for performing comprehensive usability evaluations. When creating highly-customized websites, the W3C’s WAI-ARIA standards should be followed to ensure that custom user-interface elements remain accessible.

Learning Goals

• Gain awareness of how people with visual and motor impairments use the web
• Practice performing accessibility evaluations of websites
• Evaluate the prevalence of web accessibility issues