Skip to main content
AccessKit

Integration Lab

AccessKit integration lab

Master showcase for the Accessibility Widget and DevTools. DevTools runs WCAG 2.0/2.1/2.2 Level A, AA, AAA and best-practice rules. This page includes a wide range of intentional violations so you can see how each is reported. Use the widget toggles below to see how settings affect the page.

Widget settings preview

Use the AccessKit widget (floating button) to toggle each setting and see the effect on the elements below.

Reduced motion

When Reduced Motion is on, the box and dot below should stop moving.

High contrast

When High Contrast is on, the low-contrast sample below becomes easier to read.

Low-contrast sample text. With high contrast enabled, it should appear more distinct.

Focus indicators

Tab through the buttons and link below to see focus rings when Focus Indicators is on.

Focusable link

Letter, word & line spacing

Use the Letter spacing, Word spacing, and Line height sliders to adjust this paragraph.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Dyslexia-friendly font

Turn on Dyslexia-friendly font to switch page text to Lexend for easier reading.

This sample uses the default font until the setting is enabled.

Font size

Use the font size slider in the widget to scale page text.

Sample text at root size; it scales with the slider.

WCAG Compliance Guidelines

The AccessKit DevTool detects all of the compliance issues demonstrated below and provides actionable guidance on how to resolve each one for full WCAG compliance. Issues are organized by the four WCAG principles, covering every success criterion from Level A through AAA.

Principle 1: Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)WCAG 2.0

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

Image missing alt attribute
Linked image with no accessible name
Image map area without alt textTriangle logo for test map
Image button missing alt attribute
Object element without accessible name
SVG with role="img" missing accessible name
Element with role="img" missing accessible name
Meaningless alt text ("image")image
Filename used as alt textvercel.png
Decorative image with non-empty alt (should be alt="")

Section divider:decorative dividernext section

Functional image alt describes appearance, not actionShould say "Search" not "magnifying glass icon"
Complex image without long description
chart
Chart image needs detailed text description via aria-describedby or adjacent text
CSS background image conveying information
Status: verified
Background image conveys meaning but has no text alternative
Canvas element with no fallback contentNo inner fallback text, no aria-label
CAPTCHA without accessible alternative
xK9mP2
No audio alternative or other accessible method provided

1.2 Time-Based Media

1.2.1 Audio-only and Video-only — Prerecorded (Level A)WCAG 2.0

For prerecorded audio-only or video-only media, a text alternative or audio track describing the content must be provided.

Audio element with no <track> element
Video element with no <track> element
Audio with <track> but no transcript on page
1.2.2 Captions — Prerecorded (Level A)WCAG 2.0

Captions must be provided for all prerecorded audio content in synchronized media.

Video with no captions track
Embedded player (iframe) — captions unverifiable
1.2.3 / 1.2.5 Audio Description (Level A / AA)WCAG 2.0

An audio description track must be provided for prerecorded video so that blind users can understand visual-only content.

Video with no tracks at all
Video with captions but no descriptions track

1.3 Adaptable

1.3.1 Info and Relationships (Level A)WCAG 2.0

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

List with non-list-item children
    Not a list item
Heading level skipped (h3 to h6)

Section title (h3)

Subsection (h6 — skipped h4, h5)
Empty heading element

Heading exists in DOM but contains only whitespace
Data table without proper headers
NameValue
Alpha100
Table header cells missing scope
ItemCount
Widgets42
Paragraph styled as heading (no semantic heading)

This looks like a heading

But it's just a bold paragraph.

Related form fields without fieldset/legend

Shipping address

Logically grouped fields need <fieldset> and <legend> for screen readers
Visual grouping without semantic landmark

Related links

DocumentationSupport
Sidebar-style group uses a plain div — should be <nav> or <aside>
Styling conveys meaning without semantic markup

Please read the terms of service before submitting your application.

Bold and italic convey emphasis but use CSS instead of <strong> / <em>
Layout table without role="presentation"

This table is used purely for layout, not data.

Screen readers will announce this as a data table — needs role="presentation"
Required field indicated only by color
Red asterisk is the only indicator — no aria-required or text "(required)"
1.3.2 Meaningful Sequence (Level A)WCAG 2.0

When the order of content matters, the correct reading sequence can be programmatically determined.

CSS flexbox order overrides DOM sequence
Step 1 (DOM first, visually last)
Step 2 (DOM second, visually first)
Step 3 (DOM third, visually middle)
Visual order (2, 3, 1) differs from DOM order (1, 2, 3) — screen readers read DOM order
CSS grid repositioning content
Headline (DOM first)
Sidebar (DOM second)
Grid placement moves sidebar before headline visually, but DOM has headline first
Absolutely positioned label appears before its field visually but after in DOM
Username
Absolute positioning creates visual order that doesn't match reading/tab order
1.3.3 Sensory Characteristics (Level A)WCAG 2.0

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.

Instruction references shape only

Click the round button to continue.

"Round button" is meaningless to screen reader users
Instruction references visual location only

Use the menu on the right to navigate.

"On the right" has no meaning for screen reader users or on mobile layouts
Instruction references color only

Fields marked in red are required.

Color-blind users and screen reader users cannot distinguish which fields are required
1.3.4 Orientation (Level AA)WCAG 2.1

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific orientation is essential.

Content restricted to portrait orientation

Simulated lock: This component would use CSS@media (orientation: landscape) { display: none }or JavaScript screen.orientation.lock('portrait')to hide content in landscape mode.

