How to use them
- Drag a tool's Install button to your bookmarks bar.
- Open the page you want to test and click the bookmark.
- Click it again to turn it off. The page is left as it was.
No bookmarks bar handy? Click any Install button right here to run that tool on this page.
The Install buttons are not ready. Run python scripts/build.py in the project folder and reload this page.
The tools
Swift A11y Portable: one bookmark that opens a list of every tool, for machines where extensions are blocked or for anyone who wants just one bookmark. Chrome and Edge only: Firefox cannot save a bookmark this large.
-
Page Basics
The first questions on any page: title, language, blocked zoom, timed refresh, frames and their names, autoplaying media, duplicated ids.
Helps check: 2.4.2 Page Titled, 3.1.1 Language of Page, 3.1.2 Language of Parts, 1.4.4 Resize Text
-
Headings
The heading outline a screen reader announces, with every heading boxed on the page. Flags skipped levels, empty headings, a missing level 1, and text that only looks like a heading.
Helps check: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels
-
Landmarks
The page's landmark regions, nested as the page nests them, and any content that sits outside all of them.
Helps check: 1.3.1 Info and Relationships, 2.4.1 Bypass Blocks
-
Links and Buttons
Every link and button with its role, name and state. Flags missing and vague names, and one name going to different places.
Helps check: 2.4.4 Link Purpose, 2.5.3 Label in Name, 4.1.2 Name, Role, Value
-
Forms
Every field with its label, required state, description and error. Flags fields with no name and broken label links.
Helps check: 1.3.1 Info and Relationships, 1.3.5 Identify Input Purpose, 3.3.1 Error Identification, 3.3.2 Labels or Instructions, 4.1.2 Name, Role, Value
-
Images
Every image with a thumbnail and what is announced for it. Flags missing alt, file names used as alt, and decorative images that look informative.
Helps check: 1.1.1 Non-text Content
-
Tables
Every table with its name, size and what looks wrong. Point at, tap or arrow to any cell to see the headers read with it.
Helps check: 1.3.1 Info and Relationships
-
Read Aloud Order
The page in the order a screen reader reads it, numbered in the list and on the page, with what is hidden from speech or only spoken.
Helps check: 1.3.2 Meaningful Sequence, 1.3.1 Info and Relationships
-
Focus Trail
Follows keyboard focus and names each stop. Flags focus that is lost, hidden behind a sticky bar, or trapped, and skip links that go nowhere.
Helps check: 2.1.1 Keyboard, 2.1.2 No Keyboard Trap, 2.4.1 Bypass Blocks, 2.4.3 Focus Order, 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured
-
Announcements
A running log, while you use the page, of what a screen reader is told and of what changed on screen with nothing said.
Helps check: 4.1.3 Status Messages, 3.3.1 Error Identification
-
Contrast
Every piece of text with its contrast ratio, worst first, with both colours and the size rule that applies. Says "cannot tell" where it cannot.
Helps check: 1.4.3 Contrast (Minimum)
-
Target Size
Measures every control and flags the ones too small to tap, with the spacing exception worked out for you.
Helps check: 2.5.8 Target Size (Minimum), 2.5.5 Target Size (Enhanced)
-
Text Spacing
Applies the required text spacing in one click, then lists what broke: text cut off, spilling out or overlapping.
Helps check: 1.4.12 Text Spacing
-
Reflow
At a narrow width or 400 percent zoom, lists what scrolls sideways, sticks out or is cut off.
Helps check: 1.4.10 Reflow, 1.4.4 Resize Text
-
Same Component?
Groups controls that look alike and lists the sets whose members are named or built differently. Pick any element to see its own set.
Helps check: 3.2.4 Consistent Identification, 4.1.2 Name, Role, Value