Accessibility guides for coding agents

Each guide is what an agent needs to build one thing right: a dialog, a form, a menu. Each comes with a working demo. Check a page below: we read its HTML and open it in a browser, then list the issues worst first, each with its WCAG success criterion and the guide that fixes it.

For agentsnpx -y github:vojtaholik/good-a11y search "modal dialog"Read the skill for the search, retrieve, build and check loop.

Guides

Content

Image alt text decisionsDecide alt text for images, decorative images, image links, logos, icons, charts and inline SVG
Status messages and toastsAnnounce toasts, snackbars, "added to cart" and save confirmations to screen readers with role status, aria-live and no focus move

Focus and keyboard

Visible focus stylesStyle a visible keyboard focus indicator with focus-visible and outline that is never removed or hidden under sticky headers

Forms

Form errors and validationShow accessible form validation errors with aria-invalid, aria-describedby, an error summary and focus on submit
Labels, required fields and hintsLabel form inputs, mark required fields and attach hint text with label, required, aria-describedby and autocomplete

Motion

Reduced motion and moving contentRespect prefers-reduced-motion in CSS and JavaScript animations, and give carousels and autoplay a pause control

Navigation

Skip link and landmarksAdd a skip to main content link and page landmarks (header, nav, main, footer) with correct labels and heading structure
Route change in single-page appsManage focus, page title and announcements on client-side route changes in a React, Vue or SPA router

Widgets

Combobox and autocompleteBuild an accessible autocomplete, typeahead, searchable picker (country, city) or search suggestions input with role combobox, listbox and aria-activedescendant
Custom select vs native selectStyle a dropdown select accessibly with native select, appearance base-select, or a select-only combobox when custom is required
Modal dialogBuild an accessible modal dialog or popup with focus trap, Escape to close and focus return
Disclosure and accordionBuild an accessible show/hide toggle, FAQ accordion or expandable section with aria-expanded
Icon-only buttonsGive icon-only buttons and SVG icon links an accessible name, toggle state with aria-pressed and a big enough target
Menu buttonBuild an accessible actions dropdown menu button with role menu, arrow keys and Escape, or a nav dropdown without it
TabsBuild accessible tabs with tablist, tab and tabpanel roles, roving tabindex and arrow key navigation