| description | Use when building a UI widget that has no native HTML equivalent (tabs, combobox with custom rendering, listbox with rich options, menu/menubar, tree, treegrid, carousel, custom modal) and you need to know which ARIA roles, states, and keyboard model the W3C WAI APG mandates, when announcing dynamic updates to screen readers (status, alert, save toast), when deciding between `aria-label` and `aria-labelledby` and `aria-describedby` and `aria-errormessage` for an accessible name and description, when a screen reader is silent on a component that visibly changed, when keyboard focus or screen-reader announcement order does not match the visual order, or when a code review flags `role="..."` and you must verify whether the role is needed at all. Prevents the first-rule-of-ARIA violation (slapping a role on a div instead of using the native element), `aria-label` overriding visible text, redundant roles such as `<nav role="navigation">` or `<button role="button">`, live regions inserted at update time (they MUST pre-exist in the DOM), `aria-hidden` on focusable background content while a modal is open (does NOT remove from tab order; use `inert` instead), tabs with every tab `tabindex="0"` instead of roving tabindex, combobox patterns moving DOM focus into the listbox while the user is typing, `role="menu"` on a `<nav>` list of links, `role="alert"` used for periodic non-urgent updates, and `aria-errormessage` declared without the required `aria-invalid="true"`. Covers the first rule of ARIA, the WAI-ARIA 1.2 role categories, the implicit-ARIA-semantics mapping from HTML elements, the seven APG patterns Carousel + Disclosure + Listbox + Menu/Menubar + Radio Group + Tree + Treegrid (drilled this batch), plus expanded coverage of Dialog (Modal) + Combobox + Tabs, the live-region attribute set (`aria-live`, `aria-atomic`, `aria-relevant`, `aria-busy`) with the pre-baked `role="status"` and `role="alert"` shortcuts, and the labelling precedence (`aria-labelledby` > `aria-label` > native label > content text > `title`) including `aria-describedby` and the `aria-errormessage` + `aria-invalid` binding. Keywords: ARIA, WAI-ARIA, APG, role, aria-label, aria-labelledby, aria-describedby, aria-errormessage, aria-invalid, aria-live, aria-atomic, aria-relevant, aria-busy, aria-expanded, aria-controls, aria-haspopup, aria-activedescendant, aria-selected, aria-checked, aria-modal, aria-multiselectable, aria-orientation, aria-roledescription, aria-level, aria-posinset, aria-setsize, aria-disabled, role dialog, role combobox, role tablist, role tab, role tabpanel, role listbox, role option, role menu, role menubar, role menuitem, role menuitemcheckbox, role menuitemradio, role radiogroup, role radio, role tree, role treeitem, role treegrid, role row, role gridcell, role status, role alert, role region, role group, roving tabindex, first rule of ARIA, implicit ARIA semantics, accessible name, accessible name computation, screen reader silent, screen reader does not announce, role conflict, live region not announcing, missing accessible name, screen reader says two widgets for combobox, keyboard nav broken, focus jumps wrong place, how to make accessible custom widget, when do I need ARIA, what is APG, what role should this have, ARIA combobox pattern, accessible tabs implementation, how to announce a notification to screen readers, how to make a modal accessible.
|
