Input helpers and accessibility for visually impaired

Question

I'm writing a specific kind of North American phone number input helper that displays a box next to the input, dynamically displaying the formatted outcome of the partially entered result. If the user has so far typed "2345678" into the input, for instance, the box will show "(234) 567-8___".

If the user then types an "@", the box will show "(234) 567-8@__" in red to indicate an invalid character, or if the user then types "012", the box will show "(234) 567-8012" in green to indicate a valid, complete entry.

Does anyone have a sense of whether it would be helpful to try to make this give feedback for screen reader users as well? Perhaps, by giving the input helper box an aria-live=polite attribute value? ... or would that just be annoying?

Answer 1

If you want to surface the error to someone using a screen reader, you'll need to add error text to a different node on the page that has an aria-live attribute, and hide it accessibly if you choose.

Note that aria-live='polite' will wait for the current read order to finish. If you want the user to stop and adjust his or her action right away, an assertive value is more appropriate.

As an alternative, use client side validation and raise the error on submission. Consider using <input type='tel' /> to do this. This would be more standard and less disruptive solution.

In either case, announce the expected format in a way that is associated with the input, either beforehand or as part of an error message.