Element Looks Visually Different from How It Behaves for Screen Reader
Archived Issue
Current Iteration of Issue
Short Description
There is inconsistency between how an element appears visually and how it is defined programmatically
Long Description
- An element can be made to look visually like another kind of element.
- A screen reader will identify the element as the original type, not what visual cues indicate.
- If the element is treated like or referred to in the rest of the content as the kind of element it looks like visually, it can be hard to find.
- For example, a link might visually look like a button. A screen reader user might scan a page for buttons if they want to complete a task appropriate to a button, such as submitting a form. Since it is really a link, a search through the buttons will miss the desired element.
- It is important that elements are programmatically and visually identified in the same way.
Example of Issue
No example currently available
Recommendations
- ARIA provides the ability to indicate to a screen reader what an element should be treated like. However, improper use of ARIA can make content more inaccessible, so use caution to implement ARIA properly.
Related Issues
WCAG Reference
Accessibility/Usability
Accessibility
Usability
Impacted Assistive Technology
Screen Reader
Impacted Type of Device
Computer
Mobile