aria-meter-name

ARIA meter must have an accessible name

Description

role="meter" is the semantic representation of a graphical display of a numeric value that varies within a defined range. A battery status bar, for example. The role of the accessible name on meter elements is to provide users of assistive technologies such as screen readers with the context of the meter value; hence, having an accessible name is essential for these users to fully perceive the meter's meaning and purpose.
Learn more about accessible names

Quick Fixes

Ensure that all the "meter" elements of the UI have a valid accessible name, like shown below.

1✓ <div role="meter"
2	  aria-valuenow="90"
3	  aria-valuemin="0"
4	  aria-valuemax="100"
5	  aria-label="Battery level"></div>
6
7   <div id="fuel-tank-label">My Fuel Tank (Liters)</div>
8✓ <div role="meter"
9	  aria-valuenow="35"
10	  aria-valuemin="0"
11	  aria-valuemax="40"
12	  aria-labelledby="fuel-tank-label"></div>

1✗ <div role="meter"
2        class="my-battery"
3	  aria-valuenow="90"
4	  aria-valuemin="0"
5	  aria-valuemax="100"></div>
6
7  <div id="fuel-tank-label">
8	<img src="fueltank.jpg" />
9   </div>
10✗ <div role="meter"
11	 aria-valuenow="35"
12	 aria-valuemin="0"
13	 aria-valuemax="40"
14	 aria-labelledby="fuel-tank-label"></div>

How Users Are Affected

An accessible name is intended, among other things, to provide users of assistive technologies with the context of certain elements. For example, in the context of a meter element, the accessible name will provide the context for what the meter indicates. When a meter-type element has no accessible name, screen reader users will have difficulty or will not understand what it represents at all.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text-content (A) | 4.1.2 Name, Role, Value (A)

Recommended Reading

• Understanding Name, Role, Value
• Accessible name validation entry