Make sure every ARIA meter node has an accessible name

ARIA meter elements must have accessible names.

About This Rule

This rule ensures that elements with role="meter" have discernible text that clearly describes their purpose or function for screen reader users.

Why It Matters

Screen reader users cannot discern the purpose of elements with role="meter" that lack an accessible name. This omission hinders their ability to understand the function or status represented by the meter, leading to confusion and a diminished user experience.

How to Fix

Ensure each element with role="meter" has one of the following:

• A non-empty aria-label attribute.
• An aria-labelledby attribute pointing to an element with discernible text for screen readers.
• A title attribute providing a descriptive text.

Example

Fail

The following example lacks an accessible name for the meter element, making it unclear to assistive technology users:

<div role="meter" aria-valuenow="0.6" aria-valuemin="0" aria-valuemax="1"></div>

Pass

In this corrected example, the aria-label attribute provides an accessible name for the meter element:

<div role="meter" aria-label="Battery level" aria-valuenow="0.6" aria-valuemin="0" aria-valuemax="1"></div>