3.9: Activity 3- WAI-ARIA Scavenger Hunt

Last updated
Save as PDF

Page ID: 15598

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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.

Key Point: There is static and dynamic WAI-ARIA used in this page. You may View Source to find any static WAI-ARIA being used. Use your browser’s Inspect tool to find dynamic WAI-ARIA. Interact with the site to produce changes to the dynamic WAI-ARIA, and note those changes.

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

Criteria	Points
At least five instances of static WAI-ARIA being used in the page are listed.	5.0 pts
At least five instances of dynamic WAI-ARIA being used in the page are listed.	5.0 pts
Total Points:	10.0