• June 1, 2025

Accessible Name for ARIA Meter Elements

Rule ID: aria-meter-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

To ensure compliance and accessibility for users of assistive technologies, each element with role="meter" must be given a clear and accessible name. This can be achieved through one of the following methods:

Valid Markup Patterns:

1. Using aria-labelledby:

   html

   KopierenBearbeiten

   <div role="meter" id="alb" aria-labelledby="labeldiv"></div>
<div id="labeldiv">Download progress</div>


2. Using aria-label:

   html

   KopierenBearbeiten

   <div role="meter" id="combo" aria-label="Download progress">70%</div>


3. Using title attribute:

   html

   KopierenBearbeiten

   <div role="meter" id="title" title="Download progress">70%</div>


These solutions provide accessible text for screen reader users, making the meter element’s purpose clear.

Avoid the Following Common Mistakes:

• Missing all naming attributes:

  html

  KopierenBearbeiten

  <div role="meter" id="empty"></div>


• Empty aria-label:

  html

  KopierenBearbeiten

  <div role="meter" id="alempty" aria-label=""></div>


• aria-labelledby pointing to non-existent elements:

  html

  KopierenBearbeiten

  <div role="meter" id="albmissing" aria-labelledby="nonexistent"></div>


• aria-labelledby pointing to empty elements:

  html

  KopierenBearbeiten

  <div role="meter" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>


Always make sure that the referenced elements exist and contain meaningful, visible text.

Why it Matters

Users who rely on screen readers need meaningful descriptions to understand the function and context of interactive elements. Without an accessible name, the role="meter" element becomes invisible to these users or is announced ambiguously, leading to confusion or misinterpretation.

By properly labeling these elements, you ensure that all users—including those with visual impairments—can accurately perceive the information conveyed by meter elements, such as download progress, usage quotas, or system load.

Rule Description

Every element with role="meter" must have an accessible name. This name should clearly describe its function or purpose so screen reader users can understand what the meter represents.

The Algorithm (in simple terms)

1. Find all elements with role="meter".

2. Check if each has:

   • A non-empty aria-label, or

   • An aria-labelledby pointing to an existing element with visible text, or

   • A title attribute with meaningful content.

3. If none of the above are present or valid, the rule fails.