Label at Front

The Label at front guideline ensures that the text of a label is positioned at the beginning of the accessibility name. Users relying on assistive technologies, such as screen readers, need accurate and understandable descriptions of the interface elements they are interacting with. When the label text is not at the front of the accessibility name, it can cause confusion, especially when the element’s purpose is not immediately clear from the announcement.

For example, if a button is visually labeled Submit, the accessibility name should start with Submit to ensure that screen readers announce the label correctly and without delay. When the text of the label is positioned elsewhere in the accessibility name, it can cause confusion and lead to a poor user experience, as the primary action or purpose of the element may not be immediately clear.

Success criteria

The rule checks whether the accessibility name begins with the text that is visually presented.

How to fix?

To prevent label at front violations, ensure the following:

• As a best practice, always place the visually presented text at the start of the accessibility label to provide clear and immediate context for screen reader users.

Example

The following example scan report highlights the label at front violation. The visible text on a button is EN, but the accessibility label name (contentDescription) is set as Wikipedia language. The visually presented text EN is not at the start of the accessibility name, causing potential confusion for users relying on screen readers.

Fix

• Update contentDescription: from "Wikipedia language" to "EN Wikipedia language" to match the visually presented text and ensure that it is placed at the start of the accessibility name.