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.
Buttons
Buttons are interactive elements that users activate to perform actions. They must convey the purpose of themselves what it does when pushed, to assistive technologies. They must be accessible to keyboard users and assistive technologies. The following examples show various button implementations and common accessibility issues.
<button> Element
Standard button element
✅ The most accessible way to create a button. Semantic HTML buttons are keyboard accessible by default and announced correctly by assistive technologies.
Button with aria-hidden="true"
❌ Button hidden from assistive technologies. While it remains visible and operable visually and via keyboard, users of assistive technologies may not be able to find or operate it.
Button containing image with alt text
✅ Button with an image that has proper alt text. The alt text becomes the accessible name of the button.
Button containing image without alt text
❌ Button with an image missing alt text. Assistive technologies cannot determine what this button does, making it inaccessible.
Button Role
Div with button role and tabindex
⚠️ A div element with role='button' and tabindex='0', along with JavaScript handling both click and key events. This is a complex implementation and it's better to use a button element.
Div as button without role
❌ Custom button missing role='button'. Assistive technologies won't identify this as an interactive element, making it inaccessible.
Div as button without tabindex
❌ Custom button that can't receive keyboard focus. Keyboard users won't be able to activate this button.
Input Elements
Input type="button"
✅ Input element with type="button". The value attribute provides the visible label and accessible name.
Input type="button" without value
❌ Input button without a value attribute has no accessible name. Assistive technologies cannot identify what this button does.
Input type="submit"
✅ Submit button with proper value. The value attribute provides the visible label and accessible name.
Input type="submit" without value
Submit button without explicit value. Browsers provide a default label ('Submit' etc), but it's better to be explicit.
Input type="reset"
✅ Reset button that clears form data. The value attribute provides the visible label and accessible name.
Input type="reset" without value
Reset button without explicit value. Browsers provide a default accessible name ('Reset' etc), but it's better to be explicit.
Input type="image" with alt text
✅ Image button by input element with type="image". The alt attribute provides the accessible name for this submit button type.
Input type="image"
❌ Image input without alt text. This creates an inaccessible submit button since assistive technologies can't determine its purpose.
Summary Element
Summary element
✅ Summary element within details for creating disclosure widgets. Semantically correct and accessible by default.
Click Me
Details content revealed when summary is clicked.
details without summary
When details lacks a summary, browsers display a default label like 'Details'.
Details content revealed when summary is clicked.
Summary element without details
❌ Summary element used outside of details. This is invalid HTML.
Summary without accessible name
❌ Summary element with no text content or accessible name. Users won't know what this control does.
Details content that can't be properly accessed.