How do I make screen readers read the whole page when angular changes states?
Requirement: Each time the page changes, the screen reader must read the entire page content.
We are using firefox + NVDA for our testing, and since angular does not "change pages", we tried the following to read the entire page when states change:
aria-live="assertive"
This basically reads the changes to the text on our site, but only reads what adds it, in our case we have a table being populated ng-repeat
and it reads the added information, but without any context (it doesn't say which row or column read)
Another problem was that when angular is full, the screen reader reads it before angular is full, this was solved with $timeout
, but still when it aria-live
reads the changes it skips some parts and if we added aria-atomic
for forced reading, we had some options with multiple options and read them (they all have over a hundred options). which readers don't read, they only read the first ten options or the ones that are visible when you click on them.
Remember, without any arya-alive or arya-atomic, when you change states in angular, the user is not notified of any change.
after almost giving up on the solution, we decided that maybe our focus was wrong, we needed to make each state its own page, so we used the following:
function ForceNVDARead() {
$(window).on('hashchange', function () {
location.reload();
});
}
This will cause a reload for every change in the url. This works BIG, everything reads correctly, we almost thought it solved it all. Also, it causes duplicate requests from the client to our server.
Is there a way to get NVDA to read the content of the angular state like a normal page load without forcing a page reload?
Please don't say you only use aria roles or anything that doesn't work for this and we already have them, we need the application to read everything when states change.
ANY help is appreciated, we are going to abandon and restart the project without angular as we cannot reach our accessibility requirement.
source to share
Requirement: Each time the page changes, the screen reader must read the entire page content.
This is fundamentally not a requirement in terms of accessibility, it is equivalent to someone looking at the screen to read everything one line at a time, or using readquick , this is not a natural use.
Render availability is possible when using Angular , but we need to reset some assumptions:
- When you refresh the page, the key is in focus control and navigate to new content. This allows people to read in their own way and not in the way you thought they should read.
- ARIA live is for small updates elsewhere in the page (away from keyboard focus) not all content, this is not the answer here, I would give it up entirely.
- If people read forms before they are loaded, it could be a side effect of trying to read with ARIA-live. If not, try using focus control to place focus at the top of the form on upload.
- It might be worth reading a tutorial on using NVDA or talking to a native user. I can tell from experience that you don't use it the way end users do, so it's better to understand what "normal" interactions are.
If you ditch ARIA-live and go with focus control, you will probably solve most of the problems, but from a different perspective, more questions may arise.
source to share