What is the correct usage of aria-describedby?

Question

Let's say I have the following code:

<div>
  <label for="name-input">What is your name?*</label>
  <p id="description">Please write down your full name (first and last)</p>
  <input id="name-input" type="text" name="name" aria-describedby="description">
</div>

Inside my field container, I have a label and a description. Immediately after, I have the <input> element which has aria-describedby referencing the description. Is this the correct usage of this tag here? I've read in some places that aria-describedby is best used for descriptions that are far away, or come after the input element. Any pointers or improvements?

Answer 1

What you're describing here is essentially contextual help info, or something similar to tooltips.

I don't see anything wrong with how your example is coded. I tested it on NVDA/Chrome and it worked well. Another way that you could go about it is to include that information in the <label> as a child-element, but your approach works just as well.

If you're unsure of the correct usage, it's always best to consult the spec:

https://www.w3.org/TR/wai-aria-1.2/#aria-describedby