Search code examples
accessibilityscreen-readers

How to read out text elements with a screen reader

I'm trying to test some accessibility features of my site but not sure how to get screenreaders (specifically I'm using chromevox) to read non-interactive elements.

For example on this w3schools page for tags, how can I get it to read the text within the "Definition and Usage" section? I only seem to be able to get it to navigate to and read interactive elements by pushing tab.

Solution

  • First off, I would recommend using a standard screen reader such as NVDA (free) or JAWS (free trial).

    WebAIM (an accessibility research company) conducts a survey periodically regarding screen readers. The last one in 2021 showed that the primary screen reader used by users was JAWS (53%) and NVDA (30%). Almost 85% of the market share. Chromevox was only used by 0.3% of people so it's not a great indicator of how your website will work.

    If I generalize your question to PC-based screen readers (the Mac has a built in screen reader called VoiceOver and the way to navigate to plain text is different than PC-based screen readers), the general way to navigate to plain text is to use the up or down arrow keys.

    The arrow keys conceptually walk the DOM (document object model), although technically it walks the accessibility tree which can be thought of as a subset of the DOM. For example, if you have an element with CSS display:none, that element is still in the DOM but it's removed from the accessibility tree so a screen reader user cannot navigate to an element that is hidden.

    There are lots of useful shortcut keys supported by a screen reader (both NVDA and JAWs, not sure about chromevox). In the example URL you posted for w3schools, you can navigate to "Definition and Usage" by using the H key because that text is a heading (<h2>). You could also navigate to it with the 2 because it's specifically an <h2> (as opposed to an <h1> or <h3>, which would use the 1 or 3 keys, respectively).

    You can see other helpful keys in the NVDA doc for Single Letter Navigation.

    Once you get to the "Definition and Usage" heading, you can arrow down to the text below it.

    For more information, I have two (free) recorded presentations on YouTube that talk about NVDA.