Recitation 7: 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.
Next, watch this video about “How to Check Web Accessibility with a Screen Reader and Keyboard.”
Finally, configure and use 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:
- macOS:
- iOS:
- Android:
At Recitation
You can complete this activity either individually or with a partner.
You should try to identify accessibility issues with 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
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
- Could you make full use of the page without sight? Would what you are hearing make sense without vision (e.g., do images have alt-text descriptions)? Are links described meaningfully? Are headings used appropriately?
After you have tested several websites, the instructor will ask you to present your findings. The instructor will write up the worst websites on a “Wall of Shame” on the whiteboard.
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
- When you are on a restaurant’s page, you cannot tab to the location control
- When you are on a restaurant’s page, if you select the stars, you cannot tab to the “All Reviews” link
- When you are adding an item, if you check an option by pressing “Enter,” it immediately adds the item to your order
- If you open the list of items in your order, you cannot remove items from your order
Submit
Ensure that all teammates submit to Moodle. You should both upload a PDF containing:
- Your name(s)
- The results from your accessibility testing, in the format shown in the example
- Thoughts on how this activity could be improved in the future