Do I need to use aria-label on elements that have visible labels which are read by screen reader?

Question

My company is trying to become WCAG compliant. One of the things we need to do is add aria-label to interactive elements. My question is do I need to add an aria-label to an element which already has a label which is read by a screen reader.

So basically i definitely need a "close" aria-label here:

<button>x</button>

But in some cases I have a placeholder for example, which is read by the screen reader. Do I need to add an aria-label anyway just in case? The aria-label would be the same as the placeholder.

Answer 1

@mikkel has good advice regarding the first rule of ARIA use.

Regarding your specific question on the placeholder attribute, relying on the placeholder as your label would fail several WCAG checkpoints.

• Placeholder text is typically light gray and when displayed on a white background often fails 1.4.3 Contrast Minimum
• The placeholder text disappears when you start typing so now the "label" has disappeared and would fail 3.3.2 Labels or Instructions
• The placeholder attribute is not specifically referenced in the accessible name calculation (https://www.w3.org/TR/accname-1.1/#step2) although it might be considered in step 2D as "an attribute that defines a text alternative". It's not clear if placeholder is a "text alternative". Personally, I don't think it is. If not, then you would fail 4.1.2 Name, Role, Value

If you look at the spec for placeholder, it has a big disclaimer about not using it as a label.

Warning: Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control’s label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

So, all that being said, yes, you should have some kind of visible label associated with your input field even if you are using the placeholder attribute.

Answer 2

Short answer, no. Long answer, it depends on the situation. But important – first rule of aria: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. When in doubt, choose native HTML. https://www.w3.org/TR/using-aria/#rule1

If you have a visible label, then you should connect the label text and the input field via the label-element. If the input field does not have a visible label, the aria-label is one technique that can add the label semantically. In your example of the button, you should use an aria-label, as the "X" doesn’t give the user any information. Of course, most users can guess what an "x" dos, but the user should not have to guess. And here am talking of users who use assistive technology.

I would recement that you get a professional to test your site, for legal reasons but mostly for your users.

I'm a web developer, but have used the last 10 years on web accessibility. So far, it’s the hardest field of web development I hav had to learn and I'm still learning. 😊