Intopia's accessibility testing bookmarklets

A bookmarklet is a web browser bookmark with JavaScript commands that add new features. These small JavaScript snippets are stored as a bookmark URL and executed when clicked.

To use them:

Drag a bookmarklet to your browser's Bookmarks Bar.
Open the web page you want to inspect.
Click the bookmarklet.
Press Esc to remove the overlay.

Page structure
Bookmarklet	Test page
Highlight headings Highlights all heading levels (H1–H6) with distinct colours. Flags empty headings and duplicate `<h1>` elements.	Testing headings
Highlight image alternatives Highlights all images. Distinguishes between meaningful `alt` text, empty `alt` and missing `alt`.	Testing images
Highlight links Highlights all links on the page. Resolves the accessible name from any source (text content, `aria-label`, `aria-labelledby`). Flags duplicate names pointing to different URLs, links named by `title` only, `title` attribute mismatches, empty `href` and missing `href`. Click to activate, Esc to clear.	Testing links
Highlight lists Highlights native list elements and ARIA list roles with distinct colours per type.	Reviewing lists
Highlight landmarks Highlights all landmark regions with distinct colours per role. Shows accessible name where present.	Reviewing landmarks

Document title, language, encoding
Bookmarklet	Test page
Highlight page language Highlights the page language defined on the `<html>` element. Validates the lang value against BCP 47 and flags missing, empty or unrecognised language codes. Also highlights inline lang attributes on page elements.	Testing `lang` good Testing `lang` invalid testing `lang` missing
Highlight document title Displays the document title from the `<title>` element as a fixed banner at the top of the page. Flags missing titles, empty titles, and pages with more than one `<title>` element. Click to activate, Esc to clear.	Testing document title - good example Testing document title - missing example Testing document title - empty example Testing document title - multiple example
Highlight page encoding Displays the character encoding declaration as a fixed banner at the top of the page. Detects both `<meta charset>` and `http-equiv Content-Type` forms. Flags missing, empty and non-UTF-8 declarations, conflicting declarations and charset outside `<head>`. Click to activate, Esc to clear.	Testing character encoding - good example Testing character encoding - missing example Testing character encoding - invalid example Testing character encoding - empty example Testing character encoding - conflicting example

Tables
Bookmarklet	Test page
Highlight captions and headers Highlights accessibility features within tables. Flags header cells with and without `scope`, and tables missing a `<caption>`. Click to activate, then press `1` through `3` in order to step through `<table>`, `<caption>` and `<th>` elements individually. Press `n` to step through each element type in sequence.	Testing tables
Highlight table id and headers Highlights the relationship between headers and ids within complex tables. Click to activate, then press `TAB` or `n` to move through each cell. Related Headers and IDs are highlited.	Testing complex tables
Highlight ARIA table roles Highlights ARIA roles relating to tables. Click to activate, then press `1` through `6` in order to step through the role hierarchy from container to cell. Press `n` to step through each role type in sequence. Note: re-run the bookmarklet after sorting to see updated `aria-sort` values.	Testing ARIA tables

Focus and navigation
Bookmarklet	Test page
Track focus order Tracks each focusable element on the page. Click to activate, then `TAB` through the page. Each element is numbered in order. `ESC` to stop.	Testing focus order
Highlight tabindex Highlights all `tabindex` attributes. Distinguishes between `tabindex="0"` (in natural tab order), `tabindex="-1"` (removed from tab order) and positive values (avoid — overrides natural tab order).	Reviewing different tabindex methods

Names and descriptions
Bookmarklet	Test page

Highlight accessible names Shows the accessible name of each focusable element and which source it came from. Click to activate, then `TAB` through the page. One badge at a time, on the element that has focus. Source precedence, highest first: `aria-labelledby`, `aria-label`, `label` or implicit label, content, `value`, `alt`, default (Submit / Reset), `title`, `placeholder`. Names from `title` and `placeholder` are flagged as unreliable. Content includes image `alt`, so icon buttons and logo links resolve. Note: this is a simplified name computation, not the browser's accessibility tree. `ESC` to stop.	Testing accessible names
Highlight aria-label Highlights all elements with `aria-label`. Flags empty values and use on roles where author-provided names are prohibited.	Testing aria-label
Highlight aria-labelledby Highlights elements with `aria-labelledby` and their targets. Flags missing, hidden and self-referencing IDs.	Reviewing aria-labelledby
Highlight aria-describedby Highlights elements with `aria-describedby` and their targets. Flags missing, hidden and self-referencing IDs.	Testing aria-describedby
Highlight name mismatches Highlights links and buttons where the visible label and accessible name don’t match.	Testing name mismatches
Highlight name-prohibited roles Highlights elements with `aria-label` or `aria-labelledby` on roles that must not have an author-provided name.	Testing name-prohibited roles

Forms
Bookmarklet	Test page
Highlight form field names Highlights form fields and their accessible names. Flags fields with no name, and fields where the name comes from an unreliable source such as `placeholder` or `title`.	Testing form labels
Highlight buttons Highlights all buttons and their accessible names. Flags buttons with no accessible name.	Testing buttons
Highlight fieldsets Highlights `<fieldset>`, `<legend>` and `radiogroup` elements. Flags `<fieldset>` elements missing a `<legend>`.	Testing fieldsets
Highlight required fields Highlights required form fields. Distinguishes between native `required`, `aria-required`, and redundant combinations.	Testing required fields
Highlight aria-invalid Highlights all `aria-invalid` states: `true`, `grammar`, `spelling` and `false`.	Testing aria-invalid
Highlight autocomplete Highlights `autocomplete` attributes. Flags valid, generic and invalid values with distinct colours.	Testing autocomplete

States
Bookmarklet	Test page
Highlight aria-expanded Highlights all `aria-expanded` attributes. Distinguishes between `true` (expanded) and `false` (collapsed) states. Re-run after activating a widget to see updated values.	testing aria-expanded
Highlight aria-checked Highlights all `aria-checked` attributes on custom widgets. Distinguishes between `true`, `false` and `mixed` states. Re-run after interacting with a widget to see updated values.	Testing aria-checked

Advanced
Bookmarklet	Test page
Highlight aria-roledescription Highlights all elements with `aria-roledescription`. Shows the custom role description value. Flags empty values and elements where aria-roledescription has been applied without an underlying role, which is a misuse of the attribute.	Testing aria-roledescription
Highlight aria-details Highlights all elements with `aria-details` and their referenced targets. Shows whether each referenced element exists in the page. Flags missing IDs.	Testing aria-details
Highlight aria-valuenow Highlights all elements with `aria-valuenow`. Shows the current numeric value of a range widget such as a slider or spinbutton. Flags empty and non-numeric values.	Testing aria-valuenow
Highlight aria-valuetext Highlights all elements with `aria-valuetext`. Shows the text alternative value that assistive technologies announce instead of the numeric `aria-valuenow`. Flags empty values.	Testing aria-valuetext
Highlight aria-valuemin and aria-valuemax Highlights all elements with `aria-valuemin` and/or `aria-valuemax`. Shows both values together on each element. Flags incomplete pairs where only one attribute is present, and non-numeric values.	Testing aria-valuetext
Highlight aria-pressed Highlights all `aria-pressed` attributes on custom toggle buttons. Distinguishes between `true` (pressed), `false` (not pressed) and `mixed` states. Re-run after interacting with a widget to see updated values.	Testing aria-pressed
Highlight aria-level Highlights all elements with `aria-level`. Shows the level value on each element. Flags values above `6` where browser support is inconsistent, and invalid values such as zero, negative numbers and non-integers.	Testing aria-level
Highlight aria-setsize and aria-posinset Highlights all elements with `aria-setsize` and `aria-posinset`. Shows the position of each item within its sibling group. Where aria-level is also present, shows the level alongside the position. Flags incomplete pairs and non-numeric values.	Testing aria-setsize and aria-posinset
Highlight aria-haspopup Highlights all elements with `aria-haspopup`. All seven recognised values are displayed: `false`, `true`, `menu`, `listbox`, `tree`, `grid` and `dialog`. Flags empty and unrecognised values.	Testing aria-setsize and aria-posinset
Highlight aria-controls Highlights elements with `aria-controls` and their referenced targets. Shows whether each referenced element exists in the page. Flags missing and empty values. If the controlled element is initially hidden, re-run the bookmarklet after activating the trigger to see the highlighted relationship. Note: if the controlled element is inserted into the DOM dynamically on first activation, the bookmarklet will flag it as a missing ID until the element exists. Re-run after triggering to confirm the reference resolves correctly.	Testing aria-controls
Highlight readonly fields Highlights native readonly and aria-readonly for teaching purposes. Native readonly is browser-enforced and automatically announced correctly to AT, no ARIA needed. aria-readonly="true" alone only affects the AT announcement — it does not stop the user typing unless the field is functionally restricted some other way. Flags the redundant and conflicting combinations, and invalid values.	Testing aria-readonly
Highlight shadow DOM Highlights open shadow DOM hosts and custom elements. Flags where shadow DOM cannot be confirmed.	Testing shadow DOM

Colour contrast
Bookmarklet	Test page
ContrastChecker This bookmarklet allows you to check the contrast between two colours by either sampling the colours with an eyedropper or directly inputting values. The checker will automatically calculate the contrast ratio and give a pass or fail status for 3:1, 4.5:1 and 7:1. Created for and works best on Windows/Chrome. Features: Accepts HEX, HEXA, RGB, RGBA values Has a 'HEX:left_right_arrow:RGB' convert toggle for quick conversion Supports keyboard shortcuts for Eyedroppers, Reset, Convert, Copy, Toggle panel and Close With eyedropper keyboard shortcut, allows capture of elusive focus style and on hover elements Has a ‘Reset’ button to quickly reset the colour values Has a ‘Copy’ button to copy the colour values and contrast details onto the clipboard Has an expandable 'Explanation' section with links to the WCAG understanding docs Able to toggle between top and side panels Panel edges are resizable by dragging, keyboard, and onscreen buttons Multiple ways to close the bookmarklet (toggle off, click the ‘X' button or press ‘Esc’) Accessibility tested	Testing text contrast Testing non-text contrast