屏幕阅读器和HTML文档重点

Question

I'm new to this whole ARIA and accessibility aspect of HTML. I have an app where most of the things work properly with screen readers. However, when I click away from any control, ie focus on the document, NVDA always reads " page title document". I've been trying to stop it from doing that for a while but unsuccessfully.

The best thing I came up with is to add tabindex=0 to my topmost DIV so that it would receive focus on click instead of document, but even then NVDA reads the word "section" when it gets focused. Is there a way to suppress this?

I also tried removing title and adding it back in in a short timeout and then reader says just the word "document" which is fine, but depending on JS activity timeout sometimes flickers empty title as it is executed not that consistently. And requestAnimationFrame is too short, reader doesn't have time to pick the empty title and reads it anyway.

Answer 1

When you click on the document body, it will become focused and the previously focused control will blur. Screen reader will reflect this change by reading the accessible name of the newly focused widget, namely the document title. This is perfectly normal and entirely expected behavior, there is no need to change that.

You need to keep in mind that your expectations as a sighted developer are entirely not the same as any user, much less visually impaired user. What seems natural and expected to you will be highly confusing to a blind person.

Try being in their place for a while. Put a sleep mask over your eyes and try using your app relying only on keyboard and screen reader. I do that often, and it's a very enlightening experience.