aria-label vs form labels

Question

Are there any differences between these two screen reader techniques on forms, and is one more encouraged than the other:

<label for="titleInput">Title</label>
<input type="text" id="titleInput" name="title" value="">


<div>Title</div>
<input type="text" aria-label="Title" name="title" value="">

The first way has always been the way to set this up, but since WAI-ARIA was introduced, it's got me thinking if using aria-label with forms is the better than using <label for="x">.

Ribeiro

why not use both? if you use a proper label, it also allows user to click on the label to focus on the input – Lanham

Answer 1

As a rule of thumb: If a real element can do the job, then use a real element. ARIA is what you fallback to when there is no real element that expresses the semantics or when you are doing something really weird which prevents you using the normal element.

(Most of the time, when you are doing something really weird, you should stop doing the weird thing instead).

In this particular case, there are a couple of major differences between the two.

Browsers won't extend the click target to the div element as they would with a label element. Clicking the label will focus the input, clicking the div will not.

You now have two labels. The div and the attribute provide the same information in two different places. The attribute doesn't replace the div, so a screen reader will read out the div text and the label associated with the input.

Use a <label>. It is specifically for associating text with a form control.

aria-label is designed for providing a text description of some content which a screen reader can't read out. e.g. when you are using a background image to convey information instead of using an <img> with an alt attribute (See my previous note about weirdness).

Loo

Answer 2

Aria-label is for accessibility. If Aria-label is added, on voice-over i.e (cmd +F5 on MAC or JAWS on windows machine will read whatever is typed inside the aria-label attribute of the HTML tag. This functionality is highly helpful for visually disabled users. Read here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Label is HTML tag , just like <form> or <h1>..<h6> , etc tags, when tag is used it renders Label on the UI. E.g: <Label>ENTER NAME</Label>

Doe

Payel, while that is right, as label has in-built accessibility semantics, so in cases where you should be using label (e.g. almost or all cases where you have an input) then it is better than aria-label because aria-label will not help sighted users who could benefit from the visual aspects of accessibility/usability that the native HTML elements can also provide. – Deb

Sorry, this answer is misleading. Semantic HTML is an accessibility thing, too, and ARIA properties are not intended to supplant the proper use of semantic HTML tags but rather supplement the accessibility information with non-visual clues. – Epiglottis

Had to downvote. Please consider deleting in response to Derek's comment. – Tzar