Users with mounted devices or motor impairments may not be able to rotate — not detectable via DOM inspection
1.3.5 Identify Input Purpose (Level AA)WCAG 2.1

The purpose of each input field collecting information about the user can be programmatically determined via the autocomplete attribute.

Invalid autocomplete attribute value"full-name" is not a valid autocomplete token — should be "name"
Personal data field missing autocompleteCollects personal data but has no autocomplete="email" — browsers and assistive tech can't auto-fill
Autocomplete value mismatches field purposePhone field has autocomplete="email" — valid token but wrong purpose, not cross-checked automatically
1.3.6 Identify Purpose (Level AAA)WCAG 2.1

The purpose of UI components, icons, and regions can be programmatically determined through role, landmarks, or ARIA attributes.

Icon conveying meaning without programmatic label
⚠Check your settings
Warning icon has no accessible name — its meaning is lost to screen readers
Content region without landmark

Quick actions

Toolbar-like region uses plain div — should have role="toolbar" or appropriate landmark

1.4 Distinguishable

1.4.1 Use of Color (Level A)WCAG 2.0

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Link in text distinguished only by color

Read our terms of service before continuing.

Link has no underline or other non-color indicator — fails link-in-text-block
Error indicated only by red border
Red border is the only error signal — no icon, no error text
Invalid input with color-only error cue
Marked aria-invalid="true" with red border but no error message via aria-describedby or aria-errormessage — error is conveyed by color alone
Status indicators using color only
API Server
Database
Cache
Green/red/amber dots convey status with no text label ("Online", "Down", "Degraded")
Chart legend using color only
Revenue
Profit
Costs
Data series distinguished only by color — no patterns, dashes, or shapes
Current page indicated only by color"Dashboard" is the current page but only indicated by a different text color — no aria-current, bold, or underline
1.4.2 Audio Control (Level A)WCAG 2.0

If audio plays automatically for more than 3 seconds, a mechanism is provided to pause, stop, or control the volume independently.

Audio element with autoplay and no controlsAudio set to autoplay with no controls attribute — the element is invisible, so users have no way to pause, stop, or control volume
Auto-playing audio with no pause control
🔊Background music playing...
Simulates JS-triggered audio (.play()) with no visible stop/mute button — JS-initiated playback is not detectable via DOM
Audio embedded via iframe with autoplayThird-party iframe may autoplay audio — cross-origin iframe contents cannot be inspected
1.4.3 Contrast — Minimum (Level AA)WCAG 2.0

Text has a contrast ratio of at least 4.5:1 (3:1 for large text). Contrast failures are reliably detected — no additional examples needed.

1.4.4 Resize Text (Level AA)WCAG 2.0

Text can be resized without assistive technology up to 200% without loss of content or functionality.

Viewport meta disabling user scaling<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">user-scalable=no and maximum-scale < 5 are detected — shown as code since meta tags go in <head>
Text with fixed pixel sizes

This text uses a fixed 10px font size. At 200% browser zoom it may still be too small to read comfortably because it doesn't use relative units (rem/em).

Fixed px font sizes are not flagged — would need zoom simulation to detect
Container that clips content on resize

This long text content will be clipped because the container has overflow:hidden and fixed height, making it inaccessible when zoomed.

Content is cut off at the container boundary — gets worse at 200% zoom
1.4.5 Images of Text (Level AA)WCAG 2.0

If the same visual presentation can be made with text, text is used to convey the information rather than images of text (exceptions: logos, customizable).

Image used for text that could be HTML/CSS
Simulates an image-of-text banner — this could be achieved with CSS styling instead. Whether an image contains text cannot be detected automatically (would require OCR).
Button rendered as image of text
Subscribe Now
Button text baked into an image — can't be resized, restyled, or translated
1.4.6 Contrast — Enhanced (Level AAA)WCAG 2.0

Text has a contrast ratio of at least 7:1 (4.5:1 for large text). Enhanced contrast failures are reliably detected — no additional examples needed.

1.4.7 Low or No Background Audio (Level AAA)WCAG 2.0

For prerecorded audio with speech, background sounds are at least 20dB lower than foreground speech, or can be turned off.

Audio with loud background music over speechBackground music competes with speech — requires audio signal analysis to detect, not automatable via DOM
1.4.8 Visual Presentation (Level AAA)WCAG 2.0

For blocks of text: colors are selectable, width ≤80 characters, text is not justified, line spacing ≥1.5, paragraph spacing ≥1.5x line spacing, and text is resizable to 200% without horizontal scrolling.

Justified text creating uneven spacing

This paragraph is fully justified. Justified text creates uneven word spacing that makes reading more difficult, especially for users with dyslexia or cognitive disabilities. The rivers of white space can be distracting.

Insufficient line and paragraph spacing

First paragraph with very tight line spacing. This makes it hard to track which line you are reading and can cause lines to blur together.

Second paragraph with minimal paragraph spacing. The gap between paragraphs should be at least 1.5 times the line spacing.

Text block exceeding 80 characters per line

This is an extremely long line of text that is intentionally not constrained to 80 characters or fewer per line. Long lines force readers to move their eyes a long distance from the end of one line to the beginning of the next, making it easy to lose track of which line comes next, which is particularly problematic for users with reading or cognitive disabilities.

Line width should be constrained to ~80 characters (about 80ch or 45em)
1.4.9 Images of Text — No Exception (Level AAA)WCAG 2.0

