{"id":105808,"date":"2021-10-18T07:00:00","date_gmt":"2021-10-18T14:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/oldnewthing\/?p=105808"},"modified":"2021-10-17T20:00:11","modified_gmt":"2021-10-18T03:00:11","slug":"20211018-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20211018-00\/?p=105808","title":{"rendered":"How can I get the screen reader to read out an error message that I displayed inline on a page?"},"content":{"rendered":"<p>It&#8217;s the current fashion to show error messages inline, rather than displaying a pop-up error message.<\/p>\n<blockquote class=\"q\">\n<p>Password: <span style=\"border: solid 1px black; padding: 1px;\">\u2022\u2022\u2022\u2022\u2022\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><br \/>\n<span style=\"color: red;\">The password is incorrect. Please recheck it and try again.<\/span><\/p>\n<\/blockquote>\n<p>This looks prettier, I guess, but it does cause problems with screen readers.<\/p>\n<p>Screen readers don&#8217;t realize that this thing that is away from the focus element is important. They don&#8217;t read out every text change anywhere on the screen, because that would cause them to be unbearably chatty and annoying.<\/p>\n<p>Your program needs to give the screen reader some help by declaring the UI element that holds error message a <i>live region<\/i>, and to raise a <i>live region changed<\/i> event with the message appears. <a href=\"https:\/\/docs.microsoft.com\/en-us\/archive\/blogs\/winuiautomation\/how-to-have-important-changes-in-your-win32-ui-announced-by-narrator\"> Read more about how to accomplish this<\/a>.<\/p>\n<p><b>Bonus chatter<\/b>: Do be judicious in your marking. I&#8217;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 <code>CHILDID_SELF<\/code> as the child ID, pass the child ID of the specific accessible element that is a live region.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make it a live region.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-105808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"<p>Make it a live region.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/105808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=105808"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/105808\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=105808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=105808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=105808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}