ABOUT AXE TOOL

Axe is a free accessibility tool kit from Deque Systems.

Axe supports 3 types of testing in the dev tools plugin installed:

1. Automated scan of the entire web pages
2. Automated scan of the selected web page/element
3. Guided manual test
4. Axe helps to export the issues by accessibility type either in JSON or CSV format

STEPS TO WORK WITH AXE TOOL:

1. Go to Chrome Web Store & search for “axe DevTools”
2. Click “Add to Chrome”
3. When prompted, click Add extension to complete the installation
4. Open the website that you want to test in Google Chrome
5. Ensure the page is fully loaded so that all content is available for testing
6. Right-click anywhere on the page and select Inspect, or you can press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac)
7. The Developer Tools panel will appear, typically on the right or bottom of the screen
8. Once the Developer Tools are open, look for the axe tab in the Developer Tools panel (usually at the top of the panel)
9. If it’s not immediately visible, you might need to click the >> button to reveal hidden tabs
10. Click on the “axe” tab to open the accessibility testing tools
11. Click on Sign in/Sign up to Axe tool
12. Inside the axe DevTools tab, you’ll see a button labeled “Analyze”. Click on this button to run an accessibility test on the page
13. axe DevTools will automatically analyze the page for common accessibility issues. It will show you a list of issues, categorized by severity (e.g., critical, moderate, minor, etc.).
14. After the scan is complete, you will see detailed information about each accessibility issue, including:
    
    1. Issue description: A short explanation of what the problem is
    2. Recommendations: Suggestions on how to fix the issue
    3. Impact: The potential impact on users (e.g., users with visual impairments or screen readers)
    4. Element in the DOM: A link to the specific HTML element where the issue was found
15. Now, you can review the test results
    
    1. Severity and Category: The results are divided into different levels of severity (e.g., critical, serious, minor) and categories (e.g., color contrast, ARIA, forms)      Note: Critical issues should be prioritized as they may significantly affect accessibility
    2. Description and Fix: Clicking on each issue will show a detailed description and sometimes a recommended solution or best practices for resolving the issue
16. Let us now inspect the accessibility Issues
    
    1. You can click on each accessibility issue to see more details, including:
       
       1. Where the issue is found in the page’s HTML (the affected element)
       2. A visual highlight on the element in the page itself
    2. You can then use the browser’s Developer Tools to inspect the HTML and CSS and make the necessary fixes for the accessibility problem
    3. After applying the fixes to your website, you can rerun the accessibility test to check if the issue has been resolved
17. Additional Features of Axe DevTools
    
    1. Color Contrast Checker: You can check if the color contrast on your page meets WCAG (Web Content Accessibility Guidelines) standards
    2. Manual Accessibility Checks: In addition to automated testing, you can perform manual accessibility checks through the axe extension
    3. Export Reports: You can export the accessibility report as a CSV or JSON file for documentation or sharing with your team
18. By following these steps, you can easily use axe DevTools to identify and fix accessibility issues in your web application, ensuring that your website is more inclusive and accessible to a wider audience

https://www.deque.com/axe/

https://broken-workshop.dequelabs.com/

PROS

• APIs available for Android, Web (browser extensions) and Windows.
• Supports multiple browsers (Microsoft Edge v40 and above, Google Chrome v42 and above, Mozilla Firefox v38 and above, Apple Safari v7 and above, Internet Explorer v9, 10, 11).
• Ready to plug in integrations are available. So, for any automation framework it gives seamless integration feasibility.
• Selenium WebDriver integration is available. Hence end to end testing or multi-page testing is possible with Axe.
• Provides links to the rules where it failed.
• axe rates the impact of accessibility issues differently than WAVE. It does not use the “alerts” category, rather all errors are given a severity level. Using this system prompts more errors to be fixed than if some errors are labeled as alerts implying they are not important.
• axe will list elements that are not necessarily accessibility errors but warrant review based on the context of the element.
• Axe gives an option to review issues. The issues under review are not really violations but they can be accessibility issues one should consider (maybe in the future).
• Axe generates hints to fix the violations.

CONS

• Axe can not be used to test iOS applications.
• There is no results dashboard available
• axe will point out some color contrast issues that still need to be tested manually.
• While not overtly a drawback with this tool, it does require a bit more knowledge by the user to understand the process for testing.

BEST PRACTICES FOR EFFECTIVE ACCESSIBILITY TESTING

Integrating Accessibility Testing into the Development Lifecycle:

1. Shift-Left Testing: incorporate accessibility testing early in the development process. It helps identify accessibility issues before they’re deeply embedded in the code
2. Continuous integration: integrate accessibility checks into the CI/CD pipeline. Automated tools can run accessibility tests as part of regular builds
3. Comprehensive Test Plans: develop test plans that include accessibility criteria
4. Cross-functional collaboration: encourage collaboration between developers, designers, and testers to ensure multiple perspectives
5. Exploratory testing: use the application in ways that real users with disabilities would. That way, you guarantee a more inclusive user experience.

Involving users with disabilities in testing

1. User research and personas: create detailed exploratory testing personas representing users with various disabilities- they should guide the design and testing processes
2. User Testing sessions: conduct usability testing sessions with people who have disabilities. Their direct feedback can reveal issues that might not be apparent through automated testing or simulations. This also applies to beta testing phases
3. Feedback mechanisms: establish channels for users’ ongoing feedback. These could include forums, surveys, or direct support channels.

DEMO APPLICATIONS TO PRACTICE:

https://broken-workshop.dequelabs.com/  

https://dequeuniversity.com/demo/dream  

https://webtestingcourse.dequecloud.com/  

https://dequeuniversity.com/demo/mars/  

https://findanexpert.unimelb.edu.au/  

https://dylanmhowell.com/seo-for-photographers/  

https://www.ssa.gov/accessibility/andi/help/demo/index.html  

https://scout-app.io/  

https://www.washington.edu/accesscomputing/AU/