Images of text are only used for pure decoration or where a particular presentation of text is essential (e.g., logotypes). Stricter than 1.4.5 — same detection gaps apply.

Decorative heading rendered as image
Simulates a decorative text image — this styling is achievable with CSS, so an image is not justified
1.4.10 Reflow (Level AA)WCAG 2.1

Content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at 320px width (400% zoom).

Fixed-width container causing horizontal scroll

This content is inside a fixed 500px-wide container. On narrow viewports or at high zoom, it forces horizontal scrolling.

Wide content that doesn't reflow (non-table)
Card 1
Card 2
Card 3
Horizontal card layout doesn't stack vertically at narrow widths — needs responsive breakpoints
1.4.11 Non-text Contrast (Level AA)WCAG 2.1

UI components and meaningful graphics have a contrast ratio of at least 3:1 against adjacent colors.

Input with low-contrast border
Input border has very low contrast against background — hard to see the field boundary
Custom toggle with insufficient contrast
Notifications
Toggle track and thumb have <3:1 contrast against background — non-text contrast is not checked automatically
Meaningful icon with insufficient contrast
3 layers selected
Icon conveys meaning but has very low contrast against its background
1.4.12 Text Spacing (Level AA)WCAG 2.1

No loss of content or functionality when overriding: line height to 1.5x font size, paragraph spacing to 2x font size, letter spacing to 0.12x font size, word spacing to 0.16x font size.

Fixed-height container clips text when spacing increases

This text has WCAG-mandated spacing overrides applied. The fixed-height container clips it.

Container uses overflow:hidden with fixed height — text disappears when spacing is overridden
Text overlapping adjacent elements

Expanded text spacing

This element overlaps when text above grows due to spacing overrides
Negative margin or absolute positioning causes overlap — requires CSS override testing
1.4.13 Content on Hover or Focus (Level AA)WCAG 2.1

Content that appears on hover or focus is dismissible (Escape), hoverable (pointer can move to new content), and persistent (stays visible until dismissed or trigger is removed).

Tooltip not dismissible with Escape
Tooltip appears on hover but can't be dismissed with Escape key
Hover content not hoverable (vanishes on pointer move)
Gap between trigger and popup means pointer loses hover state — content disappears mid-read
Hover content that auto-dismisses (not persistent)

Simulated: A toast or tooltip that appears on hover/focus but automatically disappears after 3 seconds, before the user finishes reading.

Content must persist until the user dismisses it or moves focus/pointer away — requires interaction testing to detect

Principle 2: Operable

User interface components and navigation must be operable.

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)WCAG 2.0

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

Scrollable region not keyboard-focusable

This scrollable container has no tabindex, so keyboard users cannot scroll it. Content continues below the visible area and requires scrolling to read. A keyboard user would be unable to access the rest of this text because the container cannot receive focus.

Clickable div not keyboard-focusable
Click me (div with onClick but no role, tabIndex, or key handler)
Not reachable via Tab key and can't be activated with Enter/Space
Drag-and-drop with no keyboard alternative
📋 Draggable item 1
📋 Draggable item 2
Reorder only works via mouse drag — no arrow key or button alternative
Mouse-only event handlers
Hover or click to reveal content (onMouseDown + onMouseOver only)
No onKeyDown, onFocus, or other keyboard equivalents provided
Custom slider not keyboard-operable
0100
Custom range slider has no role="slider", no tabIndex, no arrow key handling
Content only reachable by mouse hover
Hover over this text for more info
No keyboard-accessible way to reveal the hidden content
2.1.2 No Keyboard Trap (Level A)WCAG 2.0

If keyboard focus can be moved to a component, focus can be moved away from that component using only a keyboard. If it requires non-standard exit keys, the user is advised.

Simulated modal without Escape key handling

Modal Dialog

This simulates a modal that traps focus inside but has no Escape key handler to close it and no visible close button.

Focus trap with no escape — keyboard user is stuck. Requires runtime focus traversal testing.
Embedded widget that traps focus

Simulates a third-party embedded widget (date picker, rich text editor) where Tab cycles only within the widget and never returns to the main page.

Keyboard traps require automated Tab/Shift+Tab traversal testing to detect
2.1.3 Keyboard — No Exception (Level AAA)WCAG 2.0

All functionality is operable through a keyboard — same as 2.1.1 but with no exceptions for any content type. Even path-dependent input (freehand drawing, flight simulators) must have a keyboard alternative.

Freehand drawing canvas with no keyboard alternativeDrawing canvas only responds to mouse/touch — no keyboard method to draw shapes. Under AAA, even path-dependent input needs an alternative.
2.1.4 Character Key Shortcuts (Level A)WCAG 2.1

If single-character keyboard shortcuts exist, they can be turned off, remapped, or are only active when the relevant component has focus.

Global single-character shortcuts

Keyboard shortcuts

Saves
Deleted
Newn
Single-key shortcuts (no Ctrl/Alt modifier) active globally — speech input users may accidentally trigger them. No option to remap or disable.
Non-remappable shortcut with no disable option

Press ? anywhere to open help — this shortcut cannot be turned off or remapped.

Single-character keydown/keypress listeners are not detectable via DOM inspection

2.2 Enough Time

2.2.1 Timing Adjustable (Level A)WCAG 2.0

For each time limit set by the content, the user can turn off, adjust, or extend the limit (with exceptions for real-time and essential timing).

