Title: Accessibility Aria Patterns — LearnCoachAssist

Q: What does the acronym "a11y" stand for in web development?
A: "a11y" is a numeronym for "accessibility" — 'a' + 11 letters + 'y'.

Q: What is the difference between web accessibility (a11y) and usability?
A: 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.

Q: Which four disability categories does WCAG primarily address?
A: Visual, auditory, physical/motor, and cognitive/neurological disabilities.

Q: Name the three conformance levels defined by WCAG 2.1.
A: A (lowest), AA (mid), and AAA (highest).

Q: What is the WCAG 2.1 minimum contrast ratio for normal text at level AA?
A: 4.5:1.

Q: What is the WCAG 2.1 minimum contrast ratio for large text (≥18pt or ≥14pt bold) at level AA?
A: 3:1.

Q: What is the WCAG 2.1 minimum contrast ratio for normal text at level AAA?
A: 7:1.

Q: What are the four POUR principles that organize WCAG guidelines?
A: Perceivable, Operable, Understandable, and Robust.

Q: What does the "Accessible Rich Internet Applications" (ARIA) specification do?
A: It defines roles, states, and properties that can be added to HTML so web content and applications are more accessible to assistive technology users.

Q: What is the first rule of ARIA?
A: If you can use a native HTML element or attribute that has the semantics and behavior you need, use that — do not add ARIA roles, states, or properties.

Q: What is the third rule of ARIA?
A: All interactive ARIA controls must be usable with the keyboard.

Q: What is the fourth rule of ARIA?
A: Do not use role="presentation" or aria-hidden="true" on a focusable element or on an element that has focusable descendants.

Q: What is the fifth rule of ARIA?
A: All interactive elements must have an accessible name.

Q: What is an "accessible name"?
A: The text or label that assistive technologies announce for an element, computed from native HTML labels, aria-label, aria-labelledby, etc.

Q: In the accessible name calculation, which source wins between aria-label, aria-labelledby, and the native ``?
A: aria-labelledby > aria-label > native label or label-associated text.

Q: What is an ARIA "role"?
A: An attribute (role="...") that tells assistive technology the type of widget or structure an element represents (e.g., role="button", role="navigation").

Q: What is an ARIA "state"?
A: An aria-* attribute conveying a dynamic condition that may change in response to user action, such as aria-expanded or aria-selected.

Q: What is an ARIA "property"?
A: An aria-* attribute describing a relatively stable characteristic of an element, such as aria-label, aria-required, or aria-haspopup.

Q: What is a "landmark" in accessibility?
A: A role identifying a major section of a page so screen-reader users can navigate to it quickly (banner, navigation, main, contentinfo, etc.).

Q: Which HTML element is equivalent to role="banner"?
A: The `
` element when it is a direct child of the ``.

Q: Which HTML element is equivalent to role="main"?
A: The `
` element.

Q: Which HTML element is equivalent to role="contentinfo"?
A: The `
` element when it is a direct child of the ``.

Q: Which HTML element is equivalent to role="navigation"?
A: The `
` element.

Q: What landmark role does `
` map to?
A: complementary.

Q: Why should you avoid using role="application"?
A: It tells screen readers to hand normal navigation keys (Tab, arrows) over to the web app, disabling many shortcuts and confusing users unless the app implements a complete virtual buffer mode.

Q: When should role="presentation" (or role="none") be used?
A: On a purely decorative HTML element whose children alone provide the semantics, e.g., a `
` used only for layout.

Q: What is the difference between role="presentation" and aria-hidden="true"?
A: role="presentation removes the element from the accessibility tree but keeps its children; aria-hidden removes the element AND all its descendants.

Q: Why must you never put aria-hidden="true" on a focusable element?
A: Keyboard users can still focus it, but screen readers will not announce it — producing a "focus trap to nowhere" and an accessibility failure.

Q: What is the purpose of aria-live?
A: It marks a region whose content may change dynamically so assistive technologies announce updates, with politeness levels off, polite, or assertive.

Q: What is the difference between aria-live="polite" and aria-live="assertive"?
A: Polite updates wait until the user pauses; assertive updates interrupt the current announcement immediately and should be used sparingly.

Q: What ARIA role implies aria-live="assertive" and triggers immediate announcement of a message?
A: role="alert".

Q: What role announces dynamic status updates politely, like "Saved" or "Loading complete"?
A: role="status" (implicit aria-live="polite").

Q: What is the purpose of aria-atomic on a live region?
A: When true, assistive tech announces the entire region on every change; when false, only the changed nodes are announced.

Q: What is the purpose of aria-relevant?
A: It controls which kinds of changes (additions, removals, text) to a live region trigger announcements.

