Label ARIA meter elements

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

ARIA meter elements must have an accessible name (Rule ID: aria-meter-name)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (1.1.1)

• EN 301 549

• Deque Best Practice

Impact

Serious level impact affecting:

• Blind users

• Low vision users

• Users with mobility impairments

Proper Implementation

• Provide descriptive accessible names for meter elements

• Use one of these methods:

  • aria-label attribute with non-empty value

  • aria-labelledby referencing an element with visible text

  • title attribute with descriptive text

• Ensure labels are clear and meaningful

Examples of Correct Usage

1. Using aria-label for an Accessible Name:
   

   The aria-label provides a clear and concise accessible name ("Battery level"), describing the purpose of the meter element.

2. Using aria-labelledby to Reference Visible Text:
   The aria-labelledby attribute references the visible text ("Storage usage:"), providing a meaningful label for the meter element.

3. Using the title Attribute for a Descriptive Name:
   The title attribute provides an accessible name ("CPU usage") for the meter element. Screen readers announce this information along with its current value.

4. Including Both Purpose and Value:
   The aria-label combines the meter element's purpose ("Download speed") with its current value ("50 Mbps") for clarity.

5. Using aria-valuetext for Custom Status Descriptions:
   The aria-valuetext provides a custom status message ("Excellent performance"), which screen readers announce instead of just the numeric value.

Common Errors to Avoid

1. Missing Accessible Name:
   Without an aria-label, aria-labelledby, or title, the meter element lacks an accessible name, leaving screen reader users unaware of its purpose.

2. Non-Descriptive Name:
   The aria-label ("Meter") is too vague and does not explain the purpose of the meter element, making it unclear to users.

3. Visible Label Not Associated with the meter Element:
   The visible label ("Progress toward goal:") is not connected to the meter element via aria-labelledby, so screen readers cannot associate the label with the meter.

4. Repeating Numeric Values in aria-valuetext:
The aria-valuetext ("50 Mbps") repeats the numeric value already provided by aria-valuenow, offering no additional information to screen reader users.

5. Using role="meter" for Non-Range Values:
   The meter role is misused for a static status indicator ("Complete"). This role should only be used for elements that convey a range of values.

Rationale

• Enables screen reader users to understand meter purpose

• Provides context for measurement values

• Essential for comprehending meter readings

• Ensures proper identification of meter function

• Critical for data interpretation

Evaluation Method

1. Inspect the Code

   • Check that:

     • Each meter element has a descriptive accessible name via aria-label, aria-labelledby, or title.

     • The purpose and current value of the meter element are clearly communicated.

     • aria-valuemin, aria-valuemax, and aria-valuenow are used appropriately.

2. Test with Assistive Technology

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to confirm:

     • The meter element's purpose and current value are announced clearly.

     • Custom status descriptions (aria-valuetext) are read as intended.

Evaluation Checklist