Meters need a name
- Rule:
axe/aria-meter-name - Checks: ARIA meter nodes must have an accessible name
- WCAG: 1.1.1
- Fix class:
content: A fix needs authored text.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”A visible label sits next to the meter
Section titled “A visible label sits next to the meter”Point aria-labelledby at the label by its id. A meter does not take its name from its content, so text inside it does not count.
<span id="storage-label">Storage used</span><div role="meter" aria-labelledby="storage-label" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" aria-valuetext="7.2 of 10 GB"></div>The meter has no visible label
Section titled “The meter has no visible label”Name it with aria-label, saying what it measures, such as “Password strength”. The name says what is measured; the value attributes say how much.
A native <meter> element would do
Section titled “A native <meter> element would do”Use <meter> with a <label for>. It needs no ARIA, and the browser reports its value and range for you.
<label for="battery">Battery level</label><meter id="battery" min="0" max="100" value="64">64%</meter>Fixes that fail
Section titled “Fixes that fail”Putting the label text inside the role="meter" element
Section titled “Putting the label text inside the role="meter" element”A meter takes no name from its content, so axe still fails it and screen readers still announce an unnamed meter.
Naming the meter with its value, such as aria-label="72%"
Section titled “Naming the meter with its value, such as aria-label="72%"”The value already comes from aria-valuenow or aria-valuetext. Without saying what is measured, people hear a number with no meaning.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.