Accessibility Playground
Learn accessibility by fixing real issues! Practice makes perfect.
Accessibility Issues
Insufficient Colour Contrast
Text colour is too light against the background
Missing Alt Text
Image is missing alternative text for screen readers
Missing Heading Structure
Page lacks proper heading hierarchy
Button Without Accessible Name
Button only contains an icon without text or aria-label
Form Input Without Label
Input field is missing an associated label
Link Without Accessible Text
Link only contains an image without descriptive text
Touch Target Too Small
Interactive element is too small for easy touch interaction
Missing Focus Indicator
Interactive element has no visible focus indicator
Missing Page Title
Page is missing a descriptive title element
Missing Language Attribute
HTML document is missing language declaration
Empty Heading Element
Heading element contains no text content
Duplicate ID Values
Multiple elements share the same ID value
Missing Table Headers
Data table is missing header cells
Missing Skip Link
Page lacks a skip link for keyboard navigation
Insufficient Colour Contrast (Link)
Link text has poor contrast against background
Missing Form Validation
Form input lacks proper validation and error messaging
Missing Main Landmark
Page lacks a main landmark for primary content
Select an Issue
Choose an accessibility issue from the list to start learning and practicing!