Accessible name not same order as visible label

Link to Accessible name not same order as visible label copied to clipboard



For each user interface component that includes a visible text label, the accessible name MUST match (or include) the visible text in the label.


Speech input users can interact with a webpage by speaking the visible text labels of menus, links, and buttons that appear on the screen. It is confusing to speech input users when they say a visible text label they see, but the speech command does not work because the component's accessible (programmatic) name does not match the visible label. When a user interface component has a visible text label - whether it be real text or an image of text - that text must also be found in the component's accessible (programmatic) name. When the visible label and accessible (programmatic) name for interactive components are in sync, speech input users can effectively interact with those components.

How to Fix

Fix this issue by ensuring that the accessible name - such as the aria-label - contains the text of the visible label in the same order in which it appears. While it is not necessary that the visible label and accessible name match exactly, it is a best practice to have the accessible name begin with the visible text.