Community
Participate
Working Groups
Warnings on sign up page are not read out by screenreader e.g. “passwords does not match” “user already exists” “login is incorrect”
The element that contains the error/warning message needs to be marked up as a "live region". It needs the following attribute: aria-live="assertive" I'm not sure, but it might also need: aria-atomic="true" Here's some doc describing what live regions are: http://www.w3.org/WAI/PF/aria-practices/#LiveRegions
Sarah, regarding the pull request https://github.com/eclipse/orion.client/pull/23/files#r3126386 Could you please add a comment here like this: e.g., I assert that I authored 100% of the content of this contribution and have the rights to donate the content to Eclipse under the EPL
I assert that I authored 100% of the content of this contribution and have the rights to donate the content to Eclipse under the EPL
Sarah, did you test this? It doesn't fix the problem on Windows. The parent <div id="errorWin"> already had aria-live="assertive" aria-atomic="true" so I'm not sure if making the the child <div id="errorMessage"> have aria-live="assertive" would make any difference. Does it work on Mac? Interestingly, this was broken before, and then it was fixed by Max in bug 368856, and then it became broken again at some point when the <tr> was changed to a <div> and LoginWindow.html moved from server to client. (Anton, did anything else related to the "errorWin" and "errorMessage" elements change at that time?) Sarah, can you research aria live regions a bit more, and see if you can find a working example where the text of a <div> is changed and the live region is spoken? I am wondering if it has anything to do with the fact that the parent <div> starts out with style="visibility: hidden;" and then this is set to style="" in order to show the parent <div> when there is an error?
After discussion with Sarah in email, we decided that the only way to get this working on Mac was to insert a "hack" that does not follow the ARIA spec. Articles [1] and [2], below, show that it is complicated to get this right for all browsers and all screen readers. The following did work for me on Windows: - in LoginWindow.html: <div id="errorWin" class="orion-error" style="visibility: hidden;" aria-hidden="true"> <div id="errorMessage" role="alert" aria-atomic="true" aria-live="assertive"> </div> </div> - in LoginWindow.js: function showErrorMessage(msg) { if (typeof msg !== "undefined") { document.getElementById("errorMessage").textContent = msg; } var errorWin = document.getElementById("errorWin"); errorWin.style.visibility = ''; errorWin.setAttribute("aria-hidden", false); } function hideErrorMessage() { document.getElementById("errorMessage").textContent = "\u00a0"; var errorWin = document.getElementById("errorWin"); errorWin.style.visibility = 'hidden'; errorWin.setAttribute("aria-hidden", true); } ...although, I have since read [3] that "aria-hidden" is not that helpful, and it is better to use the new HTML5.1 'hidden' attribute. For example, instead of: <div id="errorWin" class="orion-error" style="visibility: hidden;" aria-hidden="true">...</div> use the following because it is now more widely supported: <div id="errorWin" class="orion-error" hidden>...</div> [1]: http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/ [2]: http://viewplus.com/downloads/htmltests/accessibility/live-hack.html [3]: http://www.html5accessibility.com/tests/hidden.html
For now, I think we should just put working Windows code in and assume that this problem will be fixed in a newer version of VoiceOver. I will put together a patch similar to the code in comment 5.
Closing as part of a mass clean up of inactive bugs. Please reopen if this problem still occurs or is relevant to you. For more details see: https://dev.eclipse.org/mhonarc/lists/orion-dev/msg03444.html
