WCAG Radar
A button in your bookmarks bar, or an extension for Chrome and Firefox, that shows how any page is doing on accessibility. 28 of the 45 checks are free and need no account. Headings, alt text, contrast, focus, ARIA and tab order, visible right on your own screen. The radar runs entirely in your browser: nothing is sent and nothing is stored.
How to get the radarHow to get the radar
Three ways, the same radar. The bookmarklet needs no install: you drag it to your bookmarks bar and it works in any browser. The extension goes into Chrome or Firefox once and then sits in your toolbar.
Bookmarklet
Works in any browser, with nothing to install. Also on a machine where you are not allowed to.
Drag this button to your bookmarks bar:
WCAG RadarCan't drag it? Create the bookmark manually
- Create a new bookmark with the star icon or with Ctrl + D, on a Mac Cmd + D.
- Give the bookmark a name, for example “WCAG Radar”.
- Paste the code below into the bookmark's URL field.
Extension for Chrome
Also for Edge, Brave and Vivaldi, since they run the same extensions. The radar gets its own button in your toolbar, so you do not need a visible bookmarks bar.
Install in ChromeTakes you to the Chrome Web Store.
Extension for Firefox
For Firefox on Windows, macOS and Linux. Here too the radar gets its own toolbar button, and it works on pages behind a login and on localhost.
Install in FirefoxTakes you to addons.mozilla.org.
The radar finds possible problems, you judge them
Use the radar to see where something might be going wrong. What lights up is a starting point, not a verdict. Exceptions and complicated components are yours to judge afterwards.
A small tap target can still pass. Alt text can be present and still not match the image. Whether something is really a problem depends on context, and no tool knows the context. No tool replaces human judgement.
What you can expect from the radar
Nothing is stored
The radar runs entirely in your own browser. Your page, your text and your images never leave your computer. We store no URLs and keep no record of what you check.
Safe in protected environments
You can use the radar behind a login, on a staging environment and on localhost. Nothing goes out, so you never have to expose a test environment to an external scanner.
100% European
The script is served from within the European Union. No US cloud service, no tracking, no cookies. The rest of this website runs on European infrastructure too.
Actively developed
We add checks regularly and sharpen existing ones. Your bookmark updates by itself, so you never need to drag it again. Within a day you are on the latest version.
The version you are running is shown at the bottom of the radar panel itself.
What WCAG Radar shows
At the top of the panel you switch between three tabs, tuned to what you do. Each tab holds the checks that belong to that role, so you never scroll past things you do not use.
When a check finds something, previous and next buttons appear in the panel. Use them to jump along every finding on the page instead of hunting for them yourself.
The Radar holds 45 checks. 28 of them are free and will stay that way, with no account. The other 17 are marked “Licence”: they sit in the panel but only run once you have one. Saving a report of your test session belongs to that group too. What a licence costs is on the WCAG Radar page at WCAG Toolkit.
Editors tab
Page title
Shows the title of the page. A clear, unique title helps visitors tell tabs and search results apart.
Read more about page titlesStyles off (reading order)
One click turns off all styling. You then see the bare order in which a screen reader reads the page. Does your story still flow?
Read more about meaningful sequenceReading order (overview) Licence
The page as a clickable list, the way assistive software walks through it: headings, landmarks, links, buttons and fields in document order. See whether the story makes sense, and click straight through to any element.
Read more about meaningful sequenceShow hidden parts Licence
See which elements are hidden and why (display:none, visibility:hidden, the hidden attribute or aria-hidden). Handy for spotting content that is accidentally invisible, or read out twice.
Headings and structure
The Radar draws every heading with its level and warns when you skip a level. A logical heading structure helps everyone who scans the page or reads it with a screen reader.
Read more about headingsHeading quality Licence
Marks empty headings and headings with uninformative text such as “Go to” or “Read more”. Anyone navigating by headings should be able to tell from the heading what the section is about.
Read more about headings and labelsReferences to place, colour or shape
Marks references to position, colour or shape, such as “on the left”, “top right” or “the red button”, including inside alt text. Someone who cannot see the page gets nothing from those. Check that the instruction works without them.
Read more about sensory characteristicsLine breaks used as layout Licence
Two blank lines in a row look like space between two paragraphs. To screen reader software it is one long paragraph: you cannot move through it paragraph by paragraph and the short pause between paragraphs is gone. Lines that start with a dash or a bullet are a list in disguise, so they do not count as a list either. The Radar flags both. Single line breaks, as in an address or a poem, are left alone.
Read more about info and relationshipsStrong emphasis (strong) Licence
The Radar marks every piece of text with strong emphasis, the strong element. Strong emphasis means: this matters. It is not a way to make letters thicker, that is a styling choice. When a whole sentence or a whole paragraph sits inside it, the emphasis lands on everything and therefore on nothing, so those get flagged. Save emphasis for the word or few words that carry the point.
Read more about info and relationshipsEmphasis (em) Licence
The Radar marks every piece of text with emphasis, the em element. Emphasis puts the stress on a word, the way your voice does in conversation. It is not a way to slant letters, that is styling. A whole sentence or a whole paragraph in emphasis gets flagged, because then you can no longer hear where the stress falls.
Read more about info and relationshipsList structure
Marks real lists, so you can see whether bullet points are actually marked up as lists rather than loose lines with dashes.
Read more about listsImages and alt text
See which images have alt text, which have an empty alt attribute (alt=\"\") and which have none. Visible svg images join in too: you see their title and desc. The Radar warns about redundant words like “image of” in alt text, but leaves the judgement to you: you decide whether an image carries meaning.
Read more about alt textClickable images
Links and buttons containing an image show their accessible name. That name should describe the destination or function, not what the image looks like. Clickable images without a name are marked as errors.
Read more about name, role and valueImages off
Images are dimmed. Check whether your design still makes sense without imagery and whether the text can carry the story on its own.
Read more about alt textTables Licence
Marks tables without header cells or a caption. Header cells tell assistive software which row or column a cell belongs to. A caption gives the table a title.
Read more about tablesNames of links and buttons
Every link, button and form field has a name that screen reader software reads out. Usually that is simply the text you can see, but not always: for a button with only an icon, a magnifying glass say, the name sits in the code. The Radar puts that name on screen for every element. That shows you whether someone who cannot see the page gets the same information you do.
Read more about accessible namesLink text
Marks vague links such as “read more” and links without text. Good link text tells you on its own where you will end up.
Read more about link textAll links Licence
All links on the page in a single list in the panel, the way a screen reader announces them: just the link text, without surrounding context. Empty and vague texts stand out. Click a row to jump to that link on the page.
Read more about link textTitles on embedded videos and maps Licence
Marks embedded frames (iframes), such as a video or a map, without a title. A title tells a screen reader user what is inside the frame.
Read more about iframe titlesPage in shades of grey
One click turns the page grey. Check that information such as links or error messages is still recognisable without colour.
Read more about use of colourText contrast
Automatically marks text on a solid background that drops below 4.5:1 (normal text) or 3:1 (large text). For text on an image or gradient you measure two colours yourself with the two pickers.
Read more about text contrastContrast of input fields and focus
This is not about text but about the things around it: the border of an input field, and the outline that appears when you move through the page with the Tab key. Those have to stand out from the background too, otherwise you cannot see where to type or where you are. The Radar walks the page and reports when the difference is too small, or when no outline appears at all.
Read more about non-text contrastPage language
See whether the page language is set and which parts have their own language. The right language makes a screen reader pronounce words correctly.
Read more about the language of the pageFilling in details automatically Licence
Fields asking for personal data should have an autocomplete attribute with a valid value (WCAG 1.3.5). The Radar shows the value per field and warns about missing or unknown values.
Read more about input purposeLabels on input fields
Every input field needs a label: the word next to it that says what to fill in, such as “Email address”. Screen reader software announces that label as soon as someone lands in the field. Without one, all they hear is “input field” and they have no idea what to type. The Radar flags those fields in red.
Read more about labels on form fieldsError messages on form fields
The Radar looks for visible error messages (via role=alert, aria-live, or a class like error/invalid) and checks whether they are linked to an input via aria-describedby or aria-errormessage. Unlinked messages are an error: a screen reader will not announce them. Linked messages without aria-invalid=\"true\" on the field get a warning.
Read more about error messages
Designer tab
Text contrast
Automatically marks text on a solid background that drops below 4.5:1 (normal text) or 3:1 (large text). For text on an image or gradient you measure two colours yourself with the two pickers.
Read more about text contrastContrast of borders and focus
Measures the contrast of input field borders and of the focus style (WCAG 1.4.11). The Radar briefly focuses each element and warns below 3:1, or when a visible focus style is missing entirely.
Read more about non-text contrastLinks by colour alone
Finds links in running text that are distinguished from the text by colour alone (no underline) and shows the colour difference with the surrounding text. Underlining is the safest fix.
Read more about use of colourGrayscale (colour-blindness check)
One click turns the page grey. Check that information such as links or error messages is still recognisable without colour.
Read more about use of colourDark mode Licence
Force-applies the site's own dark mode (the prefers-color-scheme: dark styles), so you can check contrast and readability in dark mode. If the site has no dark mode styles, the Radar says so honestly.
Make focus visible
The Radar forces a clear focus outline on every element. Tab through the page to see whether focus is always visible and moves logically.
Read more about visible focusTarget size (24px) Licence
Every clickable element shows its dimensions; elements smaller than 24 by 24 pixels get an orange mark. A small target can still pass, for example a link within a sentence.
Read more about target sizeGestures and mouse-only controls Licence
Marks elements that can only be operated with a mouse or touch: script-clickable elements without keyboard focus, drag and drop without a clear alternative, and fake buttons with only a mouse cursor.
Read more about keyboard accessResize text only (200%)
The Radar sets all text to 200% and keeps your viewport as it is, like the “Zoom text only” setting in Firefox. Check whether text disappears, overlaps or falls off screen, and whether everything still works.
Read more about resizing textPage zoom 200%
Opens the page in a 640 pixel wide window. That is the same layout you get at 1280 pixels with 200% browser zoom, with the same media queries and the same collapsed components. Then zoom that window yourself to also see the text size.
Read more about resizing textZoom blocked in the code Licence
Reads the page's viewport meta tag. If it carries user-scalable=no or a maximum-scale below 2, people cannot zoom to 200 percent on a phone (WCAG 1.4.4). The check names the value that blocks it; that value can go, the tag itself can stay.
Read more about resizing textText spacing (1.4.12)
Applies the WCAG text spacing values: line height, letter and word spacing and paragraph spacing. You immediately see whether text disappears, overlaps or is cut off.
Read more about text spacingReflow (320 px)
Checks for horizontal scrolling at page level, marks the elements extending off screen, and opens the page in a 320 pixel wide window (WCAG 1.4.10).
Read more about reflowImages off
Images are dimmed. Check whether your design still makes sense without imagery and whether the text can carry the story on its own.
Read more about alt textAutomatic motion Licence
Finds motion that starts by itself and lasts longer than 5 seconds: CSS animations, autoplay videos and marquees. The Radar also watches script-driven motion, such as carousels and tickers, for 5 seconds.
Read more about automatic motionRuler and guides
A horizontal and vertical guide follow your mouse and show the x and y position in pixels, so you can verify alignment and distances precisely.
Developer tab
Element info on hover
Move your mouse over the page and see tag, id, class, role, accessible name, size, focusability and (where measurable) colour and contrast of each element. Also works in embedded frames from the same domain. Faster than opening the inspector for a quick check.
Show accessible name
Every interactive element (links, buttons, form fields) shows its accessible name: the name a screen reader announces. Elements without a name are marked as errors.
Read more about accessible namesARIA roles and attributes
Shows all roles and aria attributes and marks four kinds of errors: broken references to non-existent ids, unknown roles (typos), roles missing a required attribute (such as checkbox without aria-checked), and aria-hidden on focusable content.
Read more about name, role and valueIframes (title)
Iframes without a title or aria-label stand out. A title is needed so a screen reader user knows what is inside the frame.
Read more about iframe titlesAutocomplete on personal data Licence
Fields asking for personal data should have an autocomplete attribute with a valid value (WCAG 1.3.5). The Radar shows the value per field and warns about missing or unknown values.
Read more about input purposeGroups and visible labels
Fieldsets without a legend and groups (role=group) without a name are marked as errors. You also see which fields only have an aria-label and no visible label. That is sometimes fine, for example a magnifying glass icon on a search field, but usually visible text belongs there.
Read more about labels on form fieldsAccessible names of form fields
Marks input fields without an accessible name and fields that only have a placeholder. Visible text next to a field only counts when it is linked to the field via <label for>, aria-label or aria-labelledby.
Read more about labels on form fieldsRequired fields
Shows which fields are marked as required for assistive software (required or aria-required) and warns about fields with an asterisk or 'required' in the label that lack this marking.
Read more about labels on form fieldsError messages on form fields
The Radar looks for visible error messages (via role=alert, aria-live, or a class like error/invalid) and checks whether they are linked to an input via aria-describedby or aria-errormessage. Unlinked messages are an error: a screen reader will not announce them. Linked messages without aria-invalid=\"true\" on the field get a warning.
Read more about error messagesPaste blocked Licence
Marks elements that block pasting, copying or dragging via inline code (onpaste, oncopy, oncut, ondrop). Blocked pasting forces retyping and is a barrier, for example with passwords and email confirmations. Blocks added through scripts are invisible to the Radar; also test pasting yourself.
Read more about accessible authenticationMake focus visible
The Radar forces a clear focus outline on every element. Tab through the page to see whether focus is always visible and moves logically.
Read more about visible focusTab order Licence
Every focusable element gets a number in the order you reach it with Tab. Positive tabindex values jump ahead of the rest and are marked as errors, because they disturb the logical keyboard order.
Read more about focus orderTarget size (24px) Licence
Every clickable element shows its dimensions; elements smaller than 24 by 24 pixels get an orange mark. A small target can still pass, for example a link within a sentence.
Read more about target sizeGestures and mouse-only controls Licence
Marks elements that can only be operated with a mouse or touch: script-clickable elements without keyboard focus, drag and drop without a clear alternative, and fake buttons with only a mouse cursor.
Read more about keyboard accessResize text only (200%)
The Radar sets all text to 200% and keeps your viewport as it is, like the “Zoom text only” setting in Firefox. Check whether text disappears, overlaps or falls off screen, and whether everything still works.
Read more about resizing textPage zoom 200%
Opens the page in a 640 pixel wide window. That is the same layout you get at 1280 pixels with 200% browser zoom, with the same media queries and the same collapsed components. Then zoom that window yourself to also see the text size.
Read more about resizing textZoom blocked in the code Licence
Reads the page's viewport meta tag. If it carries user-scalable=no or a maximum-scale below 2, people cannot zoom to 200 percent on a phone (WCAG 1.4.4). The check names the value that blocks it; that value can go, the tag itself can stay.
Read more about resizing textText spacing (1.4.12)
Applies the WCAG text spacing values: line height, letter and word spacing and paragraph spacing. You immediately see whether text disappears, overlaps or is cut off.
Read more about text spacingReflow (320 px)
Checks for horizontal scrolling at page level, marks the elements extending off screen, and opens the page in a 320 pixel wide window (WCAG 1.4.10).
Read more about reflowText contrast
Automatically marks text on a solid background that drops below 4.5:1 (normal text) or 3:1 (large text). For text on an image or gradient you measure two colours yourself with the two pickers.
Read more about text contrastContrast of borders and focus
Measures the contrast of input field borders and of the focus style (WCAG 1.4.11). The Radar briefly focuses each element and warns below 3:1, or when a visible focus style is missing entirely.
Read more about non-text contrast
The checks you run every week, in one click
As an editor you work in the CMS, not in the code. Yet your work decides a large part of the accessibility: the alt text, the heading structure, the link text, the tables. That is exactly where things go wrong most often.
Our ambition for the Editors tab is straightforward: make the checks you should be doing anyway so easy that you actually do them. No source code to read, no developer to ask. You click the radar and see at once which image has no alt text, where a heading level is skipped and which link is called “read more”.
The radar does not judge for you. With alt text it shows you what is there; you decide whether it fits the image. That is precisely the part an automated scanner can never do for you.
Check contrast, focus and target size without a plugin
In your design tool everything looks fine. In the browser it comes down to the real colours, the real fonts and the real behaviour when someone zooms. You want to get at that, including on a page that is not finished yet.
Our ambition for the Designer tab is to bring the checks you normally spread across three tools into one place. Measure contrast with the two eyedroppers, drop the page to greyscale, force a visible focus ring, mark tap targets smaller than 24 pixels and push the text to 200% to see whether your layout holds.
There is nothing to install and your design does not have to be online. The radar works just as well on a staging environment or on localhost.
Faster than opening the inspector
You know what to look for. What costs time is the digging: which button exactly has no accessible name, does that aria-controls point at an id that exists, and in what order does focus actually travel?
Our ambition for the Developer tab is to answer those questions before you open the inspector. The radar numbers every focusable element in tab order and flags positive tabindex values as an error. It shows every role and aria attribute and reveals which references point at nothing. On hover you get the tag, id, class, role, accessible name and size of any element.
Useful while building, and useful when resolving an audit finding: you see straight away whether your fix had the effect you wanted.
Why a radar, not a scanner?
An automated scan finds at most a third of accessibility problems. It tells you what breaks a rule, but not whether your page makes sense to a visitor.
WCAG Radar turns that around. It shows what is really on your page: which headings you have, what your alt text says, where focus jumps to. You judge with your own eyes whether it holds up. That way you get to know your own site, which beats a list of error codes.
The radar does not replace a full audit. It helps you find and fix the most common problems yourself, so less is left over when an audit does happen.
Get clarity on your digital accessibility — without stress
Schedule a introductory meeting. No commitments — just valuable insight into your risks and opportunities.
Schedule an introduction
