A Catalog for Understanding
WCAG 2.2 Success Criteria
WCAG 2.2 defines what it means to be accessible. Here, each success criterion is summarized in plain language and linked to APG patterns you can learn to implement on this site.
For the normative text, refer to the WCAG 2.2 specification(opens in a new tab).
Currently covering 22 success criteria (6 new in WCAG 2.2). Expanding from criteria related to APG patterns on this site.
Perceivable
- 1.1.1Level A
Non-text Content
Provide text alternatives that convey the same meaning for non-text content such as images, icons, and diagrams. Hide purely decorative items from assistive technologies.
- 1.3.1Level A
Info and Relationships
Make visually conveyed structure and relationships -- headings, lists, table associations, label-input pairings -- programmatically determinable through HTML markup or ARIA.
- 1.4.3Level AA
Contrast (Minimum)
Maintain a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text between foreground and background.
- 1.4.11Level AA
Non-text Contrast
Ensure a contrast ratio of at least 3:1 against the background for visual elements essential to operation, such as button borders, form controls, and state-indicating icons.
- 1.4.13Level AA
Content on Hover or Focus
Additional content triggered by hover or focus (e.g. tooltips) must be dismissible, hoverable, and persistent until the user acts.
Operable
- 2.1.1Level A
Keyboard
Ensure all functionality is operable via keyboard alone. Even custom mouse-oriented widgets must be reachable with Tab and operable with Enter, Space, or arrow keys.
- 2.1.2Level A
No Keyboard Trap
Ensure keyboard users can always move focus away from any component. Never trap focus inside a modal with no keyboard exit.
- 2.2.2Level A
Pause, Stop, Hide
Allow users to pause, stop, or hide content that moves, blinks, or auto-scrolls, such as carousels.
- 2.4.3Level A
Focus Order
Ensure the focus order follows a logical sequence that preserves meaning and operability. This includes moving focus into a dialog when opened and back to the trigger when closed.
- 2.4.7Level AA
Focus Visible
Ensure the keyboard focus indicator is visible so users can see which element currently has focus. Do not remove the focus ring.
- 2.4.11Level AANew in 2.2
Focus Not Obscured (Minimum)
Ensure a keyboard-focused element is not entirely hidden behind sticky headers, dialogs, or other overlapping content.
- 2.5.7Level AANew in 2.2
Dragging Movements
For drag-based operations (sliders, reordering, boundary resizing), provide an alternative that does not require dragging, such as clicks or buttons.
- 2.5.8Level AANew in 2.2
Target Size (Minimum)
Ensure interactive targets are at least 24 by 24 CSS pixels or have sufficient spacing. Avoid targets that are too small to activate reliably.
Understandable
- 3.2.1Level A
On Focus
Receiving focus alone must not trigger a change of context such as page navigation or opening a modal.
- 3.2.2Level A
On Input
Changing a setting or entering a value must not automatically cause a change of context unless the user is informed in advance.
- 3.2.6Level ANew in 2.2
Consistent Help
When contact information or help links appear on multiple pages, place them in the same relative order and position on each page.
- 3.3.1Level A
Error Identification
When an input error is automatically detected, identify the item in error and describe the error in text.
- 3.3.2Level A
Labels or Instructions
Provide labels or instructions for form controls so users know what input is expected. Do not rely on placeholder text alone.
- 3.3.7Level ANew in 2.2
Redundant Entry
Do not require users to re-enter information they have already provided within the same process. Auto-fill it or let them select from previously entered values.
- 3.3.8Level AANew in 2.2
Accessible Authentication (Minimum)
Do not require cognitive function tests such as memorization or puzzles as the sole authentication method. Allow alternatives like password managers and copy-paste.
Robust
- 4.1.2Level A
Name, Role, Value
Ensure every UI component exposes its name, role, and current state or value to assistive technologies. Use ARIA to supplement custom widgets.
- 4.1.3Level AA
Status Messages
Convey status notifications like "Saved" or "3 results found" to assistive technologies without moving focus, using live regions (aria-live, role="status", etc.).