Back
Keentune
Web Accessibility curriculum 23 chapters
·
139 concepts
·
free
Everything the adaptive question bank can teach and test in Web Accessibility, from foundations through advanced practice. Work through it in order, or start practising and let the questions find your level.
Start practising Web Accessibility
New here? Read the Web Accessibility guide
A free 17-minute primer — the mental model, the mistakes beginners make, and what to practise first.
A. Foundations: disability and the standards family
•
one barrier hits a blind user, a broken arm and bright sunlight alike
•
Perceivable, Operable, Understandable and Robust are the four buckets every criterion sits in
•
WCAG governs content, ARIA supplies semantics, ATAG covers authoring tools, UAAG covers browsers
•
2.0, 2.1 and 2.2 are additive, so 2.2 AA contains every earlier AA criterion unchanged
B. Conformance: what a "WCAG 2.2 AA" claim actually asserts
•
A is the floor, AA the usual procurement and legal bar, AAA never required for a whole site
•
one failed criterion fails the entire page at that level; there is no partial credit
•
you cannot exclude part of a page, and every step of a checkout must conform or none of it counts
•
a technique only counts if the assistive technologies users actually have support it
•
even non-conforming content must not trap the keyboard, autoplay audio, flash, or block pause and stop
•
success criteria are normative; Understanding pages, techniques and the APG are not
C. Text alternatives (1.1.1)
•
alt carries the information the image conveys, not a description of its appearance
•
alt="" removes the image from the tree, while a missing alt makes screen readers read the filename
•
an image that is a link or a button is named for its action, not for its picture
•
a chart needs an adjacent text or table equivalent, because alt cannot carry a dataset
•
a meaningful SVG needs role="img" plus a <title> child, and a decorative one needs aria-hidden="true"
•
a background image is absent from the accessibility tree, so its meaning must exist in the DOM
D. Time-based media (1.2.x)
•
captions include speaker changes and meaningful sound, while subtitles render only dialogue
•
captions for prerecorded video are Level A and live captions are Level AA
•
it narrates visual information the soundtrack never states, which no dialogue transcript can supply
•
a transcript satisfies audio-only content but never replaces captions on video
E. Structure, relationships and reading order (1.3.x)
•
headings are the outline screen-reader users navigate by, so a skipped level destroys the map
•
header, nav, main, aside and footer expose jump targets that a sighted mouse user never sees
•
<th> with scope , plus headers and id pairing when the table is irregular
•
DOM order is the reading order, and CSS order or row-reverse desynchronizes it from the visual one
•
"the round green button on the right" fails 1.3.3 because shape, color and position are not perceivable to all
•
1.3.5 requires autocomplete tokens on fields collecting information about the user
F. Color and contrast (1.4.1, 1.4.3, 1.4.6, 1.4.11)
•
4.5:1 for body text and 3:1 for large text is the AA threshold
•
large means 18pt or 24px, dropping to 14pt or 18.66px when the text is bold
•
the ratio is (L1+0.05)/(L2+0.05) over linearized sRGB, so it is not a perceptual difference
•
1.4.11 demands 3:1 for control boundaries, focus indicators and graphics that carry meaning
•
disabled controls, pure decoration, logotypes and incidental text are exempt from 1.4.3
•
1.4.1 forbids color as the only cue, so add text, an icon, an underline or a pattern
G. Resize, reflow and adaptable presentation (1.4.4–1.4.13)
•
1.4.4 requires text to reach 200% without losing content or function
•
1.4.10 forbids two-dimensional scrolling at 320 CSS px, which is 400% zoom on a 1280px viewport
•
data tables, maps, diagrams and code that genuinely need two-dimensional layout are exempt
•
content must not be restricted to one display orientation unless that orientation is essential
•
1.4.12 sets line, paragraph, letter and word spacing the page must absorb without clipping
•
a maximum-scale=1 viewport blocks pinch zoom and fails resize
•
1.4.13 requires tooltips and popovers to be dismissible, hoverable and persistent
H. Keyboard operability (2.1.x)
•
2.1.1 covers every function, including drag, hover-reveal and canvas interactions
•
a click handler on a plain div gets no focus, no Enter, no role and no state
•
2.1.2 requires that focus can always leave a component using standard keys
•
0 inserts the element into the tab order, and minus one makes it focusable only by script
•
any positive value jumps the element ahead of the entire natural document order
•
native buttons fire on both keys and links only on Enter, so a custom control must wire both
•
disabled removes the control from the tab order entirely, while aria-disabled keeps it discoverable
•
a single-character shortcut must be switchable off, remappable, or active only on focus
I. Timing, motion and seizures (2.2.x, 2.3.x)
•
2.2.1 lets the user turn off, adjust or extend a time limit before it expires
•
2.2.2 applies to anything moving, blinking or auto-updating for more than five seconds
•
2.3.1 caps flashing at three per second unless it stays under the general and red flash thresholds
•
2.3.3 lets users disable non-essential motion that their own interaction triggers
•
the media query is the operating system's own signal, so honor it instead of asking again
J. Navigation, focus order and focus visibility (2.4.x)
•
2.4.1 needs a bypass mechanism, and a skip link must become visible when it receives focus
•
2.4.2 wants a unique, front-loaded <title> , because it is the first thing announced on load
•
2.4.3 requires the tab sequence to preserve meaning and operability, not merely to exist
•
2.4.4 fails "read more" when a link list strips away the surrounding sentence
•
removing the focus ring with no replacement is the most common 2.4.7 failure in shipped CSS
•
:focus-visible shows the indicator for keyboard users while suppressing it on a mouse click
•
2.4.11, new in 2.2, forbids a sticky header or cookie bar from entirely hiding the focused control
•
more than one route to each page — search, a site map, or a navigation menu — unless the page is a step in a process
K. Pointer input, gestures and target size (2.5.x)
•
2.5.1 requires a single-pointer alternative to any path-based or multipoint gesture
•
2.5.2 wants activation on the up-event, so a mis-press can be dragged away and abandoned
•
2.5.3 requires the accessible name to contain the visible label text, because voice control speaks what is on screen
•
2.5.8, new in 2.2, sets a 24 by 24 CSS px target or equivalent spacing at AA
•
inline links inside a sentence, user-agent-styled controls, and essential or equivalent targets are exempt
•
2.5.7, new in 2.2, requires a non-dragging single-pointer alternative such as tap-to-move
•
2.5.4 requires a conventional control alongside any shake or tilt trigger, and a way to disable it
•
3.1.1 <html lang> selects the screen reader's pronunciation voice for the whole document
•
3.1.2 marks a foreign phrase so it is not spoken with the page language's phonetics
•
the value must be a valid BCP 47 tag, so lang="english" is silently useless
M. Predictable behavior (3.2.x)
•
a new window, a new page, a changed viewport or a moved focus all count as a context change
•
3.2.1 forbids opening a dialog or navigating merely because a component received focus
•
3.2.2 forbids a select or checkbox auto-submitting unless the user was warned beforehand
•
3.2.3 keeps repeated navigation in the same relative order and 3.2.4 gives the same function the same name
•
3.2.6, new in 2.2, requires help mechanisms to sit in the same relative order on every page that offers them
N. Forms, error handling and authentication (3.3.x)
•
<label for> or a wrapping label supplies both the accessible name and a larger click target
•
it vanishes on input, usually fails contrast, and is only a last-resort source of the name
•
3.3.1 requires the error to be described in text, so a red border alone fails
•
3.3.3 requires offering a correction when the fix is known and revealing it does not endanger security
•
the pairing that makes a screen reader read the error message together with the field it belongs to
•
3.3.4 requires legal, financial and data submissions to be reversible, checked or confirmed
•
3.3.7, new in 2.2, forbids asking twice for information already supplied in the same process
•
3.3.8, new in 2.2, forbids an unavoidable cognitive function test, which is why blocking paste fails
O. Robust: name, role, value and status messages (4.1.x)
•
every UI component must programmatically expose a name, a role and its current state
•
a tab that only looks selected, with no aria-selected , fails 4.1.2 however good it looks
•
4.1.1 is obsolete, so duplicate ids and bad nesting must now be argued under 1.3.1 or 4.1.2
•
4.1.3 requires a result count or save confirmation to reach assistive tech without moving focus
P. The accessibility tree and how ARIA works
•
the browser's pruned projection of the DOM, exposed to assistive tech through a platform API
•
the role says what a thing is, a state changes during use, and a property is largely fixed
•
every HTML element already carries a role, so <nav> is navigation with no markup at all
•
ARIA rewrites semantics only; focusability, key handling and styling remain entirely yours to implement
•
prefer native HTML, do not override native semantics, stay keyboard operable, never hide a focusable element, and name every control
•
a wrong role actively misinforms, while missing ARIA at least degrades to the underlying content
•
option needs a listbox ancestor and listitem needs a list , or the relationship is lost
•
role="presentation" is ignored on a focusable element or on one carrying a global ARIA attribute
Q. ARIA attributes in practice
•
it replaces the visible text in the name and is invisible to sighted, voice and translation users
•
it points at existing visible text, which keeps the name and the label from drifting apart
•
supplementary text announced after the name, and frequently interrupted or skipped by users
•
it hides descendants too, yet does nothing to remove them from the tab order
•
display:none hides from everyone, a clip-rect class hides from sight only, aria-hidden hides from assistive tech only
•
it belongs on the control that toggles, never on the region being revealed
•
widely authored and barely supported, so it never substitutes for real focus management
•
aria-pressed marks a toggle button, aria-checked a checkbox or radio, aria-selected an option or tab
R. Accessible name and description computation
•
aria-labelledby , then aria-label , then the native label, alt, legend or caption, then title
•
buttons, links and headings take their name from their text content, while text inputs never do
•
multiple ids join in the order they are listed, separated by spaces, not in DOM order
•
an element may list its own id to combine its own text with another node's
•
a referenced node still contributes its text even when it is visually hidden
•
it never appears on touch, is unreliable on keyboard focus, and is overridden by anything else
•
aria-labelledby cannot reference an id that lives inside a different shadow root
S. Live regions and dynamic announcements
•
polite queues until the user pauses, while assertive interrupts immediately and should be rare
•
a live region inserted together with its message is usually never announced at all
•
role="status" is implicitly polite and role="alert" is implicitly assertive
•
an alert is not a dialog, so it announces without taking focus or blocking the page
•
a client-side route change fires nothing, so announce the new title and move focus deliberately
T. APG patterns and their keyboard contracts
•
move focus in, keep it inside, close on Escape, and return focus to the element that opened it
•
everything behind a modal must be unreachable by tab, by screen-reader browse mode and by pointer
•
showModal() supplies the top layer, background inertness and Escape handling with no custom code
•
one button, aria-expanded , and no focus movement, which makes it the safest expand-collapse widget
•
exactly one child holds tabindex="0" while the rest hold minus one and are reached with arrow keys
•
DOM focus stays on the container while a referenced id marks the virtually focused option
•
the input keeps DOM focus, arrows change the active option, and Escape restores the typed value
•
role="menu" promises an application menu with arrow-key navigation, so a nav list should stay a list
U. Assistive technology behavior
•
screen readers swallow keystrokes in browse mode and pass them through in forms mode, which is why custom keys break
•
the reader works from a snapshot, so a DOM change that fires no notification is never read
•
users jump by heading, landmark, link and form-control lists far more often than they tab linearly
•
"click Submit" only works when the accessible name matches the words rendered on screen
•
at 400% only a slice of the viewport is visible, so a message far from its trigger is never seen
•
the OS replaces your palette, dropping CSS background images and any meaning carried only by color
V. Testing and evaluation method
•
rule engines catch only a minority of WCAG failures and cannot judge whether a name is meaningful
•
put the mouse away and check reachability, visible focus, sensible order and the absence of traps
•
DevTools shows the computed name, role and state, which is the actual contract with assistive tech
•
scope, sample, explore, evaluate, report, sampling templates and states rather than counting pages
•
a script injected at runtime cannot repair markup semantics it did not author
•
the strongest evidence a design works is disabled people completing real tasks with it
W. Mobile and native accessibility
•
the criteria are technology neutral, so only the techniques differ between web and native apps
•
the platform equivalents of accessible name, role and state are set per view rather than by markup
•
honoring the operating system's text-size setting is the mobile form of resize text
•
merging a card's parts into one accessible node cuts the swipe count from many to one
Keentune is not affiliated with or endorsed by the organizations whose documentation informs these maps.
Start practising Web Accessibility
All about Web Accessibility practice
All exam, test, and product names and trademarks are the property of their respective owners and are used here for identification and reference only. Keentune is independent study practice — not affiliated with, authorized, or endorsed by any of these organizations.
© 2026 SportaApp LLC