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.

DevTools scan target

DevTools maps impact to severity: Errors = critical/serious, Warnings = moderate/minor. This section includes intentional violations across images, forms, buttons, links, headings, ARIA, color, keyboard, tables, and more. Use the DevTools panel to scan and see how each is reported.

Images & non-text content

Image missing alt

Image with redundant alt (e.g. "image")

Image with alt that duplicates adjacent text

Logo: Logo

Link wrapping image with no accessible name

Iframe without title

Forms & labels

Text input without label

Select without label

Textarea without label

Checkbox without label

Radio group without fieldset/legend

Option A Option B

Label not associated (no for/id)Email

Duplicate id

Required field not indicated

aria-describedby points to missing id

Buttons & links

Button with no accessible name

Link with no text

Link with only icon (no accessible name)▶

Same link text, different destinations

Headings & structure

Heading level skip (h1 then h3)

Page title

Skipped h2

Empty heading

Content that is a list but not marked up as list

• Item one• Item two• Item three

List with non-li children (invalid)

Not a list item

ARIA & semantics

Invalid ARIA attribute value

Toggle

aria-hidden with focusable descendant

Duplicate main landmark (second element with role=main)

Duplicate main landmark

Color & contrast

Low contrast text

This paragraph has insufficient contrast.

Very low contrast (fails AAA)

Gray on dark gray; may fail enhanced contrast.

Information conveyed by color only

Required fields are red. (No other indicator.)

Keyboard & focus

Positive tabindex (tabindex=3)

Focusable element with outline:none (best-practice)

Small touch target (< 44px)

Tables

Data table without proper headers

A	B
1	2

Table with th but missing scope

Name	Value
X	1

Empty table header

	Col2
A	B

Language

Language change not marked (e.g. French text)

Welcome. Bonjour le monde. Continue.

Motion & timing

Very small text (may fail AAA)

This text is extremely small.

Blinking content (marquee-style)

Important notice: blinking or auto-updating content can be problematic.

Document & embedded content

Object/embed without accessible name

Skip links & landmarks

Skip link to non-existent idSkip to content

Back to home