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.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile