Activity 4: WAI-ARIA Landmarks and Alerts

WAI-ARIA Landmarks and Alerts

Landmarks were added to the WAI-ARIA specification as a way of providing easy navigation within a web page for assistive technology users. Prior to landmarks, bypass links were often used (and still are) that would allow a screen reader user to jump from the top of a page, typically, to an anchor strategically placed further down the page. In the first part of this activity you will add a set of landmark roles to a website user interface (UI).

Live regions were introduced in WAI-ARIA as a way to present changing content to assistive technology users. Feedback messages are good candidates for a live region, so the content of a feedback message is read to the user automatically when it appears without the need to search the page to determine whether an action completed successfully or, alternately, if an action produced an error message. The WAI-ARIA “alert” role is a type of live region ideal for presenting error or success feedback messages. In Part 2 of this activity, you’ll add role="alert" to the error messages when the form in the landmarks.html file is submitted with missing or invalid required fields, and when it is submitted successfully.

In your copy of the activity files, open and edit the landmarks.html file. When you have completed both parts of the activity, commit the file back to your GitHub Pages repository, or upload it to the location you have chosen to post your activity files for marking or submit a GitHack URL.

Requirements

Part 1: Landmarks

Add the appropriate landmark roles to elements within the page. Be sure all content within the page is contained within a landmarked region and, depending on the type of content on the page, apply the correct landmark for that type of content.

When you have added all the appropriate landmarks, test the file with ChromeVox (keys: Cvox + L + semicolon) to be sure they are all functioning properly.

Part 2: Live Error and Feedback Messages

The form on the page has three required fields. If you submit the form without valid input for these fields, an error message is generated below each field that has invalid input. Add role="alert" to the first error message, so, when it appears, it is automatically read by ChromeVox along with sending focus to the first field in error so it can be corrected. Do the same for the feedback message that appears when the form is submitted without errors.

HINT: look in join.lib.js in the activity files.

Grading Rubric