October 18th, 2021

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.

Password: •••••              
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.

Topics
Code

Author

Raymond has been involved in the evolution of Windows for more than 30 years. In 2003, he began a Web site known as The Old New Thing which has grown in popularity far beyond his wildest imagination, a development which still gives him the heebie-jeebies. The Web site spawned a book, coincidentally also titled The Old New Thing (Addison Wesley 2007). He occasionally appears on the Windows Dev Docs Twitter account to tell stories which convey no useful information.

1 comment

Discussion is closed. Login to edit/delete existing comments.

  • Entegy

    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!