Menu
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">.
576
The <form> element defines a form landmark when it has an accessible name (e.g. aria-labelledby , aria-label or title ). Make sure to have a unique label on each form in a document to help users understand the purpose of the form. This label should be visible to all users, not just assistive technology users.
Definition. aria-label is an attribute defined in the WAI-ARIA(opens in a new tab) specification. This specification extends native HTML, allowing you to change the way an HTML element is "translated" into the accessibility tree. By default, an HTML element will use its text content as the accessibility label.
By design, aria-label or aria-labelledby replace any other label text inside the element. All three are OK on nav and main elements. They are OK on div elements IF they have role=navigation , search , main , img. They are OK on a table element (except ignored by VoiceOver on iOS).
Forms. Label form fields. Labels describe the purpose and function of form elements: for example, the label “month” next to a dropdown menu listing the months of the year, or the label “first name” next to a text input field. Labels are critical because they tell the user what information to provide in the form element ...
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).
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
