UX & Accessibility Test Page

This page contains a mix of accessible and inaccessible elements for testing WCAG 2.1 AA compliance with pa11y and Lighthouse.

Expected Scan Results

CheckExpectedWhy
HTML lang attributePASSlang="en" set on html element
Skip navigation linkPASSSkip link present, visible on focus
ARIA landmarksPASS<nav>, <main>, <header>, <footer> present
Heading hierarchy (good section)PASSCorrect h1 > h2 > h3 sequence
Image alt text (good section)PASSDescriptive alt text with dimensions
Form labels (good section)PASSLabels properly associated via for
Color contrast (good section)PASSDark text on white background (>7:1 ratio)
Focus indicator (good section)PASSVisible 3px outline on focus
Descriptive link textPASSLinks describe their destination
Table headersPASSscope="col" on table headers
Missing alt textFAILImage has no alt attribute
Low color contrastFAILLight gray text on white (~2.3:1 ratio)
Missing form labelFAILInput has no label or aria-label
Skipped heading levelFAILh2 followed directly by h4
Non-descriptive linkFAILLink text is "Click here"
Small touch targetFAILLink is well under 48x48px
Missing focus indicatorFAILButton has outline: none
Autoplay mediaFAILVideo with autoplay attribute
Meta descriptionFAILNo meta description in head
Empty buttonFAILButton with no text or aria-label

Accessible Form PASS

Form inputs properly associated with labels.

Accessible Image PASS

Image with descriptive alt text

This image has a meaningful alt attribute and explicit dimensions.

A green placeholder demonstrating proper alt text usage

Descriptive Links PASS

These links clearly describe where they go:

Missing Image Alt Text FAIL

This image has no alt attribute at all:

Low Color Contrast FAIL

This light gray text on a white background has a contrast ratio of approximately 2.3:1, well below the WCAG 2.1 AA minimum of 4.5:1 for normal text.

Missing Form Label FAIL

This input has no associated label, no aria-label, and no aria-labelledby:

Skipped Heading Level FAIL

The following subsection skips from h2 directly to h4:

This heading skipped h3

Heading levels should not be skipped. Screen readers use heading hierarchy for navigation.

Non-Descriptive Links FAIL

These links do not describe their destination:

Small Touch Target FAIL

This link is far smaller than the recommended 48x48px minimum:

Tiny

Missing Focus Indicator FAIL

This button removes the default focus outline, making keyboard navigation invisible:

Autoplay Media FAIL

This video has the autoplay attribute set:

Empty Button FAIL

This button has no text content, no aria-label, and no accessible name: