The `

Overrides the screen reader's default announcement of an element's role with a custom string — useful for custom widgets like a split-pane where "slider" is misleading. It controls whether an element is focusable and whether it participates in sequential keyboard navigation. 1) Purely decorative? Use alt="". 2) Conveys information? Use alt describing it. 3) Functional (link/button)? Use alt describing the action, not the image. 4) Complex? Use short alt plus a longer description. 7:1.

Points to the id of an element that the current element controls or affects, e.g., a button that controls a menu's id, or a tab that controls a tabpanel. 1) Purely decorative? Use alt="". 2) Conveys information? Use alt describing it. 3) Functional (link/button)? Use alt describing the action, not the image. 4) Complex? Use short alt plus a longer description. aria-disabled="true" marks the element as disabled to assistive tech but does NOT prevent user interaction. The HTML disabled attribute removes interactivity. Prefer the real disabled attribute when possible. Lets a composite widget keep DOM focus on the container while announcing a "virtual" focus on a child element identified by id.

Keyboard users can still focus it, but screen readers will not announce it — producing a "focus trap to nowhere" and an accessibility failure. Perceivable, Operable, Understandable, and Robust. Lets a composite widget keep DOM focus on the container while announcing a "virtual" focus on a child element identified by id. The text or label that assistive technologies announce for an element, computed from native HTML labels, aria-label, aria-labelledby, etc.

An aria-* attribute describing a relatively stable characteristic of an element, such as aria-label, aria-required, or aria-haspopup. 4.5:1. 7:1. Tells assistive technology to skip the image as decorative; the image is still rendered visually but is not announced.

Accessibility means people with disabilities can perceive, understand, navigate, and interact with the web. Usability is the broader quality of a design being easy to use for everyone, including those without disabilities. For an icon button, give the button an aria-label (e.g., "Close") and mark the icon span aria-hidden="true" so the icon is not double-announced. Associates the input with a separate error message element so the screen reader announces the field's name and the error, e.g., "Email, invalid entry, please enter a valid email". Polite updates wait until the user pauses; assertive updates interrupt the current announcement immediately and should be used sparingly.

Points to the id of an element that the current element controls or affects, e.g., a button that controls a menu's id, or a tab that controls a tabpanel. Any element with aria-live (or a role that implies it) whose text content can change dynamically and should be announced. The `

role="list" on a non-list element exposes it as a list to AT; a real `

` is already a list. Don't add role="list" to a `
` to "fix" list announcements when CSS has stripped the list semantics. Indicates a form field must be filled in before submission; announced as "required" by screen readers. A group of button headers with aria-expanded controlling a region with role="region" and aria-labelledby pointing to the header that opens it. scope="col" associates the header with all cells in that column; scope="row" associates it with all cells in that row.

All interactive ARIA controls must be usable with the keyboard. The `

` element when it is a direct child of the ``. The `

The div does not natively respond to Enter/Space, cannot receive focus by default, and lacks disabled and form-submission semantics — all must be reimplemented with JS and tabindex. An accessible name (via aria-label, aria-labelledby, or alt on a related element) is required; otherwise the image is announced as "image" with no description, failing 1.1.1. 7:1. role="presentation removes the element from the accessibility tree but keeps its children; aria-hidden removes the element AND all its descendants.

For any control with visible text, the accessible name must contain that visible text (case-insensitively), so voice-control users saying "click Sign up" hit the right button. role="status" (implicit aria-live="polite"). A live region showing time remaining or elapsed, announced as a timer when aria-live="off" is set, otherwise behaving like a status region. The visual order no longer matches the DOM order, so tabbing and screen-reader navigation become confusing and the page fails WCAG 1.3.2 (Meaningful Sequence).

"a11y" is a numeronym for "accessibility" — 'a' + 11 letters + 'y'. Keyboard users can still focus it, but screen readers will not announce it — producing a "focus trap to nowhere" and an accessibility failure. role="combobox" (or a real ``) with aria-expanded and aria-controls pointing to a role="listbox" of role="option" children; aria-activedescendant or roving tabindex tracks the focused option. 4.5:1.