Front-end Web Development Accessibility Syllabus

What does aria-expanded indicate and on which elements is it used?

aria-expanded (true/false) indicates whether a collapsible element controlled by the current element is currently expanded or collapsed. Used on disclosure buttons, accordions, menu buttons, comboboxes, and tree nodes.

What is the difference between aria-hidden="true" and the HTML hidden attribute / display:none?

aria-hidden="true" removes the element and its children from the accessibility tree but keeps it visually rendered and possibly focusable. hidden / display:none removes it from both the visual layout and the accessibility tree.

Why is putting aria-hidden="true" on a focusable element a problem?

It hides the element from screen readers while keeping it in the tab order, creating a 'phantom' focus where keyboard users land on an element that is not announced. Hidden interactive elements should also be removed from the tab order.

What does the aria-disabled state do, and how does it differ from the native disabled attribute?

aria-disabled="true" tells assistive technology the element is perceivable but currently disabled; unlike native disabled, it does NOT prevent focus or block events, so you must handle that behavior yourself.

What does aria-selected represent and where is it used?

aria-selected (true/false) is a state indicating the selected item in a set of related elements such as tabs (role=tab), options in a listbox, gridcells, or rows.

What does aria-pressed indicate, and what widget does it create?

aria-pressed (true/false/mixed) on a button creates a toggle button, indicating whether it is currently pressed/active (e.g., a Bold button in a text editor).

What is the function of aria-live, and what are its main values?

aria-live defines a live region whose dynamic content changes are announced by screen readers. Values: off (no announcement), polite (announce when user is idle), and assertive (announce immediately, interrupting).

What do the aria-atomic and aria-relevant properties control in live regions?

aria-atomic (true/false) controls whether the entire region or only changed nodes are announced. aria-relevant specifies which change types (additions, removals, text, all) trigger announcements.

What does aria-current indicate, and give example values.

aria-current marks the current item within a set. Values: page (current page in nav), step, location, date, time, true, or false. Commonly used for the active link in a navigation menu.

What is the purpose of aria-invalid on form fields?

aria-invalid="true" indicates the value entered into a field has failed validation, signaling an error state to assistive technology. Often paired with aria-describedby pointing to the error message.

What is sequential keyboard navigation, and which key drives it?

Sequential keyboard navigation is moving focus through interactive elements one at a time using the Tab key (Shift+Tab to move backward), following the tab order (DOM order by default).

What are the three meaningful values of tabindex and what does each do?

tabindex="0" adds the element to the natural tab order in DOM position. tabindex="-1" makes the element focusable only programmatically (not via Tab). tabindex="1" (or any positive value) forces a custom tab order and is discouraged.

Why is a positive tabindex value (e.g., tabindex="3") considered an anti-pattern?

Positive values override the natural DOM tab order across the whole page, creating a confusing, hard-to-maintain focus sequence and easily causing keyboard traps. Use 0 and -1 only, and rely on DOM order.

What is a keyboard trap, and why must it be avoided?

A keyboard trap is when focus enters a component and cannot leave using the keyboard alone, stranding keyboard and screen reader users. WCAG 2.1.2 requires that focus can always move away via standard keys.

Which keys are expected to activate buttons versus links?

Buttons are activated by both Enter and Space. Links are activated by Enter only. Custom widgets with role=button must therefore respond to both Enter and Space.

What keyboard pattern is expected within a composite widget like a menu, tablist, or radio group?

The roving tabindex / arrow-key pattern: Tab moves focus into and out of the widget as one stop, while the Arrow keys move focus among the items inside it. Only one item has tabindex="0" at a time.

What is the 'roving tabindex' technique?

A focus-management method where exactly one child of a composite widget has tabindex="0" (the active item) and all others have tabindex="-1". Arrow keys move the 0 value to the newly focused item, keeping the group a single tab stop.

What is a visible focus indicator and which WCAG requirement covers it?

A visible focus indicator is the visual outline/styling showing which element currently has keyboard focus. WCAG 2.4.7 (Focus Visible) requires that keyboard focus be visible; you must not remove outlines without providing an equivalent.

What is a 'skip link' and why is it important?

A skip link is a (often initially hidden) link at the top of a page, like 'Skip to main content', that lets keyboard users bypass repeated blocks such as navigation. It satisfies WCAG 2.4.1 (Bypass Blocks).

In a modal dialog, what two keyboard behaviors are required for accessibility?

1) Focus trapping: Tab/Shift+Tab cycle only within the dialog while it is open. 2) Escape closes the dialog, and focus returns to the element that opened it. Focus should move into the dialog on open.

What is the WCAG formula for contrast ratio between two colors?

$$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$ where $L_1$ is the relative luminance of the lighter color and $L_2$ that of the darker color. Ratios range from $1\!:\!1$ to $21\!:\!1$.

What is the formula for relative luminance used in WCAG contrast calculations?

$$L = 0.2126\,R + 0.7152\,G + 0.0722\,B$$ where $R$, $G$, $B$ are the linearized (gamma-corrected) channel values. Green is weighted most heavily because the human eye is most sensitive to it.

What are the WCAG 2.1 AA minimum contrast ratios for normal text and large text?

Normal text requires a contrast ratio of at least $4.5\!:\!1$. Large text (at least 18pt, or 14pt bold) requires at least $3\!:\!1$. This is success criterion 1.4.3.

What are the WCAG AAA contrast requirements for normal and large text?

AAA (1.4.6) requires at least $7\!:\!1$ for normal text and at least $4.5\!:\!1$ for large text.

What minimum contrast does WCAG require for non-text elements like UI components and graphics?

At least $3\!:\!1$ against adjacent colors, per success criterion 1.4.11 (Non-text Contrast). This applies to button borders, form field outlines, focus indicators, and meaningful graphical objects.

Why is using color alone to convey information a WCAG violation, and which criterion addresses it?

Color-blind and low-vision users may not perceive the distinction. WCAG 1.4.1 (Use of Color) requires that color not be the only visual means of conveying information; add text, icons, patterns, or underlines as well.

What is a screen reader, and how does a user typically interact with one?

A screen reader is assistive software that converts on-screen content into synthesized speech or braille. Users navigate via keyboard shortcuts, moving by headings, landmarks, links, form fields, or reading linearly through the accessibility tree.

Name three widely used screen readers and the platforms they run on.

JAWS (Windows, commercial), NVDA (Windows, free/open-source), and VoiceOver (built into macOS and iOS). TalkBack is the built-in screen reader on Android.

Why is correct heading structure (h1–h6) important for screen reader users?

Screen reader users navigate by jumping between headings to scan and understand page structure. Headings must be used semantically and in a logical, non-skipping hierarchy, not chosen for visual size.

What makes good alt text for images, and how should decorative images be handled?

Good alt text concisely conveys the image's meaning or function in context, without 'image of' boilerplate. Decorative images should have an empty alt (alt="") so screen readers skip them; functional images describe the action.

How can content be made visually hidden but still available to screen readers?

Use a CSS 'visually-hidden' / 'sr-only' utility (clip the element to a 1px area, off-screen positioning, no display:none) so it stays in the accessibility tree. Avoid display:none or visibility:hidden, which remove it from screen readers entirely.