Test Page Notice
This page contains intentionally problematic accessibility patterns for testing and demonstration purposes only.
Do not use these examples in production websites. They violate accessibility guidelines and best practices.
This page is designed to work with the Accessibility Visualizer browser extension to help developers identify and understand accessibility issues.
Form Controls
Form controls are interactive elements that allow users to input data. They must have proper labels and be accessible to assistive technologies and keyboard users. The following examples demonstrate both accessible implementations and common accessibility issues.
Text Inputs
Input without label
❌ Input without a label. Assistive technologies cannot convey the purpose of this field to users.
Input with proper label
✅ Text input with associated label using 'for' and 'id' attributes. This creates a programmatic relationship between label and input.
Input inside label
✅ An alternative method is to nest the input inside the label element. This works similarly to 'for/id' association.
Select Elements
Select without label
❌ Select element without label. Users cannot determine what this dropdown is for.
Select with proper label
✅ Select element with associated label. Assistive technologies can tell their users both the label and the current selection.
Textarea Elements
Textarea without label
❌ Textarea without label. Users cannot understand what content should be entered here.
Textarea with proper label
✅ Textarea with associated label. Clearly communicates the purpose of the text area to assistive technology users.
Checkboxes
Checkboxes with labels
✅ Properly labeled checkboxes. Each checkbox has a clear, accessible name.
Checkboxes without labels
❌ Checkboxes without proper labels. While there is text nearby, it isn't programmatically associated, making it hard for screen reader users to understand what each checkbox represents.
Custom styled checkbox with display: none
❌ Custom checkbox using 'display: none' which can remove the element from keyboard navigation and screen readers.
Radio Buttons
Radio buttons with labels
✅ Properly labeled radio buttons with shared name attribute. Forms a logical group that browsers and assistive technologies can interpret. Each option is named using label elements. The group itself is labeled using fieldset and legend elements.
Radio buttons without labels
❌ Radio buttons without proper labels. Text appears next to radios but isn't programmatically associated, making it inaccessible.
Radio buttons without name attribute
❌ Radio buttons without shared name attribute. These don't form a proper group, so both can be selected simultaneously.
Radio buttons with different name attributes
❌ Radio buttons with different name attributes don't form a logical group. Each acts as an independent radio button.
Single radio button
❌ If there's only one option, use a checkbox instead of a radio button. Users cannot uncheck a radio button once selected.
Label Issues
Orphaned label
⚠️ Label element not associated with any form control. It makses no sense.
Label with non-existent ID reference
⚠️ Label references an ID that doesn't exist. Is the ID you meant to reference incorrect?
The input with id="non-existent-input" doesn't exist in the document.
Input States
Required input
✅ Input with required attribute. Screen readers can announce that this field is required. Consider adding visual indicators and clear error messaging.
Read-only input
Read-only input that users cannot modify. Screen readers will announce this state. Useful for displaying non-editable information in form context.
Editable Elements
Contenteditable div without role
⚠️ Contenteditable div without proper role. While functional, screen readers may not announce it as a text input field.
Contenteditable div with role='textbox' and aria-labelledby
✅ Contenteditable div with proper textbox role and accessible labeling. Uses aria-labelledby to connect with the label element.
Contenteditable without label
❌ Contenteditable element without any label or accessible name. Screen readers cannot identify what this field is for.