Activity 3: WAI-ARIA Scavenger Hunt

WAI-ARIA Scavenger Hunt

The overall goal of the instruction here is to provide the tools and knowledge needed to make web interactivity accessible to screen reader users. In this activity, you will use ChromeVox and code review to identify WAI-ARIA used throughout the Web Accessibility Auditing Showcase home page.

Requirements

Although we have only touched on the details of WAI-ARIA, in this activity, you will be spending some time examining the homepage of the Web Accessibility Auditing Showcase website. Use a combination of the following to determine how the WAI-ARIA elements are being used:

• Test with ChromeVox to hear what WAI-ARIA sounds like with a screen reader.
• Review the source code.

For full marks on this activity, list at least five static and five dynamic WAI-ARIA enabled elements in your answer. Include a brief description for each. Here’s a few made-up examples of what you might report in your findings:

• aria-describedby: used in the outer div of the side menu, to announce instructions on how the side menu works with a keyboard
• tabindex="0": used to give keyboard access to the custom buttons in the User Survey
• role="menu": used to make the main navigation list appear as a menu to screen readers

Finally, here is the Web Accessibility Auditing Showcase website. Review only the home page.

Note: Not all ARIA-related markup starts with the “aria-” prefix. Scan through the WAI-ARIA documentation introduced in this unit for a listing of all potential WAI-ARIA markup you might come across. Also, not all accessibility enhancements are WAI-ARIA. For example, alt is an accessibility feature of the HTML img element. You can mention these other accessibility features; however, they will not count toward your mark on this activity.

Grading Rubric