CODEWITHSUNDEEP
htmlaccessibility
gaurav5430
gaurav5430

Reputation: 13882

How can I make input help text accessible?

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 screen reader 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 screen reader.

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

Upvotes: 3

Views: 4095

Answers (1)

Josh
Josh

Reputation: 4322

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.

Upvotes: 4

Related Questions