Search code examples
htmlcssaccessibilitynvda

Is content positioned outside the viewport using absolute positioning still accessible to screen readers?


I have the following CSS applied to some text:

.accessible {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

This moves the text out of the viewport. I have read that the text will still be accessible to screen readers. However, I tried reading the webpage with NVDA but it requires me to hover over the things that I want it to read. Obviously, I could not hover over the absolutely positioned text so it did not read it. Does this happen with other screen readers too? Am I not using it correctly?

I have never created accessible sites before so I have no experience with this technology.


Solution

  • Yes, the text is still available to assistive technology (screen readers, refreshable braille devices, etc). Whether something is in the viewport or not doesn't matter to someone that cannot see the screen. For severely low or no vision, everything is out of the viewport.

    Screen reader users can navigate the entire DOM using a 'virtual PC cursor'. The DOM is represented as a tree, very similar to opening a code inspector in a browser. Nested elements are like tree nodes that can be expanded/collapsed, except for the screen reader, the entire DOM tree is expanded. You use the up/down arrow keys to traverse the tree. This allows a screen reader user to access every piece of text on the page whether or not you can TAB to it.