How can I get the screen reader to read out an error message that I displayed inline on a page?
It’s the current fashion to show error messages inline, rather than displaying a pop-up error message.
The password is incorrect. Please recheck it and try again.
This looks prettier, I guess, but it does cause problems with screen readers.
Screen readers don’t realize that this thing that is away from the focus element is important. They don’t read out every text change anywhere on the screen, because that would cause them to be unbearably chatty and annoying.
Your program needs to give the screen reader some help by declaring the UI element that holds error message a live region, and to raise a live region changed event with the message appears. Read more about how to accomplish this.
Bonus chatter: Do be judicious in your marking. I’ve seen some people be lazy and just declare the entire window to be a live region, when in fact the live region is just a small part of the window. Instead of passing
CHILDID_SELF as the child ID, pass the child ID of the specific accessible element that is a live region.
Accessibility code like this is definitely underused. This is something I would have never thought of. Thanks for sharing this particular method of helping the screen reader!