Skip to Main Content

Web Accessibility Testing with A11Y Tools iOS App and Safari Extension

taught by: Paul Adam

Session Summary:

a11yTools is a collection of Web Accessibility Testing Tools in an iOS App or Safari Extension for easy testing from your iPhone, iPad, or Mac.

Description:

a11yTools began as JavaScript Accessibility Testing Bookmarklets with each testing tool installed as a separate bookmarklet link added to your browser’s bookmarks bar. The bookmarklets are still available and they work in any web browser. a11yTools combines all those JavaScript Bookmarklets into a single iOS app or Safari macOS Extension that is easier to use and quicker to find.

a11yTools was released at CSUN last year and both apps have recently been updated for iOS 12 and Safari 12. The free, Legacy Safari Extension no longer works in the newest version of Safari, 12, now Apple requires extensions be released in the Mac App Store.

a11yTools Extension for Safari macOS

Download on the Mac App Store, https://itunes.apple.com/us/app/a11ytools/id1364813335?ls=1&mt=12&uo=4&at=10l5ab.

a11yTools is a collection of HTML Web Accessibility Testing Tools in one location in an Extension for Safari 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.

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.

Reset the Page to remove the a11yTools output without reloading the site. Features: Images Headings Forms Tables WAI-ARIA Iframes Page Title Landmarks Tabindex Lang Lists Grayscale Show Focus Titles Reset Page Copy Page Title Copy URL WAVE accessibilityjs aXe Console Log tota11y HTML_CodeSniffer Validate DOM ARIA Specification ARIA Authoring Practices Demos Checklist - WCAG 2.1 AA

a11yTools iOS - Web Accessibility Testing Tool

Download on the iOS App Store, https://itunes.apple.com/us/app/a11ytools-web-accessibility/id1356241530?mt=8&uo=4&at=10l5ab.

a11yTools is a collection of HTML Web Accessibility Testing Tools in one location on your iPhone and iPad for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and easily take a screenshot on your phone showing the a11y error to developers and designers.

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 tap the + Add button and add the a11yTool you want.

Reset the Page by tapping the + Add a11yTool button and tapping Reset Page

Or

Shake Your iPhone to Reset Page and remove the a11yTools output.

Features: Forms Images Headings Iframes Landmarks Lang Lists aXe Console Title Attributes Tabindex Grayscale Page Title Force Show Focus Remove CSS Screenshot Bookmarks Shake to Reset Page WAI-ARIA WAVE Page Validate Page HTML_CodeSniffer tota11y accessibilityjs ARIA Specification ARIA Authoring Practices Checklist for WCAG Demos Resources

Prerequisites:

Need either an iPhone, iPad, or Mac Computer to use a11yTools