Omar SobhandClaude Opus 5
4358964c05
55 of 85 role skill bindings pointed at skills that were never authored,
so 10 of 11 team templates bound a smaller context bundle than their role
prompts assumed. Three roles bound nothing at all (gpu.bench_engineer,
threejs.shader_author, threejs.perf_engineer) while their prompts described
procedures they had no way to read.
The loader comment at team_template_loader.rs:167 already diagnosed this —
snake_case slugs in TOML against kebab-case skill files — and it was
half-fixed: the kebab names were corrected, the snake_case ones left.
It was invisible because both existing tests assert authored ⊆ referenced
(30/30, green) and the second explicitly declines to check the other
direction. So the failing half was the half nobody asserted.
Resolved every name by one of three explicit choices:
- 23 skills authored where the role genuinely needed the procedure
(gpu, threejs, research, analysis, frontend, mobile, backend, platform)
- renames onto authored skills where one existed in substance, including
the four-near-duplicate cases that collapse onto one real skill
- 22 aspirational references deleted — a binding an agent cannot read is
a promise, not a capability
Two tests now hold it. The unit test checks referenced ⊆ authored against
the files. The new integration test runs both loaders in boot order and
asserts the bindings survive the trip through the database, which is a
different question: resolution goes through skills_catalog rows, so a skill
file that exists but fails to ingest still leaves the role empty.
Negative controls: the unit test failed naming all 55; the integration test
fails naming the exact role when one name is reverted.
threejs.shader_author and .perf_engineer gained a second and third skill
after the collapse — pin_in_context pins idx < 2, so a role left with one
skill silently pins less than the policy intends.
Co-Authored-By: Claude Opus 5 <[email protected]>
52 lines
2.3 KiB
Markdown
52 lines
2.3 KiB
Markdown
---
|
|
name: a11y-checklist
|
|
description: The accessibility checks that catch most real failures, and the ones automated tools cannot make for you.
|
|
when_to_use: You are designing or testing a UI component or screen.
|
|
tags: [frontend, accessibility]
|
|
---
|
|
|
|
# Automated checks find about a third
|
|
|
|
Run axe, then do the four manual checks it cannot do. A clean axe report on an
|
|
unusable interface is the normal outcome, not a rare one.
|
|
|
|
## The four manual checks
|
|
|
|
1. **Tab through it.** Every interactive element reachable, in a sensible order,
|
|
with a visible focus ring. If focus disappears into an offscreen element or a
|
|
closed menu, the page is unusable by keyboard — the single most common real
|
|
failure.
|
|
2. **Operate it without a mouse.** Open the menu, pick an item, close it with
|
|
Escape. Dialogs trap focus while open and return it to the trigger on close.
|
|
3. **Zoom to 200%.** Text reflows, nothing is clipped, nothing overlaps. This is
|
|
also the fastest way to find fixed-height containers that will break on a
|
|
phone.
|
|
4. **Read it with a screen reader once.** VoiceOver on macOS, NVDA on Windows.
|
|
Five minutes on the main flow finds unlabelled buttons and images whose alt
|
|
text reads as a filename.
|
|
|
|
## What axe does catch
|
|
|
|
Colour contrast, missing form labels, missing alt attributes, ARIA misuse,
|
|
duplicate ids, heading-level jumps. Run it in CI — these regress constantly and
|
|
are cheap to fix at the point of change.
|
|
|
|
## The rules that prevent most issues
|
|
|
|
- **A button is a `<button>`.** A clickable `<div>` needs role, tabindex and
|
|
key handlers to be equivalent, and will get at least one of them wrong.
|
|
- **Every input has a `<label>`** with `for`, not just a placeholder. A
|
|
placeholder disappears on focus, which is when it was needed.
|
|
- **Never remove the focus outline without replacing it.** `outline: none` with
|
|
no substitute makes keyboard use impossible. Style it instead.
|
|
- **Icon-only buttons need an accessible name** — `aria-label`. Otherwise the
|
|
screen reader announces "button".
|
|
- **Don't announce with colour alone.** A red border with no text says nothing
|
|
to a colourblind user or a screen reader.
|
|
|
|
## Motion
|
|
|
|
Honour `prefers-reduced-motion`. Vestibular disorders are common and large
|
|
parallax or transform animations genuinely make people ill. One media query
|
|
disables the offending animations.
|