Element Looks Visually Different from How It Behaves for Screen Reader

Short Description

There is inconsistency between how an element appears visually and how it is defined programmatically

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.

No example currently available

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.

Accessibility

Usability

Screen Reader

Computer

Mobile