Accessible name for a meter element and role=meter

What a meter is

<meter> displays a scalar value inside a known range: disk usage, a test score, a battery level. It is not <progress>, which shows how far a task has got.

Neither element takes its name from the text between its tags. That text is fallback content for browsers without support, so a screen reader reading a nameless meter announces a bare number with no idea what it measures.

What squirrel checks

One check, aria-meter-name, at severity error. It covers every element with role="meter", and every native <meter> that carries no explicit role.

A name is accepted from a non-empty aria-label, an aria-labelledby pointing at an element with text, a non-empty title, or a <label for="..."> matching the element’s id.

• Fail with N meter element(s) without accessible names. Every offender is listed, as meter#id or div[role="meter"].
• Pass with All meter elements have accessible names.
• Info with No meter elements found.
• aria-meter-name-unconfirmed warns with N meter element(s) without accessible names may be hidden by a style (unconfirmed) for a meter a style may hide in a way squirrel cannot settle.

Hidden meters

A meter out of the accessibility tree has nothing to announce, so it is not reported: one with the hidden attribute (except hidden="until-found"), aria-hidden="true" on itself or an ancestor, display: none on itself or an ancestor (set inline or by a <style> rule squirrel can decide), or inside a closed <dialog> or an unopened popover. It still needs a name before it is shown. When every unnamed one is skipped this way, the pass reads All meter elements in the accessibility tree have accessible names, with hiddenWithoutName in its details.

squirrel reads the markup, inline styles and the page’s <style> blocks, the same way as form-labels; see form-labels for what it can and cannot decide. External stylesheets are not read. A meter that carries a no-js class, itself or on an ancestor other than <html>, is reported as unconfirmed on a page with an external stylesheet or an @import, because a theme usually hides that fallback with a rule such as .js .no-js { display: none } once JavaScript runs.

How to fix it

<label for="disk">Disk usage</label>
<meter id="disk" min="0" max="100" low="60" high="85" value="72">72%</meter>

Associate a visible <label> where the page shows one, and fall back to aria-label where the surrounding layout already makes the meaning obvious to sighted users.

If you are describing progress through a task rather than a measurement, use <progress> instead. The naming requirement is the same, but the role communicates something different.

Enable / disable

Disable this rule

[rules]
disable = ["a11y/aria-meter-name"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/aria-meter-name"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• a11y/aria-progressbar-name: the same check for <progress> and role="progressbar".
• a11y/aria-required-attr: role="meter" also has to declare aria-valuenow.
• a11y/aria-input-field-name: sliders and spin buttons, which have the same naming problem.
• a11y/form-labels: native inputs, textareas and selects with no associated label.

Accessibility findings ship in every audit next to the SEO, performance and agent experience rules. See Website security scan with AI for how an agent works through a report.

References

• The meter element, MDN
• The meter role, MDN
• Understanding SC 4.1.2 Name, Role, Value, W3C

Check your site

Run squirrel audit https://example.com and open the Accessibility section of the report. Every unnamed meter is listed, with no cap on the count. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.