Rule ID: ace-aria-meter-name

Check that the meter elements using ARIA roles have a descriptive accessible name

WCAG 2.0 (A) - WCAG 2.2 (A) 1.1.1: Non-text Content Blind Low Vision Mobility Legal Risk

What This Rule Checks

Elements with the role=”meter” are used to display measurable values, like progress or temperature. These elements must have a clear and accessible name so that assistive technology users, such as those relying on screen readers, can understand their purpose and current state.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Meter elements display measurable values like progress or capacity. Without an accessible name, screen reader users hear only “meter, 75 percent” with no context about what is being measured. This violates WCAG 1.1.1 (Non-text Content).

How to Fix

Make sure every role=”meter” element has one of the following characteristics to provide an accessible name:

A non-empty aria-label attribute.

The aria-labelledby attribute pointing to an element that contains readable text for screen reader users.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Meter with no accessible name -->
<div
  role="meter"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100">
</div>

Copy

Correct Markup Solutions:

Code example

<!-- Meter with descriptive name -->
<div
  role="meter"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Battery level: 75%">
</div>

<!-- Or using aria-labelledby -->
<span id="disk-label">Disk usage</span>
<div
  role="meter"
  aria-valuenow="45"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-labelledby="disk-label">
</div>

Copy

Common Mistakes to Avoid

Forgetting that role=”meter” requires an accessible name just like form inputs.
Providing only a visual indicator (color, width) without a text name.
Using aria-label that describes the value but not the purpose (e.g., “75%” instead of “Battery level”).

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.

Related WCAG Criteria

1.1.1: Non-text Content