The Good Citizens check
Every problem it finds is named by the person it leaves out.
Try it here
Press “Check this page”. It checks the page you’re reading and shows each problem, where it is, and who it affects.
Why should I care?
An automatic check finds some problems, never all of them: it’s where testing starts, not where it ends.
- 143barriers for disabled people, built into one test page by the UK government in 2017.
- 71%found by ten automatic checking tools together.
- 42missed by every one of them.
What to do on your website
- Check the live page after every change.
- Fix faint text and missing picture descriptions first.
- Watch real people use the page.
More, if you want it
Check your own website with this tool
This is the button you’ll drag.
- Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
- Drag the Good Citizens check button up into that bar and let go.
- Open your own website and click Good Citizens check in the bar. Click it on any page to check it for accessibility, speed, type and structure. Each finding shows you where it is on the page and who it affects. Copy the report into your work. Click again to close it.
This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets have no bookmarks bar, so there are three other ways below.
On a phone or tablet
iPhone or iPad, from the Share button
- Copy the tool:
- Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
- In the shortcut’s details, turn on Show in Share Sheet, and name it Good Citizens check.
- Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
- On your website in Safari, tap Share, then Good Citizens check.
Android, from Chrome’s address bar
- Copy the tool:
- Bookmark any page with the star, then edit that bookmark: name it gc good citizens check and paste the tool in as its address.
- On your website, type gc good citizens check in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer
Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.
Get all 10 tools in one go
One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:
Download the bookmarks file- Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
- Safari: File › Import From › Bookmarks HTML File
- Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML
More free tools: Fovea, Color vision, Aging eyes, or all 10.
Why this matters
When you finish a job, you walk through it once before you drive away, because a problem is cheapest to fix before the customer finds it. This free bookmark is that walk-through for any live page, whatever it was built with.
Every finding names the person it affects, a customer the page is leaving out, points to the exact spot on the page, and links to the article among our free tools about who that person is.
Four questions about every page
On the walk-through it asks: can everyone use it? Was it worth the wait? Can people read it comfortably? Can machines tell what it is?
People runs axe-core, the free accessibility checker from Deque that Google’s Lighthouse page-grading tool has used since 20173, against WCAG 2.2, the web’s standard rules for pages disabled people can use. Speed reads the browser’s own timing for this visit: when the main content appeared, how much the layout jumped, how much was downloaded and from how many other companies, and which images were far larger than shown. Type measures the text as it appears: paragraphs smaller than 16 pixels, lines longer than about 85 characters, lines set too close together, and how many sizes the page uses. Structure looks at what search engines and AI assistants read: headings, landmarks, title, description, share cards, and the hidden labels (JSON-LD and microformats) that tell a machine what the page is about.
Nothing leaves the page. The check runs in your own browser, and the report is yours to copy.
A machine finds some problems, never all
A walk-through catches what you can see. It can’t open the walls.
In 2017 the UK government’s accessibility team built a page with 143 deliberate barriers and ran ten tools over it. The best single tool found 41%5; all ten together found 71%, and 42 barriers were missed by every one. Deque reports that automatic testing finds about 57%6 of issues by volume, because the common ones are so common. A perfect Lighthouse score does not mean a page is accessible.
Speed is measured once, on your computer and your connection, which are probably better than most of your customers’. And some sites forbid outside scripts; on those, the bookmark says so and stops. So use the check, then the keyboard tool and the screen reader view, and then watch real people use the page.
All the advice, in full
Check what you shipped, not what you drew
Run it on the live page after every release. Problems are cheapest to fix while the work is still fresh.
Fix the six common failures first
Low contrast, missing image descriptions, unlabeled fields, empty links, empty buttons and missing language make up almost every error on the web.
Read “check” as “look”
Some findings are marked “check”, and some the tool couldn’t decide. A person needs to look at those, because that is often where the real barriers are.
Budget the weight
Keep pages light enough for a cheap phone on a slow connection. Every megabyte is paid for by the reader.
Test with people
Even all the automatic tools together miss many barriers. Usability testing with disabled people finds what they cannot.
Copy the report into the work
Paste the report into your issue tracker or pull request, so fixing it is part of the job and not a separate project.
On prototypes, in any tool
The check works out what kind of page it is on before it reports. On a live page, or a prototype built as one, it runs everything.
On a design drawn as a picture, such as a Figma prototype link, it switches to its Picture tab. Your browser asks to share the tab, once, and the check reads the pixels for text that may be too faint and colors that look the same to someone color-blind. Both are estimates, and they are marked on the screen so you can look. Structure and type wait until it is built.
When the content is in a frame from another site, as in many app builders and Storybook, it offers to open the frame on its own. In a design tool’s editor, it suggests opening the prototype or preview link instead.
What people get wrong
- A 100 Lighthouse score means accessible
- Automatic tools find a minority of barriers. A perfect score is a starting line.
- An overlay or widget will fix it
- Widgets cannot repair the structure of a page, and sites using them are still sued.
- Fast on my machine means fast
- Your laptop and connection are better than most of your readers’. Test on a slow phone too.
- Accessibility is a separate project
- Most failures are small and repeated. Catching them at each release is cheaper than any audit.
Where these numbers come from
Every figure on this page comes from one of these 8 sources. The small numbers in the text point here.
Guidance
Introduction to LighthouseGuidance
Lighthouse accessibility scoreArticle
Google selects Deque’s axe for Chrome DevTools·
Deque blog
Reference
axe-core (Mozilla Public License 2.0)GitHub
Article
What we found when we tested tools on the world’s least-accessible webpage·
Accessibility in government blog
Vendor data
Automated testing study identifies 57 percent of digital accessibility issuesDeque blog
Report
The WebAIM Million·
Guidance
Web Vitalsweb.dev