Available now

• Tabs

  A tablist with arrow-key navigation and roving tabindex, so only the active tab is in the Tab order.

• Accordion & disclosure

  Show/hide regions toggled by a real button with aria-expanded tying control to content.

• Accessible data table

  Semantic table markup with scoped th headers and a caption so rows and columns are announced.

• Breadcrumb

  An ordered nav landmark labelled for assistive tech, with the current page marked aria-current.

• Form fields & validation

  Explicitly labelled inputs with errors wired via aria-describedby and announced through a live region.

• Code block with copy

  A copy button that confirms success without stealing focus, keeping the keyboard path uninterrupted.

Interactive patterns

Deep-dive pages with a live, keyboard-operable demo, copyable markup, a keyboard-interaction table and ARIA notes.

• Modal dialog

  A focus-trapped native <dialog> that returns focus to its trigger and closes on Escape.

• Combobox / autocomplete

  A text input paired with a filtered listbox, tracking the active option with aria-activedescendant as you type.

• Menu button

  An aria-haspopup button opening an actions menu navigable by arrow keys, Home and End.

• Tooltip

  A hover- and focus-triggered hint linked by aria-describedby that stays dismissible with Escape.

• Accordion

  Grouped disclosures, each a real button with aria-expanded, that open and collapse independently.

• Navigation menu

  A site main menu with disclosure dropdowns — Escape closes a submenu and returns focus to its toggle.

• Switch

  A role="switch" on/off toggle operated with Space or Enter, with state never on colour alone.

• Custom checkbox

  A stylable role="checkbox" with Space to toggle — shown alongside the preferred native input.

• Radio group

  A role="radiogroup" with arrow-key roving selection and a single tab stop.

• Slider

  A role="slider" driven by arrow, Page and Home/End keys, with a visible value readout.