Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FormField-label used for aria-label

See original GitHub issue

We need to look at defaulting aria-label as label if one of the following is not provided aria-describedby, aria-description or aria-labeledBy, aria-label.

Issue Analytics

State:
Created 10 months ago
Comments:7

Top GitHub Comments

3reactions

tayseacommented, Dec 16, 2022

Maybe htmlFor should be used in most cases and aria-label should only be used if what the screenreader reads out should be different than the label text

Agree completely with this.

first rule of ARIA is: If you can use a native HTML element [HTML51] 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.

2reactions

jcfilbencommented, Dec 15, 2022

Is this true if there is an association between for and id? I noticed that the story above is not using htmlFor on the FormField and no id on the input.

Good note, if we have htmlFor and id then we don’t need an aria-label. I wonder which direction we should be encouraging, aria-label or htmlFor?

Maybe htmlFor should be used in most cases and aria-label should only be used if what the screenreader reads out should be different than the label text

Top Results From Across the Web

Labeling Controls | Web Accessibility Initiative (WAI)

The aria-label attribute can also be used to identify form controls. This approach is well supported by screen readers and other assistive technology,...

ARIA: form role - Accessibility - MDN Web Docs - Mozilla

The <form> element defines a form landmark when it has an accessible name (e.g. aria-labelledby , aria-label or title ).

Creating Accessible Forms - Advanced Form Labeling

With aria-labelledby , one element can label multiple form controls, and one form control can be labelled by multiple elements. The following ...

aria-label - examples and best practices - Aditus

The aria-label should be used to provide a text alternative to an element that has no visible text on the screen. See its...

Form <input> elements should have a visible label

The aria-label attribute allows you to add a label directly to pretty much any HTML element, including form elements, paragraphs, tables, and more....