{"id":286,"date":"2018-12-06T22:06:27","date_gmt":"2018-12-06T22:06:27","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=286"},"modified":"2022-12-16T16:56:36","modified_gmt":"2022-12-16T16:56:36","slug":"activity-3-wai-aria-scavenger-hunt","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/activity-3-wai-aria-scavenger-hunt\/","title":{"raw":"Activity 3: WAI-ARIA Scavenger Hunt","rendered":"Activity 3: WAI-ARIA Scavenger Hunt"},"content":{"raw":"<h2><img src=\"http:\/\/pressbooks.library.ryerson.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm.png\" alt=\"\" class=\"size-full wp-image-152 alignright\" width=\"150\" height=\"158\" \/>WAI-ARIA Scavenger Hunt<\/h2>\r\nThe 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.\r\n<h2>Requirements<\/h2>\r\nAlthough 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\u00a0to determine how the WAI-ARIA elements are being used:\r\n<ul>\r\n \t<li>Test with ChromeVox to hear what WAI-ARIA sounds like with a screen reader.<\/li>\r\n \t<li>Review the source code.<\/li>\r\n<\/ul>\r\nFor full marks on this activity, list at least <strong>five<\/strong> static and five dynamic WAI-ARIA enabled elements in your answer. Include a brief description for each. Here\u2019s a few made-up examples of what you might report in your findings:\r\n<ul>\r\n \t<li><code>aria-describedby<\/code>: used in the outer div of the side menu, to announce instructions on how the side menu works with a keyboard<\/li>\r\n \t<li><code>tabindex=\"0\"<\/code>: used to give keyboard access to the custom buttons in the User Survey<\/li>\r\n \t<li><code>role=\"menu\"<\/code>: used to make the main navigation list appear as a menu to screen readers<\/li>\r\n<\/ul>\r\nFinally, here is the <a href=\"https:\/\/de.torontomu.ca\/wa\/showcase\/\" target=\"_blank\" rel=\"noopener\">Web Accessibility Auditing Showcase website<\/a>. Review only the home page.\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #f66;\"><strong>Key Point: <\/strong>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\u2019s Inspect tool to find dynamic WAI-ARIA. Interact with the site to produce changes to the dynamic WAI-ARIA, and note those changes.<\/div>\r\n<strong>Note:<\/strong> Not all ARIA-related markup starts with the \u201caria-\u201d 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, <code>alt<\/code> is an accessibility feature of the HTML <code>img<\/code> element. You can mention these other accessibility features; however, they will not count toward your mark on this activity.\r\n<h2>Grading Rubric<\/h2>\r\n<div>\r\n<table class=\"addborder\" title=\"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\r\n<thead>\r\n<tr>\r\n<th>Criteria<\/th>\r\n<th>Points<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>At least five instances of static WAI-ARIA being used in the page are listed.<\/td>\r\n<td>5.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>At least five instances of dynamic WAI-ARIA being used in the page are listed.<\/td>\r\n<td>5.0 pts<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Total Points:<\/td>\r\n<td>10.0<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>","rendered":"<h2><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm.png\" alt=\"\" class=\"size-full wp-image-152 alignright\" width=\"150\" height=\"158\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm.png 150w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/activity_sm-65x68.png 65w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/>WAI-ARIA Scavenger Hunt<\/h2>\n<p>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.<\/p>\n<h2>Requirements<\/h2>\n<p>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\u00a0to determine how the WAI-ARIA elements are being used:<\/p>\n<ul>\n<li>Test with ChromeVox to hear what WAI-ARIA sounds like with a screen reader.<\/li>\n<li>Review the source code.<\/li>\n<\/ul>\n<p>For full marks on this activity, list at least <strong>five<\/strong> static and five dynamic WAI-ARIA enabled elements in your answer. Include a brief description for each. Here\u2019s a few made-up examples of what you might report in your findings:<\/p>\n<ul>\n<li><code>aria-describedby<\/code>: used in the outer div of the side menu, to announce instructions on how the side menu works with a keyboard<\/li>\n<li><code>tabindex=\"0\"<\/code>: used to give keyboard access to the custom buttons in the User Survey<\/li>\n<li><code>role=\"menu\"<\/code>: used to make the main navigation list appear as a menu to screen readers<\/li>\n<\/ul>\n<p>Finally, here is the <a href=\"https:\/\/de.torontomu.ca\/wa\/showcase\/\" target=\"_blank\" rel=\"noopener\">Web Accessibility Auditing Showcase website<\/a>. Review only the home page.<\/p>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #f66;\"><strong>Key Point: <\/strong>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\u2019s Inspect tool to find dynamic WAI-ARIA. Interact with the site to produce changes to the dynamic WAI-ARIA, and note those changes.<\/div>\n<p><strong>Note:<\/strong> Not all ARIA-related markup starts with the \u201caria-\u201d 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, <code>alt<\/code> is an accessibility feature of the HTML <code>img<\/code> element. You can mention these other accessibility features; however, they will not count toward your mark on this activity.<\/p>\n<h2>Grading Rubric<\/h2>\n<div>\n<table class=\"addborder\" title=\"\" cellpadding=\"0\" style=\"border-spacing: 0px;\">\n<thead>\n<tr>\n<th>Criteria<\/th>\n<th>Points<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>At least five instances of static WAI-ARIA being used in the page are listed.<\/td>\n<td>5.0 pts<\/td>\n<\/tr>\n<tr>\n<td>At least five instances of dynamic WAI-ARIA being used in the page are listed.<\/td>\n<td>5.0 pts<\/td>\n<\/tr>\n<tr>\n<td>Total Points:<\/td>\n<td>10.0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":100,"menu_order":9,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-286","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":20,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/286\/revisions"}],"predecessor-version":[{"id":1999,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/286\/revisions\/1999"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/28"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/286\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=286"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=286"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}