The snippet library.
Small, practical examples. Search by task or narrow things down below.
Associate help text with an input
HTML: aria-describedby references supplementary instructions separately from the input’s name.
HTML✓ Tested
Expose a disclosure button’s expanded state
HTML: Keep aria-expanded synchronized with the controlled panel’s hidden state.
HTML✓ Tested
Give a section an accessible region name
HTML: A section becomes a named landmark when its heading is referenced with aria-labelledby.
HTML✓ Tested
Identify a search region with the search element
HTML: The native search element exposes a search landmark in supporting browsers.
HTML✓ Tested
Identify the current page in a breadcrumb
HTML: An ordered breadcrumb list sits inside a named navigation region, with aria-current on the current location.
HTML✓ Tested
Keep a decorative icon out of a button’s name
HTML: aria-hidden excludes a decorative character while leaving the visible action text as the accessible name.
HTML✓ Tested
Mark a self-contained article
HTML: Article identifies a standalone composition that can be read independently.
HTML✓ Tested
Move focus to a heading without adding a tab stop
HTML: A negative tabindex permits programmatic focus while keeping the heading out of ordinary sequential tab navigation.
HTML✓ Tested
Name complementary content
HTML: Aside identifies supporting content related to the main document.
HTML✓ Tested
Remove an inactive section from keyboard navigation
HTML: Inert prevents interaction and accessibility exposure for an inactive subtree.
HTML✓ Tested