Accessibility Pass
Catches the accessibility failures generated interfaces produce almost every time.
When to reach for it
Before shipping any generated interface — the markup usually looks right and fails the moment someone uses a keyboard.
What changes
- A tab-order walk listing every interactive element, whether its focus state is visible, and whether the order matches the visual layout.
- Every icon-only control and every input is listed with its accessible name, or flagged as having none.
- Contrast is reported as a measured ratio per text style — including placeholder, disabled, and the focus ring — not judged by eye.
- Dialogs and menus are checked for focus entering, Escape closing, focus returning, and the background being inert.
Pairs with
- Taste CheckReviews generated interface against design criteria you can count, instead of "looks fine".
- Read Your Own DiffMakes the agent review the change as a stranger would, before it tells you the work is done.
- Spot the SlopNames the specific tells of generic machine-made code and design, so you can delete them.
Accessibility Pass
Generated interfaces fail in a predictable set of places. Walk them in order and report findings as element, rule, fix.
1. Walk the keyboard path
Tab from the top. Record every stop. Check that every interactive element is reachable, that focus is clearly visible at each one, that the order follows the visual order, and that nothing traps focus. Then check the controls respond to Enter and Space as their type implies.
2. Check the semantics
A div with a click handler is not a button. Look for real button, anchor, label, fieldset, and list elements. Confirm exactly one h1, headings that descend without skipping, and lists marked up as lists. An anchor that navigates nothing and a button that navigates are both defects.
3. Check every control has a name
Icon-only buttons need a real accessible name, not a title attribute. Inputs need a label element associated by id — a placeholder is not a label and disappears when typing starts. Images need alt text, and decorative ones need empty alt.
4. Check state is exposed, not just drawn
Expanded, selected, current, invalid, busy, and disabled must be communicated in the markup, not only in the styling. Error messages must be associated with their field and announced, not merely coloured red.
5. Measure contrast
Measure, do not eyeball: body text, small text, placeholder text, disabled text, icons that carry meaning, and the focus indicator — each against the background it actually sits on.
6. Check motion and timing
Honour reduced-motion preferences. No content that autoplays or loops indefinitely without a control. No message that disappears before it can be read, and no timeout the user cannot extend.
7. Check overlays
For dialogs, menus, and popovers: focus moves in on open, Escape closes, focus returns to the trigger, and the rest of the page is inert while it is open.
8. Check the leftovers
Colour is never the only signal. Targets are large enough to hit. Layout survives 200% zoom without losing content. The page declares its language.
Rules
- Do not put an aria-label on a div to make it act like a button. Use the button element.
- Do not remove focus outlines. Replace them with something more visible if the default is ugly.
- Do not use a placeholder as a label.
- Do not add a role that duplicates a native element's own role.
- Do not report a pass from a linter alone. Linters catch missing alt attributes; the keyboard walk catches the failures that matter.