{"id":549,"date":"2018-07-06T17:48:55","date_gmt":"2018-07-06T17:48:55","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/?post_type=chapter&#038;p=549"},"modified":"2018-07-06T18:48:26","modified_gmt":"2018-07-06T18:48:26","slug":"axe-accessibility-audit-tool","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/chapter\/axe-accessibility-audit-tool\/","title":{"rendered":"aXe Accessibility Audit Tool"},"content":{"raw":"Deque Labs developed an accessibility engine called <a href=\"https:\/\/www.deque.com\/axe\/\" target=\"_blank\" rel=\"noopener\">aXe accessibility tools<\/a> to test accessibility of web pages. Axe exists as an extension for Chrome and Firefox. I'll focus on instructions for adding it to Firefox, since WAVE only installs in Chrome browser.\u00a0 You can <a target=\"_blank\" title=\"This link takes you to page to add aXe Developer Tools as a Firefox Add-On\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/axe-devtools\/?src=api\" rel=\"noopener\">install <span>aXe<\/span> Developer Tools<\/a> to add an Accessibility Audit tool to Mozilla Firefox's Web Developer Tools. When this tool is active, it will allow you to analyze a web page and see the accessibility issues in a panel below the web page. When you are on a page you would like to check the accessibility of, you can activate aXe's Accessibility Audit. This is a great tool if you not only want to identify the problem areas, but also inspect the code of the page. If you prefer not to look at the code, you are still made aware of the issues that will arise for people with disabilities landing on the page you've chosen to share.\r\n\r\nBelow is a video overview of aXe Accessibility Audit tool, used with its Highlight and Inspect features.\r\n\r\n<iframe src=\"https:\/\/www.youtube.com\/embed\/FW1giWW5M9I\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>\r\n\r\nThe aXe add-on for Firefox recently upgraded to version 3. It looks like it will add to CSU's mandated Firefox version 48, but there's a notice that it shouldn't be used with an outdated version of Firefox.\u00a0 If you want to keep using Firefox browser and have a version of it that will work with aXe Developer Tools, you can install <a target=\"_blank\" title=\"Firefox Developer Edition to run with aXe add-on\" href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/developer\/\" rel=\"noopener\">Firefox Developer Edition<\/a>.\u00a0 The colors in the interface are different, but you can search for the site you want much in the same way as with the standard Firefox.\r\n\r\nTo search for aXe in Firefox, click the menu icon with the three horizontal bars in the upper right corner. This type of icon is typically referred to as a \"hamburger\" because it resembles a sandwich. The arrow in the image below points to the menu icon.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/Firefox_hamburger_icon.gif\" alt=\"The hamburger icon in Firefox, or main menu, is located in the upper right corner and has three horizontal lines. \" width=\"220\" height=\"131\" class=\"clearRight\" \/>\r\n\r\nOnce open, click on Add-ons.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/Firefox_Add_On_Menu.gif\" alt=\"The Add Ons menu option in Firefox\" width=\"498\" height=\"815\" class=\"clearRight\" \/>\r\n\r\nIn the next screen, click on Extensions and type \"aXe\" in the Search box at the upper right.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_Extension_Search-1024x346.gif\" alt=\"Firefox's Extensions screen with aXe typed in the Search input field.\" width=\"1024\" height=\"346\" class=\"clear\" \/>\r\n\r\nWhen aXe comes up at the top of the search results, click on it. On the page with the details about aXe, click the Add to Firefox button.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_Add_to_Firefox_button-1024x887.gif\" alt=\"aXe Extension details page with the Add to Firefox button\" width=\"1024\" height=\"887\" class=\"clear\" \/>\r\n\r\nOnce aXe is added to Firefox, you can access it under the web developer tools. These tools are opened by clicking the wrench icon at the top right of the browser, or going to the hamburger menu and selecting Web Developer and then Toggle Tools. See the method for accessing the web developer tools under the wrench icon below.\r\n\r\n&nbsp;\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_wrench_menu-1024x630.gif\" alt=\"With the wrench icon selected, which accesses Firefox's Web Developer Tools, select Toggle Tools option.\" width=\"1024\" height=\"630\" class=\"clear\" \/>\r\n\r\nEnter the URL for the page you would like to analyze for accessibility. I'll go to the updated version of the American Nursing Association's membership form. The Developer Tools will likely open at the bottom of the browser window or on the right side. Below is an image of the tools open at the bottom of the screen. You will also need to navigate to the aXe tab or view of the developer tools. Once there, click the Analyze button.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_analyze_button-1024x608.gif\" alt=\"aXe open at bottom of Firefox, and Analyze button visible and clickable.\" width=\"1024\" height=\"608\" class=\"clear\" \/>\r\n\r\nThe analysis results will come up at the bottom of the window. On the left are a list of problem items on the page. In the middle are details about the issue, such as a problem with text being too light against the background color and not creating enough contrast to meet the WCAG 2.0 AA standard. When the Highlight button is clicked on, the item will have an outline around it, which helps people with sight recognize what it is on the page. This will help non-coders to see what the problem is, along with the written description of the problem. The end user can arrow through all of the items on the page with the same issue, e.g. not enough color contrast between text and background, using the arrows at the far right of the aXe screen. To look at different issues, click the next item down in the list on the left, e.g. documents must have a title.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_Analysis_Results_1-1024x614.gif\" alt=\"aXe analysis results showing a list of problem items on the left, and details about the currently selected problem in the middle.\" width=\"1024\" height=\"614\" class=\"clear\" \/>\r\n\r\nOn the right, you'll see information about how to fix the problem and how critical the impact is. With the color contrast problem below, we see that its impact is serious. We're told that the light gray text has a contrast of 2.32 to 1 against the background color. We're told that we need to raise the contrast to a ratio of 4.5:1.\r\n\r\n<img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_how_to_fix.png\" alt=\"aXe explanation of how to fix a problem with color contrast, showing that its impact is serious.\" width=\"901\" height=\"250\" class=\"clear\" \/>\r\n\r\n&nbsp;","rendered":"<p>Deque Labs developed an accessibility engine called <a href=\"https:\/\/www.deque.com\/axe\/\" target=\"_blank\" rel=\"noopener\">aXe accessibility tools<\/a> to test accessibility of web pages. Axe exists as an extension for Chrome and Firefox. I&#8217;ll focus on instructions for adding it to Firefox, since WAVE only installs in Chrome browser.\u00a0 You can <a target=\"_blank\" title=\"This link takes you to page to add aXe Developer Tools as a Firefox Add-On\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/axe-devtools\/?src=api\" rel=\"noopener\">install aXe Developer Tools<\/a> to add an Accessibility Audit tool to Mozilla Firefox&#8217;s Web Developer Tools. When this tool is active, it will allow you to analyze a web page and see the accessibility issues in a panel below the web page. When you are on a page you would like to check the accessibility of, you can activate aXe&#8217;s Accessibility Audit. This is a great tool if you not only want to identify the problem areas, but also inspect the code of the page. If you prefer not to look at the code, you are still made aware of the issues that will arise for people with disabilities landing on the page you&#8217;ve chosen to share.<\/p>\n<p>Below is a video overview of aXe Accessibility Audit tool, used with its Highlight and Inspect features.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/FW1giWW5M9I\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>The aXe add-on for Firefox recently upgraded to version 3. It looks like it will add to CSU&#8217;s mandated Firefox version 48, but there&#8217;s a notice that it shouldn&#8217;t be used with an outdated version of Firefox.\u00a0 If you want to keep using Firefox browser and have a version of it that will work with aXe Developer Tools, you can install <a target=\"_blank\" title=\"Firefox Developer Edition to run with aXe add-on\" href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/developer\/\" rel=\"noopener\">Firefox Developer Edition<\/a>.\u00a0 The colors in the interface are different, but you can search for the site you want much in the same way as with the standard Firefox.<\/p>\n<p>To search for aXe in Firefox, click the menu icon with the three horizontal bars in the upper right corner. This type of icon is typically referred to as a &#8220;hamburger&#8221; because it resembles a sandwich. The arrow in the image below points to the menu icon.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/Firefox_hamburger_icon.gif\" alt=\"The hamburger icon in Firefox, or main menu, is located in the upper right corner and has three horizontal lines.\" width=\"220\" height=\"131\" class=\"clearRight\" \/><\/p>\n<p>Once open, click on Add-ons.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/Firefox_Add_On_Menu.gif\" alt=\"The Add Ons menu option in Firefox\" width=\"498\" height=\"815\" class=\"clearRight\" \/><\/p>\n<p>In the next screen, click on Extensions and type &#8220;aXe&#8221; in the Search box at the upper right.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_Extension_Search-1024x346.gif\" alt=\"Firefox's Extensions screen with aXe typed in the Search input field.\" width=\"1024\" height=\"346\" class=\"clear\" \/><\/p>\n<p>When aXe comes up at the top of the search results, click on it. On the page with the details about aXe, click the Add to Firefox button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_Add_to_Firefox_button-1024x887.gif\" alt=\"aXe Extension details page with the Add to Firefox button\" width=\"1024\" height=\"887\" class=\"clear\" \/><\/p>\n<p>Once aXe is added to Firefox, you can access it under the web developer tools. These tools are opened by clicking the wrench icon at the top right of the browser, or going to the hamburger menu and selecting Web Developer and then Toggle Tools. See the method for accessing the web developer tools under the wrench icon below.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_wrench_menu-1024x630.gif\" alt=\"With the wrench icon selected, which accesses Firefox's Web Developer Tools, select Toggle Tools option.\" width=\"1024\" height=\"630\" class=\"clear\" \/><\/p>\n<p>Enter the URL for the page you would like to analyze for accessibility. I&#8217;ll go to the updated version of the American Nursing Association&#8217;s membership form. The Developer Tools will likely open at the bottom of the browser window or on the right side. Below is an image of the tools open at the bottom of the screen. You will also need to navigate to the aXe tab or view of the developer tools. Once there, click the Analyze button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_analyze_button-1024x608.gif\" alt=\"aXe open at bottom of Firefox, and Analyze button visible and clickable.\" width=\"1024\" height=\"608\" class=\"clear\" \/><\/p>\n<p>The analysis results will come up at the bottom of the window. On the left are a list of problem items on the page. In the middle are details about the issue, such as a problem with text being too light against the background color and not creating enough contrast to meet the WCAG 2.0 AA standard. When the Highlight button is clicked on, the item will have an outline around it, which helps people with sight recognize what it is on the page. This will help non-coders to see what the problem is, along with the written description of the problem. The end user can arrow through all of the items on the page with the same issue, e.g. not enough color contrast between text and background, using the arrows at the far right of the aXe screen. To look at different issues, click the next item down in the list on the left, e.g. documents must have a title.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_Analysis_Results_1-1024x614.gif\" alt=\"aXe analysis results showing a list of problem items on the left, and details about the currently selected problem in the middle.\" width=\"1024\" height=\"614\" class=\"clear\" \/><\/p>\n<p>On the right, you&#8217;ll see information about how to fix the problem and how critical the impact is. With the color contrast problem below, we see that its impact is serious. We&#8217;re told that the light gray text has a contrast of 2.32 to 1 against the background color. We&#8217;re told that we need to raise the contrast to a ratio of 4.5:1.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-content\/uploads\/sites\/8\/2018\/07\/aXe_how_to_fix.png\" alt=\"aXe explanation of how to fix a problem with color contrast, showing that its impact is serious.\" width=\"901\" height=\"250\" class=\"clear\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":7,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["heather-caprette"],"pb_section_license":"cc-by-nc-sa"},"chapter-type":[],"contributor":[61],"license":[58],"class_list":["post-549","chapter","type-chapter","status-publish","hentry","contributor-heather-caprette","license-cc-by-nc-sa"],"part":376,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":17,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/549\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/549\/revisions\/573"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/parts\/376"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/549\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=549"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=549"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/contributor?post=549"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/license?post=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}