Q: What is a "live region"?
A: Any element with aria-live (or a role that implies it) whose text content can change dynamically and should be announced.

Q: What problem arises from `
` compared to a real ``?
A: 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.

Q: What is the purpose of tabindex?
A: It controls whether an element is focusable and whether it participates in sequential keyboard navigation.

Q: What does tabindex="0" do?
A: Makes the element focusable via keyboard and places it in the natural document Tab order.

Q: What does tabindex="-1" do?
A: Makes the element focusable programmatically (e.g., via element.focus()) but removes it from sequential Tab order.

Q: Why is a positive tabindex (e.g., tabindex="1") discouraged?
A: It jumps the element to the front of the Tab order ahead of natural order, making the page order unpredictable.

Q: What is the recommended way to implement a skip link?
A: An anchor at the very start of the page pointing to the main content id (e.g., #main), placed as the first focusable element so keyboard and screen-reader users can bypass nav.

Q: What does "visible focus" mean and which WCAG criterion requires it?
A: The focus indicator must be visible on every focusable element so keyboard users can see where they are; required by WCAG 2.4.7 (Focus Visible) at AA.

Q: Why is `outline: none` an accessibility anti-pattern?
A: Removing the focus ring without an alternative makes keyboard navigation invisible. Replace it with a custom :focus-visible style instead.

Q: What does the CSS pseudo-class :focus-visible do?
A: Applies focus styles only when focus comes from keyboard or other non-pointer input, so mouse clicks don't show rings but keyboard tabbing does.

Q: What is the minimum accessibility issue with a clickable `
` that has no role, no tabindex, and no key handler?
A: It is not focusable and has no semantics — keyboard and screen-reader users cannot reach or understand it as a control.

Q: What is the role of aria-haspopup?
A: It announces that activating the element opens a popup and can specify its kind: true, "menu", "listbox", "tree", "grid", or "dialog".

Q: What does aria-expanded="true" on a button mean?
A: The disclosure, menu, or popup the button controls is currently visible/open; screen readers announce "expanded" or "collapsed".

Q: What is the disclosure pattern?
A: A button that controls the visibility of a single region of content, using aria-expanded (and often aria-controls pointing to the region's id).

Q: What is the recommended ARIA pattern for tabs?
A: A tablist containing role="tab" elements with aria-controls pointing to their tabpanel, aria-selected indicating the active tab, and each tabpanel having role="tabpanel" and aria-labelledby pointing back to its tab.

Q: How must arrow keys behave in a horizontal tablist?
A: Left/Right arrows move focus and selection between tabs; Home/End jump to the first/last tab; Tab exits the tablist to the next focusable element.

Q: What is the ARIA accordion pattern?
A: A group of button headers with aria-expanded controlling a region with role="region" and aria-labelledby pointing to the header that opens it.

Q: What is the ARIA menu pattern?
A: role="menu" with role="menuitem" (or menuitemcheckbox/menuitemradio) children where arrow keys navigate items and Enter/Space activate them — an application-style widget, NOT a site navigation list.

Q: When should you use role="menu" vs. a plain navigation list?
A: Use role="menu" only for true application menus (File/Edit dropdowns). For site navigation, use a `
` inside `
` so the standard list/keyboard model is preserved.

Q: What is the difference between a listbox and a menu?
A: A listbox (role="listbox" with role="option") is for selecting one or more values from a set and supports aria-multiselectable; a menu is for commands/actions.

Q: What is the standard ARIA pattern for a modal dialog?
A: role="dialog" with aria-modal="true" on the dialog container, aria-labelledby pointing to the title, focus moved into the dialog, and Tab trapped inside until closed.

Q: What is a "focus trap" and why does a modal need one?
A: A technique that keeps keyboard focus within the dialog while it is open so tabbing cannot reach content behind it (which is inert).

Q: What does aria-modal="true" tell assistive technology?
A: That the rest of the page is inert while the dialog is open, so the user should not be navigating outside it.

Q: What is the "inert" HTML attribute used for?
A: inert (an HTML attribute) marks content as non-interactive and hidden from assistive tech, complementing focus trapping in a modal.

Q: What is role="alertdialog"?
A: A dialog used for an urgent message that requires confirmation; it inherits aria-live="assertive" so the message interrupts the user.

Q: What does the combobox pattern look like?
A: 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.

Q: What does aria-activedescendant do?
A: Lets a composite widget keep DOM focus on the container while announcing a "virtual" focus on a child element identified by id.

Q: What is the difference between aria-activedescendant and roving tabindex?
A: Both indicate the "current" item. With aria-activedescendant, focus stays on the container; with roving tabindex, focus itself moves among children via tabindex=0 on the current and tabindex=-1 on the others.

Q: What is the purpose of `` or wrapping an input in a ``?
A: Associates the label with the form control so clicking it focuses the control and screen readers announce the label as the control's accessible name.

Q: What is the difference between aria-label and aria-labelledby?
A: aria-label takes a string as its value; aria-labelledby takes the id(s) of other elements whose text becomes the name (and can reference visible text, supporting translation and updates).

Q: When should you use aria-describedby?
A: When an element needs additional context announced after its name, e.g., a password input with format requirements, or a field with an inline error message.

Q: What is the purpose of aria-required="true"?
A: Indicates a form field must be filled in before submission; announced as "required" by screen readers.

Q: What is the purpose of aria-invalid="true" and when should it be set?
A: Marks a form field as failing validation; set dynamically on submit or after the user leaves the field with an error so the screen reader announces "invalid entry" along with the error message.

Q: What is the standard pattern for a progressbar?
A: role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-valuetext when the value isn't a simple number (e.g., "Loading 45%"). Omit aria-valuenow for indeterminate progress.

Q: What is the difference between role="progressbar" and role="status"?
A: progressbar announces a numeric value that changes; status is a general polite live region for short textual updates like "Saved".

Q: What is the role="timer" used for?
A: A live region showing time remaining or elapsed, announced as a timer when aria-live="off" is set, otherwise behaving like a status region.

Q: What is the difference between role="alert" and role="alertdialog"?
A: role="alert" is a non-modal live region that announces a message; role="alertdialog" is a modal dialog that requires a user response and interrupts the user.

Q: What is the ARIA grid pattern?
A: role="grid" container with role="row" children and role="gridcell" (or columnheader/rowheader) inside; arrow keys move between cells; Home/End jump within a row; Ctrl+Home/End jump to the first/last cell.

Q: What is a "tree" widget in ARIA?
A: A hierarchical list where each item can be expanded/collapsed; role="tree" with role="treeitem" children. Right arrow expands or moves to the first child; left collapses or moves to the parent.

Q: What is the ARIA pattern for a tooltip?
A: role="tooltip" on the popup, the trigger has aria-describedby pointing to the tooltip's id; appears on hover AND focus, hides on blur/Escape.

Q: How should a tooltip behave on keyboard focus?
A: It must appear on focus (not only on hover), because keyboard-only users have no hover. Hide it on blur or Escape.

Q: What does the role="switch" represent?
A: A two-state toggle (on/off) with role="switch" and aria-checked, distinct from a checkbox because it implies an immediate effect rather than form submission.

Q: What does aria-checked="mixed" indicate?
A: That a checkbox or menuitemcheckbox represents a tri-state value where some but not all child items are checked (e.g., "select all" with partial selection).

Q: What does aria-pressed indicate on a toggle button?
A: Whether a button is in the "pressed" (on) state; used for buttons that act as toggles (bold, italic) rather than one-shot actions.

Q: What is the difference between aria-pressed and aria-checked?
A: aria-pressed is for buttons that toggle; aria-checked is for checkboxes, switches, and menu items with a checked state.

Q: What does aria-disabled do, and how is it different from the HTML disabled attribute?
A: 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.

Q: What is aria-current and what values can it take?
A: Indicates the element represents the current item in a set: "page", "step", "location", "date", "time", "true", or "false". Common for "current page" on nav links.

Q: What is the purpose of aria-controls?
A: 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.

Q: What is the purpose of aria-owns?
A: Declares a parent-child relationship in the accessibility tree that doesn't exist in the DOM, e.g., reparenting a tooltip into a dialog tree.

Q: What is the difference between aria-controls and aria-owns?
A: aria-controls indicates an element affects another; aria-owns establishes a logical parent-child relationship used to build the accessibility tree.

Q: What is the danger of changing reading order with CSS without aria-flowto or source-order changes?
A: 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).

Q: What is the difference between role="article" and a plain `
` element?
A: role="article" can be added to any element to mark it as self-contained content, but a real `
` already has that semantic and is preferred.

Q: When should you add role="region" to a section?
A: When a section is a significant area of the page that screen-reader users should be able to navigate to AND it has an accessible name; otherwise it is not exposed as a landmark.

Q: What is the pattern for an accessible table?
A: Use a real `
` with `
`, `
`, `
`, `
`, and ` | `. Use id/headers for multi-level or irregular tables.

Q: What is the role of scope on a `
`?
A: scope="col" associates the header with all cells in that column; scope="row" associates it with all cells in that row.

Q: What is the "alt attribute decision tree" for ` `?
A: 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.

Q: What does an empty alt="" on an image do?
A: Tells assistive technology to skip the image as decorative; the image is still rendered visually but is not announced.

Q: What is the "alt text for icons" pattern?
A: 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.

Q: Why should you not rely on the title attribute for accessible names?
A: title has poor support as an accessible name, is not exposed consistently across screen readers, and is only shown on hover — so keyboard and touch users cannot use it.

Q: What is the "visible label ≠ accessible name" anti-pattern?
A: Showing users "Sign up with Google" visually but coding the button with aria-label="Google" — the screen reader announces a different name than sighted users see, which fails WCAG 2.5.3 (Label in Name).

Q: What is WCAG 2.5.3 "Label in Name"?
A: 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.

Q: What is the impact of the prefers-reduced-motion media query?
A: Users with vestibular disorders or motion sensitivity can opt in to reduced motion via OS settings; sites should disable or minimize non-essential animations (parallax, autoplay video) inside @media (prefers-reduced-motion: reduce).

Q: What is prefers-color-scheme used for?
A: Detects whether the user has requested light or dark mode, so the site can offer a theme with sufficient contrast in both modes.

Q: What is the WCAG 2.4.3 "focus order" requirement?
A: Tab order must preserve meaning and operability — it should follow the visual reading order and DOM order. Don't use positive tabindex to "fix" order.

Q: What are WCAG's "link purpose" requirements (2.4.4)?
A: Every link's accessible name should make its destination clear out of context, e.g., "Read the accessibility guide" not "click here".

Q: What is the "button vs link" decision rule?
A: Use a link (``) when activation navigates to a new URL or fragment; use a button for actions (submit, open dialog, toggle) without navigation.

Q: What is the standard accessible error-handling pattern for forms?
A: On submit, set aria-invalid="true" on bad fields, associate each with an error message via aria-describedby, add an alert live region summarizing errors at the top, and keep focus on the first error or summary.

Q: What does role="img" require for an accessible name?
A: 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.

Q: What is the "heading hierarchy" rule?
A: Headings should not skip levels when going from h1 to h3 without an h2, because screen-reader users use heading navigation to skim. WCAG 1.3.1 and 2.4.6 apply.

Q: What is the WCAG rule for "Headings and Labels" (2.4.6)?
A: Headings and labels must describe the topic or purpose of their section or control; vague labels like "More" without context are not enough.

Q: What is the accessible name failure for an icon-only social link?
A: An `` containing only an `

Q: What does aria-describedby do for form errors?
A: 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".

Q: What is the "accessible carousel" pattern?
A: Use a tablist pattern where slides are tabpanels and selectors are tabs, with Previous/Next controls, an autoplay toggle, and a Pause/Play button; provide live region announcements for slide changes.

Q: What is the role="group" used for?
A: Wraps a set of related controls that should be perceived as one unit, paired with aria-label/aria-labelledby to give the group a name (e.g., a radio group "Font size").

Q: What is the standard pattern for a radio group?
A: role="radiogroup" container with role="radio" children, each radio having aria-checked; one radio must have aria-checked="true" at all times; arrow keys move between radios.

Q: What is the difference between role="radio" and role="menuitemradio"?
A: radio is the WAI-ARIA radio button, used inside a radiogroup; menuitemradio is a radio-like item inside a menu, where arrow keys move and Space toggles.

Q: What is the pattern for a toggle button (e.g., Bold)?
A: A `` with aria-pressed="true|false", announced as "pressed" or "not pressed" by screen readers. Avoid using a checkbox styled as a button.

Q: What is the role="search" landmark?
A: role="search" (or a ``/`
` with an accessible name) marks a search region so screen-reader users can jump to it directly.

Q: What is the "navigation" landmark?
A: role="navigation" (or a `
` with an accessible name) marks a navigation region. Use aria-label/aria-labelledby when a page has multiple `
` elements so each is distinguishable.

Q: What is the "accessibility tree"?
A: A parallel tree to the DOM that browsers expose to assistive technologies, derived from the DOM plus ARIA — listing accessible nodes with their roles, names, states, and properties.

Q: Why is it important that custom components use semantic tokens and are tested with screen readers?
A: Visual styling (e.g., making a `
` look like a button) doesn't change the accessibility tree — the role and behavior must be set correctly for screen readers to announce and operate it.

Q: What is the "focus visible" rule for custom components?
A: Every interactive element must show a visible focus indicator (via :focus-visible or a manual style) and that indicator must have at least 3:1 contrast against the adjacent background (WCAG 1.4.11).

Q: What is aria-roledescription used for?
A: 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.

Q: What is the recommended pattern for sortable table headers?
A: A `` inside a `
` with aria-sort="ascending|descending|none" on the `
`, and aria-label like "Sort by Name, currently ascending".

Q: What is the difference between role="list" and `
`?
A: 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.

Q: What causes screen readers to stop announcing a `
` as a list?
A: Removing role via display: contents on a flex parent or via certain CSS resets can break list semantics; the fix is to restore the proper role.