Skip to Main Content
$65,205
$100,000

Give Now to Support Digital Access for People with Disabilities

Sign up for the Knowbility Newsletter to stay in the know on events, community programs, and accessibility news

Web Accessibility Testing with a11yTools for Safari and iOS

taught by: Paul Adam


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

Presentation Materials