ARIA attributes

ARIA AttributeDescriptionUse CaseExample Snippet
aria-labelProvides an accessible label for an elementWhen no visible label is available<button aria-label="Close"></button>
aria-labelledbyReferences another element that labels this oneFor complex widgets or grouped labels<div aria-labelledby="section-title">
aria-describedbyReferences text that describes the elementAdd supplemental description<input aria-describedby="hint">
aria-hiddenHides an element from assistive techHide decorative elements<span aria-hidden="true">★</span>
aria-expandedIndicates whether a section or control is expandedToggle sections like accordions or menus<button aria-expanded="false">Menu</button>
aria-pressedIndicates the pressed state of a toggle buttonToggle buttons<button aria-pressed="false">Bold</button>
aria-checkedIndicates the checked state of a checkbox/radioCustom checkbox widgets<div role="checkbox" aria-checked="true"></div>
aria-selectedIndicates the selected state of an item in a setTabs, selectable lists<li aria-selected="true">Tab 1</li>
aria-disabledMarks an element as disabled (not interactive)Disable elements not using native disabled<div aria-disabled="true">Save</div>
aria-controlsReferences the element that is controlledButton controlling a menu or dialog<button aria-controls="menu1">Open Menu</button>
aria-liveAnnounces content changes dynamicallyAlerts, chat updates<div aria-live="polite">New message</div>
roleDefines the role of an elementMarkup custom widgets or landmarks<div role="dialog">...</div>
aria-currentIndicates the current item within a setCurrent page in nav<a aria-current="page" href="/about">About</a>
aria-modalIndicates whether a dialog is modalAccessibility for modals<div role="dialog" aria-modal="true">
aria-busySignals loading stateFor areas loading content<div aria-busy="true">Loading...</div>
aria-haspopupIndicates the element has a popup (like a menu, dialog, listbox, etc.)Use with buttons or links that trigger menus or popups<button aria-haspopup="menu" aria-controls="dropdown">Options</button>