Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Inaccessible ARIA meter node name (WCAG 2.0 Level A Issue)

How to fix the website accessibility issue of inaccessible ARIA meter node names.

Post cover image showing clasped hands - representing website accessibility projects

What does this accessibility issue mean?

Accessibility issue summary: Inaccessible ARIA meter node name

The label or aria-label attribute helps users with disabilities understand the meaning of meter elements on your website,  which are used to indicate a measurement within a known range.

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Inaccessible ARIA meter node name (WCAG 2.0 Level A Issue)

 <div style="width: 50%;" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"> 

The above HTML violates the aria-meter-name accessibility rule.


How to fix "Inaccessible ARIA meter node name (WCAG 2.0 Level A Issue)" issue

<div style="width: 50%;" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="Progress Meter">

What has changed in this corrected version?

  • The aria-label attribute has been added to provide an accessible name for the meter element.

Important Accessibility Practices

  1. Always ensure that elements with a role="meter" include a discernible name. This can be accomplished using one of these methods:
  • The title attribute: This is considered as a Good solution, but it doesn't always provide the best experience on assistive technologies.
  • The aria-label attribute: This is considered a Better solution and it helps assistive technologies with determining the exact role of the object.
  • The aria-labelledby attribute that references onscreen text: This is considered the Best solution because it links the ARIA element with onscreen text that all users can see.
  1. Avoid using empty aria-label attributes, as this does not provide any helpful information to assistive technologies such as screen readers.

Learn more about ARIA Meter roles and accessible names in the Web Content Accessibility Guidelines.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform