This page intentionally contains accessibility issues for each of the 16 WCAG rules
Focus outlines are suppressed via CSS outline: none. Keyboard users cannot see which element is active.
Text must have a contrast ratio of at least 4.5:1 (normal) or 3:1 (large text).
This light gray text on a light background fails the contrast requirement.
Another low contrast paragraph — barely readable.
Small text with very poor contrast ratio.
This dark text on a light background passes easily.
Heading levels should not skip (e.g., h1 → h3 without h2).
The page is missing a "Skip to main content" link as the first focusable element. Keyboard users must tab through every navigation item.
There is no <a href="#main">Skip to content</a> before the navigation.
This page is missing <main>, <nav>, and <footer> semantic landmarks.
Content is wrapped in generic <div> elements instead of semantic HTML5 landmarks.
Interactive elements must be reachable via the Tab key.
Generic elements used as buttons without proper ARIA roles or keyboard handling.
Hover-only menus and mouseover patterns without keyboard equivalents.
ARIA roles that conflict with the element's native HTML semantics.
ARIA widget roles require specific state/property attributes.
Dialogs must trap focus, have aria-modal, and return focus on close.
This dialog is missing aria-modal="true" and an accessible name.
Form inputs should have visible labels, and error messages should be programmatically associated.
Dynamic content updates must be announced to screen readers via aria-live.
CSS animations must be suppressed when prefers-reduced-motion is active.
Interactive elements must be at least 24x24 pixels.