Meta refresh redirecting after timeout<meta http-equiv="refresh" content="30; url=/session-expired">Meta refresh tags are detected — shown as code since this goes in <head>
JS session timeout with no warning

Session active

Simulated: setTimeout(logout, 300000) — user is logged out after 5 minutes with no warning dialog or extension option.

Countdown timer with no extension option
04:59Time remaining to complete form
No "extend time" button — users with disabilities may need more time
Auto-advancing slideshow with no pause control

Slide 2 of 5

Auto-advances every 4 seconds — no pause button

2.2.2 Pause, Stop, Hide (Level A)WCAG 2.0

For moving, blinking, scrolling, or auto-updating content, users can pause, stop, or hide it.

Deprecated marquee element

<marquee> element — deprecated scrolling element

CSS animation with no pause control
Loading forever...
Infinite CSS animation with no user control to pause — only deprecated elements like <blink> and <marquee> are detected automatically
Auto-scrolling news ticker

Breaking: New accessibility standard released

Update: Browser support for ARIA 1.3 grows

Report: 97% of home pages have WCAG failures

Simulates a continuously scrolling feed with no pause/stop button
Auto-playing video background
Hero section with video BG
Auto-playing background video with no visible pause control — distracting for users with attention disorders
Animated GIF that loops infinitely
⚙
Continuously animated content (GIF, SVG, CSS) with no way for users to stop it
2.2.3 No Timing (Level AAA)WCAG 2.0

Timing is not an essential part of any event or activity presented by the content, except for real-time events and synchronized media.

Timed quiz with no untimed alternative

Question 3 of 10

00:28

What does WCAG stand for?

Assessment enforces time limits with no option for an untimed version
2.2.4 Interruptions (Level AAA)WCAG 2.0

Interruptions can be postponed or suppressed by the user, except for emergencies involving health, safety, or property.

Non-dismissible notification interrupting workflow
🔔

New message from Support

"Your ticket has been updated. Click to view."

Popup notification cannot be suppressed or postponed — no "Do not disturb" setting
2.2.5 Re-authenticating (Level AAA)WCAG 2.0

When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating.

Session expiry discards unsaved form data

Session expired

Your session has timed out. Please log in again.

All unsaved form data has been lost.

After re-authentication, the user should be returned to the same state with data preserved
2.2.6 Timeouts (Level AAA)WCAG 2.0

Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours.

No warning about inactivity timeout

No warning that leaving this page idle for 15 minutes will discard all responses

2.3 Seizures and Physical Reactions

2.3.1 Three Flashes or Below Threshold (Level A)WCAG 2.0

No content flashes more than three times per second, or the flash is below general flash and red flash thresholds.

Content that could flash rapidly (simulated — intentionally static)

Simulates a strobe-like animation — kept static here for safety. Real violations would involve CSS animations or JS toggling light/dark more than 3 times per second.

Requires frame-by-frame rendering analysis to detect luminance changes exceeding 3 Hz — not automatable via DOM
2.3.2 Three Flashes (Level AAA)WCAG 2.0

No content flashes more than three times per second — stricter than 2.3.1 with no threshold exceptions allowed.

Any flashing content above 3Hz (no exceptions)

Under the stricter AAA criterion, all flashing content above 3 times/second is prohibited — even if below the general flash thresholds permitted by 2.3.1. Same detection gap applies.

2.3.3 Animation from Interactions (Level AAA)WCAG 2.0

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or information being conveyed.

Scroll-triggered animation

Simulated: Elements fly in from the side, fade, or scale as the user scrolls — parallax and scroll-linked animations with no way to disable them.

No prefers-reduced-motion check — can trigger vestibular disorders
Page transition animation with no opt-out

Simulated: Full-page slide/zoom transitions between routes that cannot be turned off and don't respect the reduced-motion media query.

Interaction-triggered animations and reduced-motion compliance require runtime testing to detect

2.4 Navigable

2.4.1 Bypass Blocks (Level A)WCAG 2.0

A mechanism is available to bypass blocks of content that are repeated on multiple pages. Missing skip links and landmarks are reliably detected.

2.4.2 Page Titled (Level A)WCAG 2.0

Web pages have titles that describe topic or purpose.

Empty or missing page title<title></title>Empty or missing <title> elements are detected
Generic/unhelpful page title<title>Untitled Document</title>Title exists but doesn't describe the page — only presence is checked, not quality
SPA title not updated on route change

Simulated: Client-side navigation changes the page content to "Settings > Notifications" but document.title still reads "Dashboard — MyApp" from the previous view.

2.4.3 Focus Order (Level A)WCAG 2.0

If content can be navigated sequentially, components receive focus in an order that preserves meaning and operability.

Positive tabindex disrupting natural order
Positive tabindex values create unpredictable focus order
Modal that doesn't return focus on close

Confirm delete?

When this dialog closes, focus jumps to the top of the page instead of the trigger button
Dynamic content not receiving focus

New results appear here but focus stays on the button

Screen readers don't announce new content — needs focus management or live region
CSS layout breaking visual/tab order match
flex-direction: row-reverse makes Tab order opposite to visual order
2.4.4 Link Purpose — In Context (Level A)WCAG 2.0

The purpose of each link can be determined from the link text alone, or from the link text together with its context.

Link with no accessible name

Check out our for details.

Empty link text and empty aria-label — link has no accessible name
Ambiguous "click here" / "read more" links

New features are available. Click here

Updated privacy policy. Read more

Pricing has changed. Learn more

Link text is meaningless without surrounding context — screen readers listing links hear "Click here, Read more, Learn more"
Identical link text, different destinations

Product A — Details

Product B — Details

Both links say "Details" but go to different pages — confusing when links are listed out of context
2.4.5 Multiple Ways (Level AA)WCAG 2.0

More than one way is available to locate a web page within a set of pages (e.g., navigation + search + sitemap).

Site with only one navigation mechanism

Only a nav menu is provided — no search, sitemap, A-Z index, or table of contents. Requires multi-page crawling to detect.

2.4.6 Headings and Labels (Level AA)WCAG 2.0

Headings and labels describe topic or purpose.

Empty table header
Value
Row 1100
Vague/non-descriptive headings

Section 1

Content about account settings...

Section 2

Content about notification preferences...

Headings say "Section 1/2" instead of describing the actual topic
Vague form labels
Labels exist but don't describe what to enter — only label presence is checked, not descriptiveness
2.4.7 Focus Visible (Level AA)WCAG 2.0

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Inline style: outline: none
Link (inline)
✅ Should be caught — inline style suppresses outline with no alternative
CSS class: :focus { outline: none }
✅ Should be caught — CSS rule suppresses :focus/:focus-visible outline with no alternative
CSS reset: base element { outline: none }
Link (global reset)
✅ Should be caught — outline removed on base element, no :focus rule to restore it
outline: none + box-shadow alternative
❌ Should NOT be caught — outline removed but box-shadow provides visible focus indicator
outline: none + border-color alternative
❌ Should NOT be caught — outline removed but border-color changes on focus
outline: none + background-color alternative
❌ Should NOT be caught — outline removed but background changes on focus
Tailwind-style: outline: 2px solid transparent
✅ Should be caught — Tailwind's focus:outline-none emits transparent outline, not outline:none
Global reset + :focus-visible restore
❌ Should NOT be caught — outline:none on base, but :focus-visible restores a visible outline
Default browser focus ring (no author CSS)
Default link
❌ Should NOT be caught — no author CSS touches outline, browser default ring is visible
Focus indicator with insufficient contrast⚠️ Edge case — focus ring exists but is nearly invisible against the background
2.4.8 Location (Level AAA)WCAG 2.0

Information about the user's location within a set of web pages is available (breadcrumbs, site map highlighting, step indicators).

No location indicator on page

Settings > Notifications > Email preferences

This page has no breadcrumbs, no highlighted navigation item, and no step indicator — users cannot tell where they are in the site hierarchy.

2.4.9 Link Purpose — Link Only (Level AAA)WCAG 2.0

The purpose of each link can be identified from the link text alone — stricter than 2.4.4, surrounding context does not help.

Links requiring context to understand

WCAG 2.1 Guidelines — More

AccessKit Documentation — More

"More" is meaningless without the preceding text — under AAA, link text alone must convey purpose
2.4.10 Section Headings (Level AAA)WCAG 2.0

Section headings are used to organize content — every distinct content section has a heading, not just some.

Content sections without headings

Account information section — no heading provided.

Billing details section — no heading provided.

Notification settings section — no heading provided.

Three distinct content areas with no headings — screen reader users cannot navigate by section
2.4.11 Focus Not Obscured — Minimum (Level AA)WCAG 2.2WCAG 2.2

When a UI component receives keyboard focus, it is not entirely hidden by author-created content (sticky headers, floating toolbars, chat widgets).

Focusable element entirely behind a sticky overlay
Sticky banner covering content below
Hidden link behind sticky banner
The focusable link is entirely covered by the sticky element. Triggers accesskit-focus-obscured
Cookie banner covering focusable content

Simulated: A cookie consent banner with position: fixed; bottom: 0 covering form inputs and links at the bottom of the page. Keyboard users tab to an element entirely obscured by the banner.

The focused element's rect is entirely within the overlay's rect — fails 2.4.11
2.4.12 Focus Not Obscured — Enhanced (Level AAA)WCAG 2.2

When a UI component receives keyboard focus, no part of the component is hidden by author-created content (stricter than 2.4.11 — even partial overlap fails).

Sticky header partially covering a focusable button
Sticky header
The top portion of the button is hidden under the sticky header. Passes 2.4.11 (not entirely hidden) but triggers accesskit-focus-obscured-enhanced
Floating CTA button overlapping a link

Simulated: A "Get Started" floating action button (position: fixed; bottom: 20px) partially overlaps a footer link when that link receives focus. 1px of overlap fails AAA.

Passes 2.4.11 (not entirely hidden) but fails 2.4.12 (partial overlap)
2.4.13 Focus Appearance (Level AAA)WCAG 2.2

Focus indicator area is at least 2px thick around the entire perimeter and has at least 3:1 contrast ratio between focused and unfocused states.

