aria-meter-name

Description

The aria-meter-name rule ensures that elements with role="meter", or native <meter> elements, have an accessible name. A meter conveys a scalar value within a known range (for example, disk usage or battery level). Without an accessible name, screen reader users hear only the numeric values without knowing what those values represent.

This rule meets WCAG requirements by:

1. Providing Programmatic Names (WCAG 4.1.2 Name, Role, Value): It ensures that the name of every meter element can be programmatically determined, so assistive technologies can communicate both what is being measured and its current value.
2. Conveying Information and Relationships (WCAG 1.3.1 Info and Relationships): It ensures the relationship between a meter control and its visible label is exposed to assistive technologies, not merely conveyed through visual proximity.

To comply with this rule, every meter element must have an accessible name provided via a <label> element, aria-label, or aria-labelledby.

Examples

This example shows a custom meter element with numeric values but no accessible name. A screen reader announces the values without context, leaving users uncertain about what is being measured.

Adding an aria-label to the meter element lets screen readers announce “Disk usage, 72 percent”.

How to fix?

To fix violations of the aria-meter-name rule, follow these steps:

• For native <meter> elements, associate a visible <label> element using matching for and id attributes.

• For custom elements using role="meter", add an aria-label attribute with a concise description of what the meter measures.

• If a visible label for the meter already exists on the page, use aria-labelledby on the meter element to reference that label’s id.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value

• WCAG Success Criterion 1.3.1: Info and Relationships