{"id":1349,"date":"2018-04-27T14:31:07","date_gmt":"2018-04-27T14:31:07","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/pwaa\/?post_type=chapter&p=1349"},"modified":"2019-08-12T16:15:39","modified_gmt":"2019-08-12T16:15:39","slug":"code-examination-and-repair","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/chapter\/code-examination-and-repair\/","title":{"raw":"Code Examination and Repair","rendered":"Code Examination and Repair"},"content":{"raw":"
Technical:<\/strong> The content on this page is intended for a technical audience.<\/div>\r\n
\r\n
Toolkit:<\/strong> If your preferred browser is Firefox, you may wish to install\u00a0Firefox for Developers<\/a><\/strong>, with extended developer tools. You can also use the standard Inspect Element<\/strong> tool found in most browsers\u2019 context menu by right clicking on an element and selecting it from the menu.<\/div>\r\nOnce you have discovered a potential barrier, you can identify where the problem is occurring in the HTML markup. In the screenshot below, the feedback tab (1) on the right of the screen is examined by right clicking and choosing \u201cInspect Element with Firebug\"\u201d (2). Note:<\/strong> Firebug is now deprecated, but you can do the same thing with selecting \u201cInspect Element\u201d from the menu. You will notice the code associated with the feature is highlighted in the code window (3) to the lower left. Click on the Edit button (4) to edit that HTML to test possible solutions.\r\n\r\n\"screen\r\n\r\nFigure: Steps to examine and modify code to test potential accessibility solutions<\/strong>\r\n\r\nIn the case above, the Tab Key Navigation test revealed that the Feedback tab would not receive focus, thus could not be operated with a keyboard. A simple fix for this is to add tabindex=\"0\"<\/code> to the main element containing the tab. Once added, without reloading the page, the Tab Key Navigation test is conducted again to see if the tab now takes keyboard focus. It does, though it is still not possible to operate the tab, which requires modifying the associated JavaScript.\r\n\r\n\"firebug\r\n\r\nFigure: Result of adding tabindex=\"0\"<\/code><\/strong>\r\n\r\nAfter clicking the Edit button, the selected code from above is opened for editing. In this case tabindex=\"0\"<\/code> has been added to test whether this adds keyboard focus to the Feedback tab (which it does).\r\n\r\nFor a look at other tools for examining code, watch the following video on the Chrome accessibility audits.\r\n\r\nVideo:\u00a0The new way to test accessibility with Chrome DevTools<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/b0Q5Zp_yKaU[\/embed]\r\n\r\n<\/div>\r\n\u00a9 Google Chrome Developers. Released under the terms of a Creative Commons Attribution license.<\/span>","rendered":"
Technical:<\/strong> The content on this page is intended for a technical audience.<\/div>\n
\n
Toolkit:<\/strong> If your preferred browser is Firefox, you may wish to install\u00a0Firefox for Developers<\/a><\/strong>, with extended developer tools. You can also use the standard Inspect Element<\/strong> tool found in most browsers\u2019 context menu by right clicking on an element and selecting it from the menu.<\/div>\n

Once you have discovered a potential barrier, you can identify where the problem is occurring in the HTML markup. In the screenshot below, the feedback tab (1) on the right of the screen is examined by right clicking and choosing \u201cInspect Element with Firebug”\u201d (2). Note:<\/strong> Firebug is now deprecated, but you can do the same thing with selecting \u201cInspect Element\u201d from the menu. You will notice the code associated with the feature is highlighted in the code window (3) to the lower left. Click on the Edit button (4) to edit that HTML to test possible solutions.<\/p>\n

\"screen<\/p>\n

Figure: Steps to examine and modify code to test potential accessibility solutions<\/strong><\/p>\n

In the case above, the Tab Key Navigation test revealed that the Feedback tab would not receive focus, thus could not be operated with a keyboard. A simple fix for this is to add tabindex=\"0\"<\/code> to the main element containing the tab. Once added, without reloading the page, the Tab Key Navigation test is conducted again to see if the tab now takes keyboard focus. It does, though it is still not possible to operate the tab, which requires modifying the associated JavaScript.<\/p>\n

\"firebug<\/p>\n

Figure: Result of adding tabindex=\"0\"<\/code><\/strong><\/p>\n

After clicking the Edit button, the selected code from above is opened for editing. In this case tabindex=\"0\"<\/code> has been added to test whether this adds keyboard focus to the Feedback tab (which it does).<\/p>\n

For a look at other tools for examining code, watch the following video on the Chrome accessibility audits.<\/p>\n

Video:\u00a0The new way to test accessibility with Chrome DevTools<\/a><\/strong><\/p>\n