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

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