Is using a label enough or should I add aria attributes?-CodePudding

Preamble
A colleague told me that, to make our web apps more accessible, everything needed some aria-* attribute. I've been reading through articles regarding accessibility on w3.org, angular.io, mdn web docs and here on stackoverflow, and have come to the conclusion that he definitely got that wrong. But I still couldn't get a clear overview on which elements really need or should have an aria-* attribute to make them more accessible and which don't. If you've got resources on that, please share.

Question
Let's say I have a form with input fields with labels. Basic, like so:

<!-- v1: -->
  <label for="input-favAnimal">Favourite animal:</label>
  <input type="text" id="input-favAnimal" placeholder="e.g. Penguin"/>

Is that already assistive technology friendly or should I add aria-labelledby (or anything else) to the input to improve accessibility? Aforementioned colleague suggested this:

<!-- v2: -->
  <label for="input-favAnimal" id="label-favAnimal>Favourite animal:</label>
  <input type="text" id="input-favAnimal" placeholder="e.g. Penguin" aria-labelledby="label-favAnimal />

v2 frankly just looks doubled to me. But again, my only knowledge regarding accessibility is based on having read some articles.

Thanks in advance.

CodePudding user response：

Label alone is fine as long as you have the for and id attributes matching, like you do in your v1 example. You can see this is the recommended solution wherever it's possible to do so in the related section in the W3C WAI documentation.

Why? A label is great because it is helpful for vision impaired users and users with motor control issues (and all users, for that matter!) can click on the label to focus the input. Aria labels are beneficial for vision impaired users because screen readers will be able to indicate to the user which elements relate to one another. But if a label is already there and is properly set up as you have it with for and id attributes, it doesn't do anything extra.

There is a lot of information that you can use for future work in the W3C WAI documentation as well as these Aria Design Patterns. (And many more places too!)

CodePudding user response：

It's perfectly useless to add aria-label or aria-labelledby in this situation, as the input field is already perfectly linked with its label.

ARia-label and aria-labelledby are ment for situations where you can't do anything else. One of the most important rules of ARIA is to don't use it, unless you really need it.