Accessibility
Every item names one accessibility contract: native HTML, a composition of native parts, a platform affordance, or exactly one WAI-ARIA Authoring Practices pattern. This page is generated from the registry. A passing check is evidence for the named route, browser, and run; it is never a claim of WCAG conformance or of what an assistive technology announces.
Sources and their status
| Source | Status | Use |
|---|---|---|
| WCAG 2.2 | Recommendation | Success criteria and the conformance model. A component result never becomes a page-level claim. |
| WAI-ARIA 1.2 | Recommendation | Roles, states, and properties when an authored widget uses ARIA. Native HTML stays preferred. |
| HTML Living Standard | Living Standard | Native controls, disclosure, dialogs, forms, focus, submission, and fallback behavior. |
| Accessible Name and Description Computation 1.2 | Working Draft | The name and description algorithm under review; the latest Recommendation remains the stable baseline. |
| HTML-AAM 1.0 | Working Draft | How HTML elements and attributes map to accessibility APIs. |
| Core-AAM 1.2 | Working Draft | How ARIA semantics and events map to platform APIs; expected exposure, not proof of it. |
| WAI-ARIA Authoring Practices Guide | Informative guidance | Pattern keyboard models and examples. An item applies at most one pattern, and matching it is not conformance. |
| W3C ACT Rules | Informative guidance | Reusable test logic; approved and proposed rules are both bounded checks. |
| ARIA-AT | Research | Results for one assistive technology and browser pairing; never generalized to all pairings. |
| Open UI | Research | Emerging component proposals; informs Lab experiments only. |
- Recommendation
- W3C Recommendation: a normative source within its conformance model.
- Living Standard
- The continuously maintained WHATWG HTML Standard: cite the section and review date.
- Working Draft
- A W3C draft, including a Candidate Recommendation Draft: useful for tracking, not a stable baseline.
- Informative guidance
- Guidance, examples, or testing material that interprets a normative source but defines no conformance.
- Research
- Interoperability evidence or an emerging proposal: never presented as a settled requirement.
When sources disagree
- Prefer native HTML semantics and behavior when the HTML Standard supplies the control.
- Use WCAG for conformance requirements, WAI-ARIA for an authored ARIA contract, and the AAM and AccName documents for expected exposure and naming.
- Apply one APG pattern only when a composite widget is actually implemented, with all of its roles, states, and keyboard behavior.
- Treat browser results as implementation evidence and ARIA-AT results as evidence for one pairing; neither overrides a normative requirement.
- When a draft or proposed rule disagrees with a Recommendation or the Living Standard, follow the stable source unless a Lab item records the experiment.
Contracts
NATIVE
- Keyboard and focus
- Use browser semantics and DOM order; preserve visible focus; do not add a composite arrow-key model.
- Names, relationships, and state
- Prefer labels, legends, headings, captions, for/id, and native states; every authored IDREF must resolve after a morph.
- Async and fallback
- Validation, pending, and errors are ordinary status content; native submission, links, and authored content remain useful without enhancement.
COMPOSE
- Keyboard and focus
- Operate every link, button, form control, and disclosure in logical DOM order; no hidden focus trap.
- Names, relationships, and state
- Use landmark, heading, list, table, image, and form relationships supplied by HTML; do not add a widget role to a composition.
- Async and fallback
- Classify updates as status, alert, log, feed, or dialog before adding live semantics; server HTML is the fallback.
DISCLOSURE
- Keyboard and focus
- Native details/summary or a native popover trigger must open, close, and remain keyboard reachable; focus stays predictable.
- Names, relationships, and state
- The trigger names the revealed content; aria-expanded/aria-controls are only authored when their values stay synchronized.
- Async and fallback
- Dynamic content must not steal focus; expanded content and its links remain available without JavaScript. A hover card is not a tooltip.
DIALOG
- Keyboard and focus
- Prefer native dialog, method="dialog", Escape behavior, visible initial focus, and focus restoration to the invoking control.
- Names, relationships, and state
- Every dialog has a stable aria-labelledby or an equivalent native name; descriptions and controls use local, durable IDs.
- Async and fallback
- Routine updates do not steal focus; nested/reconnected dialogs restore the correct trigger; link/form or in-flow fallback remains usable.
ALERTDIALOG · APG alertdialog pattern
- Keyboard and focus
- Apply the APG alertdialog pattern only for an urgent decision that requires response; define initial focus and return focus.
- Names, relationships, and state
- aria-labelledby and aria-describedby must identify the title and complete warning; actions and disabled states must be discoverable.
- Async and fallback
- It is not a general status channel. Do not open or move focus for routine updates; preserve a native dialog or in-flow recovery path.
TABS · APG tabs pattern
- Keyboard and focus
- Apply APG Tabs: one tab in the tab sequence, Arrow/Home/End movement, and an explicit automatic/manual activation choice.
- Names, relationships, and state
- aria-controls, aria-selected, role="tabpanel", and aria-labelledby must remain a valid local graph. Keep focus and selection visibly distinct.
- Async and fallback
- Do not make network latency follow focus implicitly; refresh/morph must retain or safely recover the active tab. Links, buttons, and panels remain authored fallbacks.
COMBO · APG combobox pattern
- Keyboard and focus
- Apply APG Combobox: input remains the focus owner when using aria-activedescendant, with documented Down/Up/Enter/Escape behavior.
- Names, relationships, and state
- The input has a name, aria-expanded, aria-controls, and a valid active option ID. Options are flat and the active option is scrolled into view.
- Async and fallback
- Async results expose concise status/error text without announcing every keystroke; stale results, empty results, reconnect, and typed-value submission remain safe.
CAROUSEL · APG carousel pattern
- Keyboard and focus
- Apply APG Carousel: labelled controls, predictable slide focus, and pause/stop behavior for rotation.
- Names, relationships, and state
- Label the carousel and slides; distinguish selected slide from focus; status text must not duplicate every visible caption.
- Async and fallback
- Auto-rotation must respect reduced motion and pause on focus/hover; every image or destination remains available as a link without enhancement.
SPLITTER · APG windowsplitter pattern
- Keyboard and focus
- Apply the APG Window Splitter only as experimental guidance: separator focus, Arrow/Home/End/Enter, and a bounded value model.
- Names, relationships, and state
- The separator needs a name, aria-controls, orientation, and truthful value properties; both pane IDs must remain valid.
- Async and fallback
- Marked Lab because APG review/example work is incomplete. Pointer cancellation, reconnect, and a stacked no-JavaScript layout are required.
LIVE
- Keyboard and focus
- Do not move focus to announce routine work; keep dismiss/retry controls keyboard reachable.
- Names, relationships, and state
- Choose status, alert, log, or aria-live deliberately; label regions and keep aria-busy transitions truthful.
- Async and fallback
- Test insert/replace/remove, success/error/cancel/reconnect, races, duplicate patches, and nested overlays separately from human announcement evidence.
POINTER
- Keyboard and focus
- Pointer or drag input must have a keyboard/non-drag alternative; visible focus and logical DOM order survive cancellation.
- Names, relationships, and state
- Name the operation and expose its result in text/status; do not require a pointer-only affordance.
- Async and fallback
- Cover pointercancel, interrupted/disconnected state, retry, and authored fallback. Native drag mechanics are not AT evidence.
MEDIA
- Keyboard and focus
- Use native media/link controls; any custom control must have a native equivalent and a visible focus indicator.
- Names, relationships, and state
- Provide meaningful title/alt/caption/description relationships; decorative marks stay hidden.
- Async and fallback
- Reduced-motion behavior, loading/error/status, and link/image fallback remain explicit; do not infer screen-reader controls from DOM alone.
PLATFORM
- Keyboard and focus
- This is a native platform or layout affordance, not a composite widget; do not invent an APG keyboard model.
- Names, relationships, and state
- Preserve semantic source order, headings, landmarks, and native names.
- Async and fallback
- Capability differences are recorded by browser tests; content and ordinary links/forms remain the fallback.
EXTERNAL
- Keyboard and focus
- No behavior is implemented here. The integrating product must define keyboard and focus behavior.
- Names, relationships, and state
- The integrating product owns the native/APG mapping, names, relationships, and states.
- Async and fallback
- No local fallback or AT evidence is implied by a roadmap record.
WCAG 2.2 acceptance criteria
Components are accepted against these success criteria from the WCAG 2.2 Recommendation, each checked as shown.
| Criterion | Level | Checked by |
|---|---|---|
| 1.3.1 Info and Relationships | A | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
| 1.3.2 Meaningful Sequence | A | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 1.4.10 Reflow | AA | Browser suite: keeps required content operable at narrow, localized, and text-spacing stress |
| 1.4.11 Non-text Contrast | AA | The theme contrast table measures focus, border, and data colours at 3:1 against the surface in every theme. |
| 1.4.12 Text Spacing | AA | Browser suite: keeps required content operable at narrow, localized, and text-spacing stress |
| 1.4.13 Content on Hover or Focus | AA | Browser suite: keeps overlays dismissible, pointer cancellation observable, and drag alternatives available |
| 2.1.1 Keyboard | A | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 2.1.2 No Keyboard Trap | A | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 2.1.4 Character Key Shortcuts | A | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 2.4.3 Focus Order | A | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 2.4.7 Focus Visible | AA | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Browser suite: keeps sticky surfaces from obscuring the focused target |
| 2.4.13 Focus Appearance | AAA | Browser suite: walks keyboard order, exposes visible focus, and has no character shortcut |
| 2.5.2 Pointer Cancellation | A | Browser suite: keeps overlays dismissible, pointer cancellation observable, and drag alternatives available |
| 2.5.3 Label in Name | A | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
| 2.5.7 Dragging Movements | AA | Browser suite: keeps overlays dismissible, pointer cancellation observable, and drag alternatives available |
| 2.5.8 Target Size (Minimum) | AA | Manual review: control sizing follows --thin-density-control, which no automated check measures yet. |
| 3.3.1 Error Identification | A | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
| 3.3.2 Labels or Instructions | A | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
| 3.3.3 Error Suggestion | AA | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
| 4.1.2 Name, Role, Value | A | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
| 4.1.3 Status Messages | AA | Browser suite: exposes relationships, names, labels, errors, and non-color state signals |
Items by category
Foundations
| Item | Contract | Basis |
|---|---|---|
| Reset (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Semantic base (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Neutral theme (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Thin-Sky theme (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Curated themes (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Fluid type (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Fluid space (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Typography (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Icons (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Motion (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Accessibility modes (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Design tokens (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| View-transition pack (preview) | PLATFORM | Native View Transition API; no APG widget |
| Data-visualization color roles (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
Layouts
| Item | Contract | Basis |
|---|---|---|
| Stack (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Cluster (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Grid (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Center (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Box (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Flow (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Icon layout (stable) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Breakout (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Container (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Cover (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Frame (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Overlay (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Reel (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Sidebar (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Switcher (preview) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
| Page shell (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Region rhythm (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Sticky sidebar (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Bento (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Dashboard shell (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Imposter (preview) | PLATFORM | Native DOM/source order with positioned layout; no APG widget |
| Anchored placement (preview) | PLATFORM | Native DOM/source order with positioned layout; no APG widget |
| Split (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Media object (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Product grid (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Gallery layout (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Masonry guidance (lab) | PLATFORM | Native CSS layout and document defaults over semantic HTML; no APG widget |
Forms and controls
| Item | Contract | Basis |
|---|---|---|
| Button (stable) | NATIVE | Native <button> or <a href>; no APG widget |
| Field (stable) | NATIVE | Native <label> and form control; no APG widget |
| Field validation enhancement (preview) | NATIVE | Native constraint validation with an optional Light-DOM enhancement; no APG widget |
| Text input (stable) | NATIVE | Native <input>, <select>, and <textarea>; no APG widget |
| Select (stable) | NATIVE | Native <input>, <select>, and <textarea>; no APG widget |
| Textarea (stable) | NATIVE | Native <input>, <select>, and <textarea>; no APG widget |
| Autogrow textarea (preview) | NATIVE | Native <textarea> with bounded enhancement; no APG widget |
| Range input (preview) | NATIVE | Native <input type="range"> and <input type="file">; no APG widget |
| File input (preview) | NATIVE | Native <input type="range"> and <input type="file">; no APG widget |
| Checkbox (stable) | NATIVE | Native checkbox and <fieldset>/<legend> radio controls; no APG widget |
| Radio group (stable) | NATIVE | Native checkbox and <fieldset>/<legend> radio controls; no APG widget |
| Switch (stable) | NATIVE | Prefer a native checkbox. The current role="switch" authoring is an explicit APG Switch promise; its native keyboard, form, and disabled behavior remain the implementation baseline. |
| Drag-and-drop file uploader (preview) | POINTER | Native multipart form and file input; drag/drop is a bounded enhancement, not an APG widget |
| OTP input (lab) | NATIVE | Native text/tel input with input method hints; no segmented-widget APG claim |
| Input mask (lab) | NATIVE | Native text/tel input with input method hints; no segmented-widget APG claim |
| Quantity input (preview) | NATIVE | Native number input plus labelled native buttons; no APG widget |
| Rating (preview) | NATIVE | Native fieldset and radio group; no custom rating role |
| Date and time input guidance (preview) | NATIVE | Native date/time inputs and select; no APG widget |
| Calendar (lab) | NATIVE | Native date input and links/disclosure; no APG Grid claim while the fixture remains a link-based calendar |
| Form validation (preview) | LIVE | Native form constraint validation plus authored summary/status; no APG widget |
| Multi-step form (preview) | COMPOSE | Native navigation links, form, and submit controls; no APG widget |
| Combobox and autocomplete (preview) | COMBO | APG Combobox with a flat listbox popup; current implementation uses aria-activedescendant |
| Searchable multi-select (preview) | NATIVE | Native search input and checkbox group; deliberately not a listbox because options are controls and must not be nested in a listbox |
Disclosure and overlays
| Item | Contract | Basis |
|---|---|---|
| Dialog (stable) | DIALOG | Native <dialog>; APG dialog guidance is secondary to native behavior |
| Alert dialog (preview) | ALERTDIALOG | APG Alertdialog on a native dialog host |
| Confirm dialog (preview) | DIALOG | Native <dialog> and form method="dialog"; no extra composite role |
| Sheet (preview) | DIALOG | Native <dialog> with an explicitly chosen modal/non-modal boundary; no drawer-specific APG role |
| Slide-over (preview) | DIALOG | Native <dialog> with an explicitly chosen modal/non-modal boundary; no drawer-specific APG role |
| Drawer (preview) | DIALOG | Native <dialog> with an explicitly chosen modal/non-modal boundary; no drawer-specific APG role |
| Hover card (preview) | DISCLOSURE | Native popover/non-modal dialog composition; explicitly not the APG Tooltip pattern |
| Context menu (preview) | DISCLOSURE | Native <details>, navigation links, and form controls; no menu/menuitem claim in the current fixture |
| Command palette (preview) | DIALOG | Native <dialog> with a search form and ordinary result links; no menu/listbox claim |
| Search result list (preview) | LIVE | Native labelled list/links with a polite status; no listbox claim |
| Resizable panels (lab) | SPLITTER | APG Window Splitter as an explicitly experimental mapping; APG review/example work is incomplete |
| Keyboard and pointer reorder primitive (lab) | POINTER | Native list with HTML drag/drop enhancement and Alt+Arrow keyboard alternative; no APG composite claim |
Feedback and content
| Item | Contract | Basis |
|---|---|---|
| Card (stable) | NATIVE | Styles native HTML elements; no APG widget |
| Badge (stable) | NATIVE | Styles native HTML elements; no APG widget |
| Alert (stable) | LIVE | Native in-flow message; use the APG Alert contract only when an immediately relevant message is dynamically inserted |
| Toast (stable) | LIVE | Native labelled region and authored live mode; no toast-specific APG widget |
| Toast region (stable) | LIVE | Native labelled region and authored live mode; no toast-specific APG widget |
| Prose (stable) | COMPOSE | Native document content and table/scroll region; no APG widget |
| Responsive table (preview) | COMPOSE | Native document content and table/scroll region; no APG widget |
| Data table (preview) | NATIVE | Native captioned <table>; do not assign APG Grid while navigation remains ordinary table navigation |
| SVG chart primitives (preview) | COMPOSE | Native figure, SVG title/description, visible summary, and equivalent table; no APG Grid claim |
| Interactive charts (preview) | COMPOSE | Native figure, SVG title/description, visible summary, and equivalent table; no APG Grid claim |
| Stats (preview) | COMPOSE | Native headings, lists, time, and table/content relationships; no APG widget |
| Steps (preview) | COMPOSE | Native headings, lists, time, and table/content relationships; no APG widget |
| Timeline (preview) | COMPOSE | Native headings, lists, time, and table/content relationships; no APG widget |
| Compare and diff (preview) | COMPOSE | Native headings, lists, time, and table/content relationships; no APG widget |
| Video and lite embed (preview) | MEDIA | Native media or a native link fallback; no custom media role |
| Carousel (preview) | CAROUSEL | APG Carousel with native links and labelled controls |
| Product gallery (preview) | CAROUSEL | APG Carousel for slide selection, with native image links as fallback |
| Lightbox (preview) | DIALOG | Native <dialog> and image/link fallback; no lightbox-specific APG role |
| Logo reel (preview) | MEDIA | Native horizontal scroll container, links, and buttons; no APG carousel claim |
| Spinner (preview) | NATIVE | Styles native HTML elements; no APG widget |
| Keyboard key (preview) | NATIVE | Native <kbd> and non-focusable separator; a focusable separator must move to the experimental splitter contract |
| Separator (preview) | NATIVE | Native <kbd> and non-focusable separator; a focusable separator must move to the experimental splitter contract |
| Status (preview) | NATIVE | Styles native HTML elements; no APG widget |
| Progress and meter (preview) | NATIVE | Native <progress> and <meter>; no APG widget |
| Skeleton (preview) | NATIVE | Styles native HTML elements; no APG widget |
| Empty state (preview) | NATIVE | Styles native HTML elements; no APG widget |
| Avatar (preview) | NATIVE | Styles native HTML elements; no APG widget |
| Table (preview) | NATIVE | Native <table> with caption and header scope; no APG widget |
| Map integration (lab) | EXTERNAL | External integration boundary; no current local widget implementation or APG mapping |
| Rich editor integration (lab) | EXTERNAL | External integration boundary; no current local widget implementation or APG mapping |
| Spreadsheet integration (lab) | EXTERNAL | External integration boundary; no current local widget implementation or APG mapping |
| Enterprise grid integration (lab) | EXTERNAL | External integration boundary; no current local widget implementation or APG mapping |
Ecommerce patterns
| Item | Contract | Basis |
|---|---|---|
| Product card (stable) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Product detail (preview) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Collection (preview) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Product filters (preview) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Product sorting (preview) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Product recommendations (preview) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Empty results (preview) | COMPOSE | Native links, headings, forms, lists, and status content; no product-specific APG widget |
| Mini-cart drawer (preview) | DIALOG | Native labelled <dialog> and form/link controls; no drawer-specific APG role |
| Cart (preview) | COMPOSE | Native forms, tables/lists, headings, links, and status content; no APG widget |
| Checkout (preview) | COMPOSE | Native forms, tables/lists, headings, links, and status content; no APG widget |
| Discounts (preview) | COMPOSE | Native forms, tables/lists, headings, links, and status content; no APG widget |
| Availability (preview) | COMPOSE | Native forms, tables/lists, headings, links, and status content; no APG widget |
| Order status (preview) | COMPOSE | Native forms, tables/lists, headings, links, and status content; no APG widget |
Application recipes
| Item | Contract | Basis |
|---|---|---|
| Filtered data view (preview) | LIVE | Native GET form, select controls, result list, links, and polite status |
| CRUD list (preview) | COMPOSE | Native links, forms, headings, lists, and buttons; no client grid/widget role |
| CRUD detail (preview) | COMPOSE | Native links, forms, headings, lists, and buttons; no client grid/widget role |
| CRUD edit (preview) | COMPOSE | Native links, forms, headings, lists, and buttons; no client grid/widget role |
| Inline editing (preview) | COMPOSE | Native links, forms, headings, lists, and buttons; no client grid/widget role |
| Authentication flows (preview) | NATIVE | Native labelled forms, inputs, checkboxes, selects, and recovery links |
| Settings and preferences (preview) | NATIVE | Native labelled forms, inputs, checkboxes, selects, and recovery links |
| Dashboard (preview) | LIVE | Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update |
| Bulk actions (preview) | LIVE | Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update |
| Uploads (preview) | LIVE | Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update |
| Notifications (preview) | LIVE | Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update |
| Command workflows (preview) | LIVE | Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update |
| Realtime jobs (preview) | LIVE | Native forms, links, file inputs, status regions, and action buttons; async semantics must be chosen per update |
| Chat (lab) | LIVE | Native labelled list and form with status/error content; not an APG Feed claim until feed loading, article relationships, and focus/scroll rules exist |
| Messages (lab) | LIVE | Native labelled list and form with status/error content; not an APG Feed claim until feed loading, article relationships, and focus/scroll rules exist |
Navigation
| Item | Contract | Basis |
|---|---|---|
| Breadcrumbs (stable) | NATIVE | Native <nav>, lists, and links; no APG widget |
| Pagination (stable) | NATIVE | Native <nav>, lists, and links; no APG widget |
| Tabs (stable) | TABS | APG Tabs with deliberate roving tabindex and automatic/manual activation |
| Table of contents (stable) | DISCLOSURE | Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup |
| Site header (stable) | DISCLOSURE | Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup |
| Navigation menu (preview) | DISCLOSURE | Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup |
| Mega menu (preview) | DISCLOSURE | Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup |
| Menubar (lab) | MENUBAR | APG Menu and Menubar for the genuine desktop command composite; explicitly Lab |
| Application sidebar (stable) | NATIVE | Native labelled navigation and links; disclosure or dialog behavior must be explicit when added |
| Bottom navigation (stable) | NATIVE | Native labelled navigation and links; disclosure or dialog behavior must be explicit when added |
| Dock navigation (stable) | NATIVE | Native labelled navigation and links; disclosure or dialog behavior must be explicit when added |
| Full-screen menu (stable) | NATIVE | Native labelled navigation and links; disclosure or dialog behavior must be explicit when added |
Content recipes
| Item | Contract | Basis |
|---|---|---|
| Editorial article (preview) | COMPOSE | Native article, headings, time, links, and ordered content; no APG widget |
| Archive index (preview) | COMPOSE | Native article, headings, time, links, and ordered content; no APG widget |
Marketing patterns
| Item | Contract | Basis |
|---|---|---|
| Search and results (preview) | LIVE | Native search/poll forms, labelled results, links, radio controls, and status |
| Poll form (preview) | LIVE | Native search/poll forms, labelled results, links, radio controls, and status |
| Hero (stable) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Logo cloud (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Feature grid (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Stats pattern (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Testimonial (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Call to action (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Site footer (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Pricing (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| FAQ (preview) | DISCLOSURE | Native <details>/<summary>; APG Disclosure is guidance only if the native disclosure is replaced |
| Newsletter (preview) | NATIVE | Native labelled forms, inputs, fieldsets, and submit controls; no APG widget |
| Content section (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Announcement (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Team (preview) | COMPOSE | Composition of native landmarks, headings, lists, links, and forms; no APG widget |
| Contact (preview) | NATIVE | Native labelled forms, inputs, fieldsets, and submit controls; no APG widget |
What a result may claim
- Source, unit tests, fixture contracts, and named Axe or ACT checks
- That the fixture preserves native semantics, that the named test passed, or that Axe reported no findings for its selected rules on that route and commit.
- A browser run with named browser, version, OS, viewport, input mode, and media settings
- That the keyboard path, fallback, or layout was observed in that browser at that viewport, or that a capability was partial or unsupported in that run.
- A human assistive-technology session with named AT, browser, OS, route, settings, steps, and result
- That the route was observed to behave as described in that exact pairing and session.
- A complete conformance evaluation
- Only a scoped claim naming the evaluated content, WCAG version and level, the technologies relied on, the date, and its limitations.
An Axe pass, an APG pattern match, or a Playwright keyboard pass is never a screen-reader result or a conformance evaluation. Repository checks do not cover consumer-authored names, translated content, server errors, or third-party content.
Search landmarks
Use the native <search> element, with a distinct name, when the task is to find a site, application, document, or command. Keep only the controls inside it and the results outside. A form that filters, sorts, or narrows the current view, such as a filtered view or a data table query, stays an ordinary form. Do not add role="search" inside <search>.
Review questions for each item
- Keyboard interaction
- Are all operations reachable with the keyboard, including the documented Arrow, Home, End, Escape, and Enter model for composites?
- Visible focus
- Can the user see focus at every transition, including after a morph, reconnect, close, cancel, or removed target?
- Focus restoration
- Does focus return to the invoking control or the next logical item after overlays, deletion, replacement, and async completion?
- Focus versus selection
- Are DOM focus, aria-selected, checked state, active descendant, and visual selection distinct and predictable?
- Pointer and keyboard parity
- Does pointer, drag, resize, hover, or touch input have an equivalent keyboard or non-pointer path?
- Disabled state
- Are disabled controls omitted or kept focusable deliberately, with a truthful state?
- Logical order
- Does source order match reading order, tab order, and the fallback presentation?
- Names and descriptions
- Are visible labels, aria-label, aria-labelledby, and aria-describedby chosen by the native and AccName rules?
- Relationships
- Do for/id, aria-controls, aria-labelledby, aria-describedby, and aria-activedescendant resolve after mutation?
- State properties
- Are aria-expanded, aria-selected, aria-current, aria-busy, and aria-live present only when their behavior is implemented and synchronized?
- Async classification
- Is each update a status, alert, log, feed update, or dialog, with no routine focus theft?
- Fallback
- Does native HTML, server markup, or the authored link or form stay useful without enhancement?