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?
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: