Skip to content

Improve the style variations control accessibility #11044

@afercia

Description

@afercia

Reference:

WCAG Success Criterion 2.5.3 Label in Name
https://www.w3.org/TR/WCAG21/#label-in-name

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
A best practice is to have the text of the label at the start of the name.

Understanding Success Criterion 2.5.3: Label in Name
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html

For example, one of the quote style visual label is:
Regular

The associated aria-label is:
Apply style variation "Regular"

screen shot 2018-10-25 at 10 38 36

Speech input users will see a visible label Regular and will try to voice a command "Click Regular" but this will fail as the accessible name of the control is different.

As a best practice, and to meet WCAG, the accessible name should match (or at least start with) the visible label.

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions