ABOUT IBM Equal Access Accessibility Checker

The IBM Equal Access Accessibility Checker is an open source tool for web developers and auditors that utilizes IBM’s accessibility rule engine, which detects accessibility issues for web pages and web applications. The extension integrates into the browser development tools, providing an integrated checking experience, helping users quickly identify the source of accessibility issues and try fixes. This plugin is available for Chrome browser, Firefox browser, Edge browser.

STEPS TO WORK WITH THE TOOL:

1. Open the Chrome browser
2. Go to the IBM Equal Access Accessibility Checker in the Chrome Web Store https://chromewebstore.google.com/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp
3. Press ‘Add To Chrome’ button & confirm the installation process
4. The accessibility checker is a “DevTools” extension that includes an Accessibility Checker tab to find and fix issues in the code and an Accessibility assessment tab for an executive summary of the page
5. Navigate to the required website which needs accessibility test
6. Click on the blue ‘Scan’ button ‘Accessibility assessment’ tab to quickly find issues with a component or web page
7. Once the scan is completed, the accessibility issues count & list is displayed
8. The issues are divided into 3 types:
   1. Violation – failures that need to be corrected
   2. Needs review – review to confirm that it’s not a violation
   3. Recommendation – opportunities to apply best practices
   4. Hidden – issues to be ignored or have been resolved
9. There are 3 ways to organize and group the set of issues detected:
   1. by Element roles – issues are organized by the ARIA roles of the Document Object Model (DOM) elements. This view shows both implicit and explicit roles, and not the element names. Use this view to explore issues within a specific element role and its children. (default)
   2. by Requirements – issues are mapped to the most relevant IBM requirement, which corresponds to the WCAG standards. Use this view to classify and report issues.
   3. by Rules – issues organized by rules in the rule set. Use this view to see all the issues common to a rule at once.
10. There are 4 ways to further filter one or more types of issues detected:
    1. Violations – failures that need to be corrected (default checked)
    2. Needs review – review to confirm that it’s not a violation (default checked)
    3. RecommendationsRules – opportunities to apply best practices (default checked)
    4. Hidden – issues to be ignored or have been resolved (default not-checked)
11. Additional actions that can be taken with the list of issues:
    1. Collapse or Expand the group of issues to see the individual issues
    2. Select an individual or groups of issues to be hidden
    3. Click ‘Learn more’ link in the issue for detailed help on how to fix it
    4. Press ‘Export to XLS’ to download the results in a spreadsheet format
12. We can export a report in both .html and .xls formats while in the checker view
13. We can also combine multiple pages to be scanned and generate one single xls test report
14. Click on the dropdown next to the Scan button and select ‘Start storing scans’
15. Scan additional pages by loading new pages and changing dynamic content with end-user input or scripting. Remember to press the Scan button on each desired state of the page(s).
16. The number of stored scans will show below Scan button
17. Open the ‘Options’ dropdown menu and select ‘View stored scans’.
18. Manage the stored scans via the ‘Stored scans’ panel:
    1. Detail: includes a screenshot of the page when the scan was performed
    2. Scan label: edit the label to uniquely differentiate the scan and customize the report
    3. Delete: select one or more scans to be deleted from the report
    4. All: select all the scans by using the checkbox in the first column of the header row
    5. Download: select one or more scans to download the multi-scan report
    6. Cancel: to uncheck the selections
    7. Return: click back (or navigate) into the Checker to continue using the functionality, such as storing more scans
19. Open the ‘Options’ dropdown menu and select ‘Export stored scans’
20. The focus view allows you to switch between viewing all issues on the page, or only the issues for a selected element or component in the DOM.
21. The Checker includes 4 filters when viewing issues. Each filter type has a checkbox in the dropdown menu. If the checkbox is checked the issue type will show. If the checkbox is not checked the issue type will be filtered and not shown. The default is for three (3) types of issues:
    1. Violations,
    2. Needs review
    3. Recommendations
22. Unchecking one of the checkboxes will filter (not show) the associated issues from the list, but those issues are still counted in the total issues found and Scan summary report
23. The Hide feature allows issues to be removed from view and subtracted from the respective issue counts and Scan summary report. This can be useful for showing a set of issues or reflecting progress by hiding issues that have been resolved or identified to be fixed later
24. Press the ‘Keyboard checker mode’ icon to turn on/off keyboard visualization. This mode shows a visualization of the keyboard tab order detected on the page, and elements with detectable keyboard access issues. Use this for manual keyboard accessibility testing.
25. The accessibility checker is available as a Node package for automated testing within a continuous integration / continuous delivery (CI/CD) pipeline that can scan a batch of local files
26. Node accessibility-checker: automated accessibility testing within a continuous integration pipeline, such as Travis CI for Node-based test environments, such as Selenium, Puppeteer, Playwright, and Zombie; the ability to validate results against baseline files and scan local files
27. To run from command line, read https://www.npmjs.com/package/accessibility-checker
28. The IBM equal access accessibility checker is available on the github page: https://github.com/IBMa/equal-access

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/