{"id":319,"date":"2018-12-10T16:16:34","date_gmt":"2018-12-10T16:16:34","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&p=319"},"modified":"2019-10-23T19:33:35","modified_gmt":"2019-10-23T19:33:35","slug":"activity-4-wai-aria-landmarks-and-alerts","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-4-wai-aria-landmarks-and-alerts\/","title":{"raw":"Activity 4: WAI-ARIA Landmarks and Alerts","rendered":"Activity 4: WAI-ARIA Landmarks and Alerts"},"content":{"raw":"

WAI-ARIA Landmarks and Alerts<\/h2>\r\n\"\"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).\r\n\r\nLive 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 \u201calert\u201d role is a type of live region ideal for presenting error or success feedback messages. In Part 2 of this activity, you\u2019ll add role=\"alert\"<\/code> 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.\r\n\r\nIn your copy of the activity files, open and edit the landmarks.html<\/a> 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<\/a> URL.\r\n

Requirements<\/h2>\r\n

Part 1: Landmarks<\/h3>\r\nAdd 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.\r\n\r\nWhen you have added all the appropriate landmarks, test the file with ChromeVox (keys: Cvox + L + semicolon) to be sure they are all functioning properly.\r\n

Part 2: Live Error and Feedback Messages<\/h3>\r\nThe 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\"<\/code> 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.\r\n\r\nHINT<\/strong>: look in join.lib.js<\/a> in the activity files.\r\n

Grading Rubric<\/h2>\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Criteria<\/th>\r\nPoints<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
Content Contained:\r\nAll content is contained within a landmarked region.<\/td>\r\n2.0 pts<\/td>\r\n<\/tr>\r\n
Correct Landmarks:\r\nAppropriate landmarks have been used for each region.<\/td>\r\n3.0 pts<\/td>\r\n<\/tr>\r\n
Messages Announced:\r\nThe first Error\/Feedback message is announced when the form is submitted with and without invalid input. When the first required field is corrected, the next Error\/Feedback message is announced, and so on, so any field with invalid content is read aloud.<\/td>\r\n4.0 pts<\/td>\r\n<\/tr>\r\n
Landmarks Distinguishable:\r\nLandmark regions with the same role are distinguishable from each other.<\/td>\r\n1.0 pts<\/td>\r\n<\/tr>\r\n
Total Points:<\/td>\r\n10.0<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>","rendered":"
\n

Contents<\/p>\n