Accessibility: Help text for input elements accessibility

Question

I have a text input which requires the user to enter a password with specific constraints. The help text for these constraints are specified in a separate DOM element.

I would like the screenreader to read this help text when the user focuses on the input field. I have found two ways of doing this:

1. use aria-describedby="help-text-id" on the input text.

    <label for="password"> Password </label> <input type="text" aria-describedby="help-text" id="password" /> <span id="help-text"> The password should at least be 8 characters</span> 

2. use aria-labelledby="label-id help-text-id" on the input text to read the corresponding label as well as the help text as label

    <label id="password-label"> Password </label>
    <input type="text" aria-labelledbyby="password label help-text" />
    <span id="help-text"> The password should at least be 8 characters</span>

I like the first one because semantically this help text is something that describes the input, not something that labels the input. I am just not sure if this is the right way to handle this. Are there any other patterns for announcing help text?

Also aria-describedby doesn't seem to work with ChromeVox extension, nor with windows 10 screenreader.

References: https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/

Answer 1

You could always include the help text within the label associated with the input element. That would guarantee 100% compatibility with any screen reader/browser combination.

In addition to overall instructions, it is also important to provide relevant instructions within the labels of the form controls. For example, to indicate required input fields and data formats in the text of the labels. https://www.w3.org/WAI/tutorials/forms/instructions/

You could even use CSS to offer this text only to screen reader users within the label , since this was the behavior you offered in your original examples.

Between the two solutions that you offered, I would go with aria-describedby as it offers a higher level of supported usage across browsers .