Accessibility Tools

Accessibility work is mostly small, checkable details: does the focus ring show, does the icon button have a name, is the tap target big enough, can a keyboard reach everything. These tools let you check or generate each of those in the browser, by pasting markup, dropping an image or filling in a short form, with nothing sent anywhere.

Every Accessibility tool

ARIA Attribute Builder

Generate the right role and aria attributes for any common widget.

ARIA Label Generator

Write clear aria-label text for icon buttons, links and unlabelled inputs.

Alt Text Helper

Compose the right alt attribute for decorative, informative and functional images.

Colour Blindness Simulator

View any image through protanopia, deuteranopia, tritanopia or achromatopsia.

Focus Indicator Generator

Build a visible, WCAG-friendly focus ring and copy the :focus-visible CSS.

Keyboard Navigation Tester

Audit HTML for controls that keyboard users cannot reach, operate or see.

Skip Link Generator

Generate a skip-to-content link that appears on focus, with HTML and CSS.

Tab Order Tester

List every Tab stop in your HTML in order and flag focus order problems.

Touch Target Checker

Check a control's size and spacing against WCAG, Apple and Android minimums.

Seeing what others see

The colour blindness simulator re-renders a dropped image as someone with protanopia, deuteranopia, tritanopia or achromatopsia would see it, so you can tell whether a chart still reads when red and green collapse into one hue. Pair it with the contrast checker in the CSS section, which handles text against background.

Focus and skip links

Keyboard users depend on a visible focus indicator and a way to get past repeated navigation. The focus indicator generator writes a :focus-visible rule with the outline, offset and colour you choose and shows it on real controls; the skip link generator produces the link and the CSS that keeps it out of the way until it receives focus.

Names and descriptions

Screen readers need a name for every control and a description for every meaningful image. The ARIA attribute builder assembles the correct role and state attributes for a widget and warns about combinations that do nothing. The ARIA label generator writes an accessible name for icon buttons, links and inputs from the action and object. The alt text helper turns a plain description and the image's purpose into an alt attribute, or an empty one when the image is decorative, and checks common mistakes.

Keyboard reach

Paste a page fragment into the tab order tester to list every focusable element in the order the Tab key will visit it, with positive tabindex values and hidden-but-focusable elements flagged. The keyboard navigation tester looks for the patterns that lock keyboard users out: click handlers on plain divs, links without an href, controls with no accessible name, and elements removed from the tab sequence.

Touch targets

WCAG 2.2 asks for targets of at least 24 by 24 CSS pixels, and platform guidelines ask for 44 or 48. The touch target checker draws a control at your dimensions and spacing at true size on screen and reports which of those thresholds it passes.

Privacy

Everything here runs in the page. Markup, images and text you paste are parsed and rendered by your own browser, and nothing is uploaded or stored.