1px focus outline — below 2px-perimeter threshold
Focus indicator is only 1px wide (via :focus CSS rule) — area is below the minimum 2×perimeter threshold. Triggers accesskit-focus-appearance-insufficient
Inline style thin outline — overrides browser defaults
Inline outline: 1px solid #999 overrides the browser default focus ring, making it the effective focus indicator at only 1px. No :focus CSS rule present. Triggers accesskit-focus-appearance-insufficient
Low-contrast focus indicator
Low contrast focus link
Focus ring (#ddd on #f0f0f0) has less than 3:1 contrast ratio against adjacent background

2.5 Input Modalities

2.5.1 Pointer Gestures (Level A)WCAG 2.1

All functionality using multipoint or path-based gestures (pinch, swipe, drag) can be operated with a single pointer without a path-based gesture, unless essential.

Pinch-to-zoom map with no button controls
🗺

Zoom requires pinch gesture — no +/- buttons provided

Users who cannot perform multipoint gestures have no zoom alternative
Swipe-only carousel with no arrow buttons

Slide 1

← Swipe to navigate →

No prev/next buttons — path-based swipe is the only way to change slides
2.5.2 Pointer Cancellation (Level A)WCAG 2.1

For single-pointer functionality, at least one of: no down-event trigger, abort/undo available, up-event reverses down-event, or down-event is essential.

Action triggers on pointer down (no cancellation)
Delete item (fires on mousedown)
Destructive action fires on pointer down — user can't cancel by dragging pointer away before releasing. Should use click (up-event) instead.
No undo after accidental pointer activation

Simulated: Tapping "Send" immediately submits with no confirmation and no undo — accidental taps (common for users with motor impairments) cannot be reversed.

2.5.3 Label in Name (Level A)WCAG 2.1

For components with visible text labels, the accessible name contains the visible label text.

Accessible name doesn't contain visible textVisible label is "Send" but aria-label is "Submit form data" — voice control users saying "click Send" won't match
Icon button with unrelated aria-labelVisual "✕" suggests "Close" but aria-label says "Navigate to previous page" — tooltip also absent
2.5.4 Motion Actuation (Level A)WCAG 2.1

Functionality triggered by device motion (shake, tilt) can also be operated via a UI control, and motion response can be disabled.

Shake-to-undo with no button alternative

Simulated: "Shake your device to undo the last action." No on-screen undo button and no setting to disable motion response.

Uses DeviceMotionEvent listener — users with mounted devices or motor impairments cannot trigger this.

2.5.5 Target Size — Enhanced (Level AAA)WCAG 2.1

Pointer targets are at least 44×44 CSS pixels, with exceptions for inline, user-agent-controlled, essential, and equivalent targets.

Touch targets smaller than 44×44px
1
24×24px buttons — users with motor impairments may mis-tap adjacent controls
Closely packed small links
Terms·Privacy·Cookies·Legal·DMCA
Footer links with minimal padding and tight spacing — hard to tap accurately on touch devices
2.5.6 Concurrent Input Mechanisms (Level AAA)WCAG 2.1

Content does not restrict use of input modalities available on the platform, except where the restriction is essential or required for security.

Touch-only interface blocking keyboard/mouse input

Simulated: A web app detects a touchscreen and disables mouse and keyboard input, forcing touch-only interaction. Users with external keyboards or switch devices connected to tablets are locked out.

Input modality should not be restricted — users may switch between touch, mouse, and keyboard at any time
2.5.7 Dragging Movements (Level AA)WCAG 2.2

All functionality using dragging can be achieved with a single pointer without dragging, unless dragging is essential or determined by the user agent.

Draggable list item with no single-pointer alternative

📦 Item 1 — drag to reorder

📦 Item 2 — drag to reorder

📦 Item 3 — drag to reorder

No move up/down buttons provided — users who cannot drag have no way to reorder. Triggers accesskit-drag-without-alternative
Custom slider with drag-only interaction

No +/- step buttons and no tabindex — drag is the only way to change the value

Should provide keyboard increment (arrow keys) or adjacent +/- buttons as alternative
Kanban board with drag-only card movement

To Do

Task A

In Progress

Task B

Done

Cards can only be moved via drag — no context menu, keyboard shortcut, or move button provided
2.5.8 Target Size — Minimum (Level AA)WCAG 2.2

The size of the target for pointer inputs is at least 24×24 CSS pixels (with exceptions for spacing, inline targets, and user-agent controls).

Tiny icon buttons below 24×24px
16px, 18px, and 20px buttons — all below the 24×24 minimum. Detected by axe-core's target-size rule (enabled via wcag22aa tag)
Closely packed footer links without sufficient spacing
PrivacyTermsCookiesGDPRLegal
Links are small and packed tightly — neither meeting 24px size nor 24px spacing exception

Principle 3: Understandable

Information and the operation of the user interface must be understandable.

3.1 Readable

3.1.1 Language of Page (Level A)WCAG 2.0

The default human language of the page can be programmatically determined. Missing or invalid lang attributes on the html element are reliably detected.

3.1.2 Language of Parts (Level AA)WCAG 2.0

The human language of each passage or phrase can be programmatically determined (except for proper names, technical terms, and indeterminate language).

Invalid lang attribute value

This text has an invalid language code.

Invalid lang attribute values are detected — "xx-invalid" is not a valid BCP 47 tag
Foreign text without lang attribute
"Le cœur a ses raisons que la raison ne connaît point."
— Blaise Pascal
French quote in an English page with no lang="fr" wrapper — screen readers will mispronounce it using English phonetics
Mixed-language content with no lang marking

Our company motto is "Über alles hinaus streben" which means "strive beyond everything." We also follow the principle of "改善" (continuous improvement).

German and Japanese phrases embedded in English text — each needs its own lang attribute. Detecting which text is foreign requires NLP language detection.
3.1.3 Unusual Words (Level AAA)WCAG 2.0

A mechanism is available for identifying definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.

Jargon and idioms with no definitions

We need to dogfood the new MVP before the stand-up. Make sure to ping the stakeholders and avoid any bikeshedding during the review.

Industry jargon used without definitions, glossary links, or <dfn> elements
3.1.4 Abbreviations (Level AAA)WCAG 2.0

A mechanism for identifying the expanded form of abbreviations is provided.

Abbreviations without expansion

The API uses REST over HTTPS with JWT for auth. Check the SLA for QoS guarantees. Our CDN handles TLS termination.

Multiple abbreviations (API, REST, HTTPS, JWT, SLA, QoS, CDN, TLS) with no <abbr title="..."> elements, first-occurrence expansions, or linked glossary
3.1.5 Reading Level (Level AAA)WCAG 2.0

When text requires more than a lower secondary education reading level, a supplemental version or summary is available.

Complex text with no simplified alternative

Notwithstanding the aforementioned stipulations, the indemnification provisions herein shall be construed in accordance with the applicable jurisdictional prerequisites, whereby the contracting parties acknowledge their fiduciary obligations pursuant to the regulatory framework established thereunder.

Legal/academic language well above lower secondary reading level — no plain-language summary or simplified version provided. Requires readability analysis (Flesch-Kincaid).
3.1.6 Pronunciation (Level AAA)WCAG 2.0

A mechanism is available for identifying specific pronunciation of words where meaning is ambiguous without pronunciation (e.g., homographs).

Ambiguous homographs with no pronunciation guide

The lead developer will lead the project. Please read what you read yesterday. The bass player caught a bass.

"Lead", "read", and "bass" have different meanings depending on pronunciation — no phonetic guide, ruby annotation, or audio clip provided

3.2 Predictable

3.2.1 On Focus (Level A)WCAG 2.0

When any UI component receives focus, it does not initiate a change of context (page navigation, form submission, or significant DOM change).

Focus triggers page navigation
Simulated: tabbing to this select would trigger an onFocus handler that navigates away — user loses their place unexpectedly
Focus triggers modal/popup opening
Simulated: focusing this input opens a full-screen search overlay — context changes without user action beyond tabbing
3.2.2 On Input (Level A)WCAG 2.0

Changing the setting of any UI component does not automatically cause a change of context unless the user has been advised beforehand.

Select auto-navigates on change
Simulated: onChange handler navigates to category page — keyboard users scrolling through options with arrow keys trigger navigation on each option
Checkbox change triggers form submission
Simulated: checking this box auto-submits the form — no explicit submit button, no advance warning of this behavior
Radio selection triggers major content change
Simulated: selecting a radio replaces the entire page content and scrolls to top — context change without explicit "Apply" button
3.2.3 Consistent Navigation (Level AA)WCAG 2.0

Navigational mechanisms that are repeated on multiple pages occur in the same relative order each time, unless the user initiates a change.

Navigation in different order on page A
Same nav in different order on page BSame links reordered — requires multi-page crawling to detect
3.2.4 Consistent Identification (Level AA)WCAG 2.0

Components with the same functionality are identified consistently across pages.

Same function, inconsistent labels across pages
Page A:
Page B:
Page C:
Same search function labeled differently on each page — confusing for screen reader users. Requires multi-page analysis.
3.2.5 Change on Request (Level AAA)WCAG 2.0

Changes of context are initiated only by user request, or the user can turn off such changes.

Auto-redirect with no user control

Simulated: After 5 seconds on this page, the user is automatically redirected to a "new version" of the site. No option to stay on the current page or disable auto-redirect.

Under AAA, all context changes must be user-initiated or opt-out-able
3.2.6 Consistent Help (Level A)WCAG 2.2

If help mechanisms (contact info, chat, FAQ) are repeated across pages, they appear in the same relative order. This page includes help elements that trigger the consistency inventory check.

Help mechanisms present on this page

Phone: +1 (555) 123-4567

accesskit-consistent-help-inventory detects these and reminds you to verify they appear in the same relative order on all pages
Chat widget detected

💬 Chat with us

Simulated Intercom-style chat widget

Widget patterns (Intercom, Zendesk, Drift) are detected and included in the help mechanism inventory for cross-page consistency verification
Contact form mechanism
Contact forms are detected as help mechanisms — verify this form appears in the same footer/section position across all pages of the site

3.3 Input Assistance

3.3.1 Error Identification (Level A)WCAG 2.0

If an input error is automatically detected, the item in error is identified and the error is described to the user in text.

Error indicated only by red border (no text)
Red border is the only error signal — no error text message visible
Error icon without text description
Warning icon shown but no text explains what's wrong — icon has no accessible name
Error message not associated with input

Username must be at least 3 characters.

Error text is visible but not linked via aria-describedby or aria-errormessage — screen readers won't announce it when the input is focused
aria-invalid without error message
Input is marked aria-invalid="true" but has no aria-describedby or aria-errormessage — assistive technology knows it's invalid but not why
aria-invalid with broken error reference
aria-describedby points to an ID that doesn't exist — error description is lost
3.3.2 Labels or Instructions (Level A)WCAG 2.0

Labels or instructions are provided when content requires user input.

Input without associated labelPlaceholder is not a label — missing label association is detected
Select without associated label
Label doesn't describe expected formatLabel says "Date" but doesn't specify expected format (MM/DD/YYYY? YYYY-MM-DD?)
Required field not indicated in labelHTML required attribute set but the label doesn't indicate the field is mandatory
3.3.3 Error Suggestion (Level AA)WCAG 2.0

If an input error is detected and suggestions for correction are known, they are provided to the user (unless it would compromise security).

Generic error message with no suggestion

Invalid input.

"Invalid input" gives no guidance — should say "Enter a complete email (e.g., user@example.com)"
Format error without specifying correct format

Wrong format.

Doesn't tell the user what the right format is — should say "Use MM/DD/YYYY format"
3.3.4 Error Prevention — Legal, Financial, Data (Level AA)WCAG 2.0

For pages with legal commitments, financial transactions, or data modifications: submissions are reversible, data is verified, or a confirmation step exists.

Financial form with no review/confirm step

Transfer funds

No review page, no confirmation dialog, and no undo option — a single click initiates an irreversible financial transaction
3.3.5 Help (Level AAA)WCAG 2.0

Context-sensitive help is available for text input fields.

Complex form field with no help text
Technical input with no help link, tooltip, or explanatory text — users unfamiliar with regex have no guidance
3.3.6 Error Prevention — All (Level AAA)WCAG 2.0

For all forms that require user data submission: submissions are reversible, data is checked, or a confirmation mechanism exists. Same as 3.3.4 but applies to all forms, not just legal/financial.

Profile update with no confirmation

No review step and no undo — under AAA, even routine form submissions should be reversible or confirmed

3.3.7 Redundant Entry (Level A)WCAG 2.2

Information previously entered by the user that is required again in the same process is either auto-populated or available to select.

Multi-step form without autocomplete on personal fields
Step 2 of 3
Personal fields lack autocomplete attributes — users may need to re-type previously entered data. Triggers accesskit-redundant-entry-risk
Shipping + billing addresses with no "same as" option
Shipping
Billing
No "Same as shipping" checkbox — users must re-enter their entire address. Triggers accesskit-redundant-entry-risk
3.3.8 Accessible Authentication — Minimum (Level AA)WCAG 2.2

A cognitive function test is not required for authentication unless a mechanism assists the user (password manager support, copy-paste, autofill).

Password field blocking paste
Paste is blocked on the password field — prevents password managers from filling. Triggers accesskit-auth-paste-blocked
Login form missing autocomplete attributes
Neither username nor password field has autocomplete attribute — password managers may not recognize these fields. Triggers accesskit-auth-missing-autocomplete
3.3.9 Accessible Authentication — Enhanced (Level AAA)WCAG 2.2

No cognitive function tests at all for authentication — even image-recognition CAPTCHAs ("select all traffic lights") are failures at this level.

reCAPTCHA on authentication page

☑ I'm not a robot

reCAPTCHA — Privacy · Terms

CAPTCHA on auth page imposes a cognitive test. At AAA, even image-recognition challenges fail. Triggers accesskit-auth-captcha-cognitive
Image-recognition CAPTCHA challenge

Select all images with traffic lights

1
2
3
4
5
6
7
8
9
Image recognition CAPTCHA — allowed at AA (2.4.11 exception) but fails at AAA. Replace with passkey, magic link, or OTP authentication

Principle 4: Robust

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

4.1 Compatible

4.1.2 Name, Role, Value (Level A)WCAG 2.0

For all UI components, the name and role can be programmatically determined; states, properties, and values can be programmatically set; and notifications of changes are available to user agents and assistive technologies.

Invalid ARIA attribute value
Toggle (aria-pressed="not-a-boolean")
Invalid ARIA attribute values are detected — "not-a-boolean" is not valid for aria-pressed
Focusable element inside aria-hiddenButton is focusable via keyboard but hidden from assistive technology
Custom tabs with wrong keyboard interaction
Panel content
Role is correct but arrow key navigation between tabs is not implemented — ARIA attributes are checked but keyboard interaction patterns require runtime testing
ARIA state not matching visual state

This menu is visually open

but aria-expanded="false"

Menu is expanded visually but aria-expanded says it's closed — screen readers get wrong state
Interactive widget with no role or name
Submit order
Looks and acts like a button but is a bare div — no role, no keyboard access, invisible to assistive technology as an interactive element
Slider value not matching visual position
0aria-valuenow=25 but thumb at 75%100
Visual slider shows 75% but aria-valuenow reports 25 — screen readers get wrong value
4.1.3 Status Messages (Level AA)WCAG 2.0

Status messages can be programmatically determined through role or properties so assistive technologies can present them without receiving focus.

✅ Correct: role="status" (implicit polite)
3 results found
Screen readers announce this politely when content changes
✅ Correct: role="alert" (implicit assertive)Screen readers interrupt to announce this immediately
⚠️ Issue: aria-live="off" silences updates
Loading complete — 42 items loaded
Content changes won't be announced to screen readers
⚠️ Issue: role="alert" with aria-live="polite"Alert semantics expect assertive but aria-live overrides to polite
⚠️ Issue: assertive for non-critical content
Showing 1-10 of 256 search results
Search result counts should use polite, not assertive — interrupts workflow
✅ Correct: polite with aria-atomic
Step 2 of 5 — Shipping address
Reads the entire region when any part changes, keeping context intact
❌ Missing: status message with no live region at all
Form saved successfully!
This looks like a status message visually but has no role or aria-live — screen readers won't announce it. Needs role="status" or aria-live="polite". (Cannot be detected automatically without heuristics)

Back to home