ABOUT Pa11y

Pa11y is a free and open source tool that aims to make accessibility testing easier. Pa11y is your automated accessibility testing pal. It runs accessibility tests on your pages via the command line or Node.js, so you can automate your accessibility testing process.

Visit https://pa11y.org/ & https://github.com/pa11y/pa11y to learn more about pa11y 

Pa11y COMMANDS & USAGE

pa11y is a nodejs application & hence the prerequisite to work with this tool is nodejs installation on your computer.

1. To install pa11y globally with npm, run the below command: npm install -g pa11y
2. To get the pa11y CLI options available, run the below command: pa11y –help
3. To start accessibility testing via pa11y CLI, run the below command: pa11y <url>   
4. Pa11y CLI supports different reporters for test report generation, use any of the below commands:
             pa11y url                                                 // to generate the test report in CLI format
             pa11y url > report.csv –reporter csv          // to generate the test report in CSV format
             pa11y url > report.html –reporter html      // to generate the test report in HTML format
             pa11y url > report.json –reporter json       // to generate the test report in JSON format
             pa11y url > report.tsv –reporter tsv           // to generate the test report in TSV format
5. Use any of the above reporter commands to integrate pa11y with Jenkins for CI/CD/CT testing

PRACTICE APPLICATION:

https://scout-app.io/

PROS

• Supports web accessibility testing through headless mode. It internally uses headless chrome to evaluate WCAG rules.
• Provides a result dashboard interface to view the results
• Generates hints to fix the violations
• Easy to integrate with JavaScript frameworks
• Can be integrated with CI tools such as Jenkins

CONS

• Does not support mobile accessibility testing
• Selenium integration is not possible
• Multipage testing where session management is involved is a challenge

ANDI TOOL

ABOUT ANDI TOOL

• ANDI [Accessible Name and Description Inspector] is a free accessibility testing tool for websites
• ANDI provides automated detection of accessibility issues
• ANDI reveals what a screen reader should say for interactive elements (the accessible name computation)
• ANDI gives practical suggestions to improve accessibility and checks 508 compliance
• To install ANDI, visit https://www.ssa.gov/accessibility/andi/help/install.html and drag ANDI button to your browser bookmarks toolbar
• After ANDI has analyzed the page, it will present results in the Page Analysis section.
• When ANDI is launched, HTML elements are analyzed for common accessibility issues. When issues are found, ANDI generates an Alert that pinpoints potential accessibility issues.
• Alerts are contained in the Accessibility Alerts list. The alerts are categorized into 3 alert levels which indicate the likelihood that an accessibility defect is present:
  • Danger (red, X icon) – almost certain likelihood of an issue
  • Warning (orange, ! icon) – likelihood of an issue or inconsistent behavior with screen readers
  • Caution (yellow, ? icon) – needs further investigation
• After ANDI has finished scanning the page, all focusable/interactive elements will be given visual highlights
• Focusable elements will be highlighted with an orange dashed outline (1 pixel thickness) signifying that some accessibility markup was found for the element. A tester should inspect these elements to determine if the ANDI Output is appropriate for its context in the page.
• If ANDI has found a high priority level Accessibility Alert associated with an element, the element will be highlighted with a red, dashed outline (3 pixel thickness).
• As a user navigates the test page ANDI will inspect the element that has focus or is hovered over with the mouse. The element being inspected is called the “Active Element” and will be highlighted with a pinkish-purple solid outline (4 pixel thickness). The Active Element’s accessibility markup will be displayed in the Accessibility Components section and its text alternative computation (what a screen reader would say) will appear in the ANDI Output section.
• ANDI performs an automated scan of the test page and searches for HTML tags and attributes that impact accessibility. These tags and attributes are referred to as Accessibility Components and are presented in a table.
• ANDI’s Output displays what a screen reader should read audibly which is the accessible name and accessible description. It will also include some phrasings depending on the presence of certain states and properties plus any associating Accessibility Alerts that ANDI has detected.
• To learn more about ANDI, visit
  • https://www.ssa.gov/accessibility/andi/help/howtouse.html
  • https://github.com/SSAgov/ANDI
  • https://www.ssa.gov/accessibility/andi/help/faq.html#hostYourOwn

ANDI TOOL ADVANTAGES

Developers like ANDI because:

• It’s easy to install, quick to run, and helps satisfy accessibility requirements

Testers like ANDI because:

• It saves them time by automatically finding potential defects and offering solutions

End Users Ultimately Benefit:

• When web pages are accessible, everyone can efficiently perceive, understand, navigate, and interact with the Web

PRACTICE APPLICATION:

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