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

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.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile