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

 

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"> 
</div>
 

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">
</div>
 

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.

2. 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.