web-accessibility
Web accessibility
Accessibility here means two walks that every flow must survive: keyboard only, where every flow completes without a mouse, and a screen reader, where every control announces a name, a role and its state. The method and most rules come from Jakub Krehel's better-accessibility skill (jakubkrehel/skills), with accessibility facts from his better-interface, interface-review and break skills, Emil Kowalski's prototype, feel (diip3sh), transitions.dev and fluid-functionalism. Each fact is re-checked against the W3C pages it names: WCAG 2.2, its Understanding documents and the ARIA Authoring Practices Guide (APG). Where a source disagreed with those pages, the W3C form is written and the source's version is named once.
When unsure, take the platform default over a custom rebuild, and remove ARIA rather than add it. SVG names and roles are in svg ACCESSIBILITY.md; <dialog>, popover and inert mechanics are in modern-css POPOVER-AND-DIALOG.md; animation recipes under reduced motion are in ui-animation PERFORMANCE.md. The owner's product (app-ui) records four deliberate departures from this skill's defaults; each file names the one that touches it as an "app-ui does X instead" line.
Apply only the routes and checks for the selected job. Read a linked skill's named file from its installed folder when available, or from the linked source. Report an unavailable required reference instead of inventing it. [skill-authoring, DISTRIBUTION.md#composing-skills]
| The job | Read |
|---|---|
Focus rings, forced colors, focus not obscured, skip links, tabindex, roving tabindex, aria-activedescendant, dialogs, trapping and restoring focus, the APG key maps, Escape order, SPA route changes |
FOCUS-AND-KEYBOARD.md |
| The four rules of ARIA, button vs link vs div, landmarks, breadcrumbs, headings, page titles, page and passage language (3.1.1, 3.1.2), accessible names, Label in Name, common ARIA mistakes, disabled states, switch and tab states | SEMANTICS-AND-ARIA.md |
Labels, required fields, the error pattern, autocomplete tokens, type and inputmode, paste, redundant entry (3.3.7), accessible authentication (3.3.8), submit while pending |
FORMS.md |
Phone fields: type="tel", storing E.164 with its +, validating with libphonenumber, Israeli number ranges, the prefix is not the carrier |
PHONE-NUMBERS.md |
.sr-only, choosing how to announce a change, live regions, loading announcements, aria-hidden, alt text by purpose, video and audio |
SCREEN-READERS.md |
| Reduced motion, autoplay and Pause, Stop, Hide, toasts and timing, content on hover or focus, text resize, reflow, viewport zoom, contrast | MOTION-AND-ZOOM.md |
| Target size (2.5.8 and 2.5.5), the spacing exception, expanding hit areas, collisions, decorative layers, dragging and gesture alternatives | HIT-AREAS.md |
| Running a review: the two walks, criteria vs conventions, severity on P0 to P3, escalation triggers, verification, the report table, removed signals in a diff, the grep table | REVIEW.md |