Accessibility: Can I add content between a label and its associated input?

Question

I have a <label> associated with an <input> (for="inputID").

Would I have an accessibility problem if, for example, I added a link between <label> and <input> ?

Example:

<div class="c-input">
    <label for="input-1">Label</label>
    <a href="#">Link</a>
    <input id="input-1" type="text" placeholder="Placeholder">
</div>

Thanks.

Answer 1

It's not a technical WCAG (accessibility) failure. You have the label associated with the <input> by using the for attribute. This allows the label to be announced when a screen reader user tabs to the input field, so that's great. It also allows mouse user to click on the label text and have the focus automatically move to the input field.

However, it's a little odd to have a link between the two. A similar layout is somewhat common for checkboxes (not input fields), especially with "agree to terms and conditions" type of checkboxes. The "terms" is often a link contained within the label whereas in your example, the link is outside the label.

<input type="checkbox" id="mycheck">
<label for="mycheck">Agree to <a href="terms.html">terms and conditions</a></label>

Similar to your example, a screen reader user will hear the label when they tab to the checkbox ("agree to terms and conditions, checkbox, unchecked"). If they tab again, they'll hear "terms and conditions, link". If they click on the non-link part of the label, the checkbox will toggle. If they click on the link part of the label, the link will navigate to the "terms" page and the checkbox will not toggle. It's a little funky but doesn't fail WCAG.

So back to your example, should the link be part of the label or should it be outside the label? Either way it's not an accessibility failure. You have to decide which behavior you want. If you need the link to be announced as part of the input field's label then the link should be embedded in the label (a child element of the <label>).