gotalt?

Accessibility bookmarklet

Drag one link to your bookmarks bar. Click it on any page, including a staging site, localhost or a page behind a login, and it checks alt text, headings, link names, form labels and the contrast of the text actually on screen.

Free · No signup · Runs entirely in your browser — the page you check is never sent anywhere

Get the bookmarklet

What it checks

It reads the page as your browser has rendered it, so it sees what a scanner working from the HTML a server sends cannot: the colours that are actually painted, content added by JavaScript, and the page as you left it, logged in.

  • Page language and title. A missing, empty or implausible lang on the <html> element, and a missing page title. See WCAG 3.1.1 and 2.4.2.
  • Images. No alt attribute; alt text that is a file name or a placeholder such as "image" or "IMG_1234.jpg"; alt text over 150 characters (advisory); a link whose only content is an image with empty alt, which leaves the link with no name; image buttons with no alt; role="img" with no name. See WCAG 1.1.1.
  • Headings. The page's heading outline, including role="heading" with aria-level; a missing h1; skipped levels; empty headings. See WCAG 1.3.1.
  • Links. Links with no accessible name, and generic text such as "click here" or "read more" (advisory, because WCAG 2.4.4 lets the surrounding sentence supply the purpose).
  • Buttons. Buttons with no accessible name. Submit and reset inputs have a browser default name and are not flagged.
  • Form fields. Fields with no label, and fields labelled only by their placeholder. See WCAG 3.3.2.
  • Text contrast. The colour of each piece of rendered text, including the text in buttons, form fields (dates and times too), drop-downs and the dots of a password field, against the background found by walking up its ancestors, measured against WCAG 1.4.3 (4.5:1, or 3:1 for large text). Text over a background image, a gradient, a picture, a video or an overlay is listed for a manual check rather than guessed at, and so is text faded to under a tenth of its opacity. Disabled controls and their labels are skipped, as WCAG exempts them, and so is text hidden with opacity: 0. The panel never shows what is typed in a field. It examines up to 3,000 text elements per run and says so when it stops.

Every finding has a short explanation, the element it is about, and a Show on page button that scrolls to the element and draws a box around it. Contrast failures are grouped by colour pair, with the nearest colour that would pass.

Install it in your browser

  1. Show your bookmarks bar

  2. Drag the link onto the bar

    Drag the "GotAlt page check" link from the box above onto the bar. In Firefox you can also right-click it and choose Bookmark Link.

  3. Or make the bookmark by hand

    Dragging needs a mouse or trackpad. Without one, press "Copy bookmarklet code", add a bookmark for any page (Ctrl+D, or Cmd+D on a Mac), edit that bookmark (in Safari, Control-click it to edit its address; see Apple's instructions), call it "GotAlt page check", and paste the code into its address or URL field. Paste it there, not into the browser's address bar: some browsers remove the javascript: start of the code when you paste it into the address bar.

  4. Click it on any page

    Open the page you want to check and click the bookmark. A panel opens at the side of the page. Click the bookmark again, press Escape, or use the Close button to remove it. "Run the checks again" re-reads the page, which is what you want after opening a menu or loading more content.

Or press "Try it on this page" above to run it on this guide. It should find very little here, because this site is meant to pass its own checks.

Nothing leaves your browser

The bookmarklet reads the page in your tab and shows its results in a panel in the same tab. It makes no network requests, loads no other scripts and writes nothing to storage, and it has no analytics, so we do not know that you ran it. The links in the panel (WAVE, axe DevTools, our pricing page and, when some text sits on an image, our image contrast checker) only load if you click them.

A bookmarklet runs with the same access as the page you click it on, so only use ones you have read. This one is a single readable file: gotalt-check.js. The bookmarklet is the same code with its comments, spare spaces and line breaks taken out, so it fits in a bookmark. It carries its own copy of the contrast maths, so it never downloads a second script, and a site that blocks scripts from other places cannot stop it loading part of itself. Whether a site's security settings let a bookmarklet run at all depends on your browser; see the limits below.

What it can and can't do

What this bookmarklet can't do

  • It finds only part of the problems. It can see a missing name or a low-contrast colour. It cannot tell whether alt text is true of the picture, whether a heading makes sense, or whether the page works with a keyboard or a screen reader. To check that your alt text is accurate, use the alt text checker. For a fuller rule set on the live page, use WAVE, axe DevTools or the Silktide toolbar. They are free and good.
  • Accessible names are simplified. They follow a simplified version of the W3C accessible name algorithm (aria-labelledby, aria-label, native labels and alt text, content, title), and the panel says so. A screen reader may announce something slightly different.
  • Contrast is measured, not judged. Backgrounds are found by walking up from each element and blending background colours until one is opaque. Text with an image, a gradient, a video or another element (a positioned overlay, or a positioned box drawn with ::before or ::after) painted behind or over it cannot be measured that way, so it is listed as "check manually" with a link to the image contrast checker. Two cases are measured all the same: a small background icon placed clear of the text, such as a drop-down's arrow, and a plain box of one colour that the CSS painting order puts under the text, such as the field under a floating label. Where the painting order cannot be worked out, the text is listed for a manual check. A background fixed to the window and at least half as tall as it counts as behind all the text beside it, because the page scrolls under it. A shorter fixed bar, such as a header or a cookie banner, is only checked where it is when you run the check. Also listed for a manual check: text on a page with no background colour that your browser shows in a dark colour scheme or whose background colour your browser will not report, and text faded to under a tenth of its opacity, which is usually a fade-in caught half way. Text shadows, CSS filters, blend modes, placeholder text, file inputs and text added by CSS ::before or ::after are not measured. Past 3,000 text elements the check stops and says so.
  • It sees one page, once. It reads the page as it is when you click: your window, your login, whatever menus you have open. Content that loads later is only seen if you run it again. Frames from other sites and closed shadow DOM cannot be inspected; open shadow DOM and frames from the same site are. Text a web component shows through a closed shadow root is measured against the page around the component, which may not be what is behind it.
  • It shows at most 300 findings per category. If there are more, it says how many it left out.
  • Some sites can block it. A site's security settings (a Content-Security-Policy) can stop bookmarklets running, and browsers differ here: Firefox applies the site's policy to bookmarklets, which is a long-standing open Firefox bug report. A site with a modal dialog open can also cover the panel. If clicking it does nothing, that may be why; close the dialog, try another browser, or use a browser extension on that site. Our automated tests run it in a Chromium-based browser.
  • It does not certify anything. Nothing automated can, and a clean result here means only that these checks found nothing.

Why scanners miss issues explains the gap between what machines can see and what people need.

Questions

Why a bookmarklet and not a browser extension?

There is nothing to install from a store, and it only runs on the page when you click it. Extensions often ask for permission to read every page you visit. A bookmarklet only has the page you clicked it on. The trade-off is that a site's security settings can block a bookmarklet in some browsers, Firefox in particular; the limits above say more.

Does it work on localhost, staging and pages behind a login?

Yes, because it runs in the tab you already have open. Nothing is sent to a server, so GotAlt never needs to reach your page. That is the difference from our free scan, which fetches pages from the outside and so cannot see anything private.

Why does it say "check manually" for some text?

When text sits on a background image, a gradient, a picture, a video or an overlay drawn by another element, there is no single background colour to read from the page, and guessing would give false passes and false failures. Those elements are listed so you can test them yourself with the image contrast checker. The same goes for text beside a background fixed to the window, which passes behind it as you scroll; for text faded almost to nothing, which is usually caught half way through a fade-in; and for a page that sets no background colour when your browser shows it in a dark colour scheme, because the colour behind the text is then the browser's choice.

Why does the panel say "Advisory" for generic link text?

"Read more" can pass WCAG 2.4.4 when the sentence around it makes the purpose clear, so a machine cannot call it a failure. It is still worth a look: people who browse a list of links hear only the link text.

Does it work on a phone or tablet?

It is written for desktop browsers. Bookmarklets are fiddly to add on phones and tablets, and we have not tested it there.

What does the panel look like for people who use a keyboard or a screen reader?

It opens as a dialog with a name, moves focus into itself, closes with Escape and puts focus back where it was, and every button works from the keyboard. Results are announced through a live region, nothing relies on colour alone, and it keeps its own colours, so it reads the same on a light or a dark page. It is marked as English and laid out left to right whatever the page's language and direction, so a screen reader reads it in an English voice. The "Move to left" button gets it out of the way of what you are inspecting.

This checks one page, when you remember to click it

GotAlt re-checks the pages you choose every week, so a "read more" or a washed-out colour that slips in with a deploy does not go unnoticed.

Audit my whole site — from $69/mo