Web Accessibility Testing with a11yTools for Safari and iOS

Session Summary:

a11yTools is a collection of HTML Web Accessibility Testing Tools in one location in a Safari Extension used for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and then take a screenshot showing the a11y error to developers and designers.

Description:

a11yTools is a one-at-a-time testing tool where you pick the HTML Accessibility element or feature you’re testing once-per-page rather than running all tests together. Test and results can be stacked on top each other e.g. to show both Headings and Image Alt Text Properties.

How To Use a11yTools: Visit the webpage you want to test then click the a11yTools button and add the a11yTool you want. Also use the Right-Click Context Menu to access all the a11yTools.

New: Copy Screenshot feature takes a screenshot of the visible browser window area and copies it to the Clipboard so you can then quickly paste into JIRA tickets and Accessibility Reports.

Features:

Reset Page Images Headings Forms Data Tables WAI-ARIA Iframes Page Title Landmarks Tabindex Language Lists Titles Grayscale Show Focus Copy Page Title Copy URL Copy Screenshot WAVE aXe Console Log tota11y HTML_CodeSniffer Validate DOM ARIA Specification ARIA Authoring Practices Demos Checklist - WCAG 2.1 AA

Many Accessibility Testing Tools in an Easy to Use Safari Extension

a11yTools Saves Time Accessibility Testing! Don’t need to inspect code or use VoiceOver to check Accessibility properties of HTML elements. Right click and hit Headings, Images, Forms, Data Tables. Right click and Copy a Screenshot then paste into a11y report or JIRA ticket.

Safari is my browser of choice and where I do VoiceOver screen reader testing so I wanted all my favorite web accessibility testing tools in an easy to use Safari Extension.

There’s a tool to check for most every type of a11y problem, check for incorrect usage of positive tabindex values, missing alt text, missing headings, missing landmarks, missing <iframe> titles, missing lang attributes, are list coded properly, what are the heading levels, are title attributes used correctly, does the site function in grayscale, etc.

If you’re trying to manually test Keyboard Only operation and you can’t see the focus outlines that have been removed then Force Focus Outline forces a thick orange outline on the page so you can tab around the site to test for keyboard operability.

Tools to copy the page title, copy the URL, copy a screenshot, send to the HTML5 validator, and test with other a11y testing tools and libraries like aXe, WAVE, tota11y, and HTML_CodeSniffer.

Useful links are also included to the ARIA Spec, ARIA Authoring Practices, a11y demos, and a WCAG 2.1 AA Checklist to help with testing and recommendations.

Practical Skills:

• Desktop and Mobile Web Accessibility Testing
• Displaying Accessibility Properties of Webpages
• Using Many Accessibility Testing Tools inside a11yTools

Prerequisites:

a11yTools only works on Safari macOS or iOS

Presentation Materials:

• Link to slide deck as provided by the speaker (external site) (external site) for
• Link to slide deck as provided by the speaker (external site) (external site) for