Regarding web pages screen readers are software that scan the underlying .html file and transmit whatever text is in the file into a form that a visually impaired user can process. These forms are either auditory where the text is converted to synthetic speech or tactile, where individual letters are sent to a braille display.
Screen readers generally do not read or interact in any way with the .css files and therefore no matter which way you style your content with CSS, it has no effect on how the screen readers deliver the text.
As just stated the screen readers simply read out the text within the page. This includes the page's structuring elements, headers at different levels, links, body text and captions on images or on other media.
Up to now we have been very strict regarding having our page well structured. We emphasised that the <body> of the document should consist of the containers <header>, <main> and <footer>. We also insisted that navigation blocks should be inside a <nav> structure. We also insisted that headings should be used in strictly hierarchical order.
Other things we insisted on included:
Having navigation between different pages
Having internal navigation on every page
Having all optional end tags closed
The reason for this insistence is that those controls allow us to structure the page in such a way that screen readers can see its structure, and from it determine the logical layout of the page.
Windows has a screen reader, Narrator, built into its operating system. The equivalent on the Mac is Voiceover. There are a number of other independent screen readers. Jaws is the most popular one.
You run NVDA from your keyboard using Ctrl + Alt + N. Usually it will activate the taskbar. To move control to your web page keep using the Alt + Tab key combination until NVDA announces the name of your page.
Once you have reached the desired page NVDA will start reading it from the very beginning and will continue until it either reaches the end of the page or else you stop it reading.
To stop NVDA reading, simply press the Caps Lock key.
To go to the top of the document use Ctrl + Home.
Once you are at the top of the document you can explore its contents from top to bottom.
To move through the headings you simply press the H key. Each time you press it, it moves you to the following heading. Once it gets to a heading it announces both the level and the text of that heading.
To follow the headings backwards you use Shift + H.
Text of the Maori Creation document.
Above is the unformatted output of our Maori Creation Stories page. The audio below is a recording of NVDA's output when navigating through the page using the H key.
A demonstration of exploring headings using the H keyAn audio only version of the same exercise
Its first announcement is "Banner Landmark press enter to skip the top menu". This means that the user has just pressed the Ctrl + Home key combination, which moved the focus to the top of the <main>. After this it announces each of the headings, starting with the text followed by the level number. This means that the user has been continuously pressing the H key.
Pressing the H key, with or without the Shift key will move you to the next heading regardless of its level. On the other hand, if you wanted to search all of the level 2 headings, then you press the 2 key. Again you add the Shift key if you if you want to move backwards. Same applies to all the other heading levels
If you find a heading that interests you and want to read from that point on you use Caps Lock + down arrow.
If you wish to stop reading at any time just press the Caps Lock key on its own.
To search by landmarks we use the D key. Again to search backwards we use the Shift key.
To search for lists you use the L key. Again going backwards you use the Shift key as well. Every press of the L key brings you to the first item of a list. Each subsequent press of the same key brings you to the first item of the next list.
A demonstration of exploring groups of lists using the L keyAn audio only version of the same exercise
In the above audio NVDA announced only the text of the first element of each list. This means that the user was only pressing the L key.
If you want to explore the entire contents of a list, you use the I key. This is demonstrated in the next video and audio where the user uses only the I key.
A demonstration of exploring list items using the IkeyAn audio only version of the above activity
A lot of your lists may be lists of links. If you access one of those lists using either the I or L keys then they are not treated as a list of links and therefore you cannot use them to navigate through your page. Instead you need to use the K key followed by Enter to activate the link.
In the next audio the K key is used to follow all of the links on the page until it arrives at the link 'The Gods: Children of Rangi and Papa'. When it arrives here the user presses the Enter key causing focus to move to the heading with that ID value. Here the system starts reading the text from that point on.
Following hyperlinks using the K key. Here the user follows a link to the desired destinationAn audio version of the hyperlink following exercise
This is not a comprehensive guide to the use of NVDA. It just contains enough information to enable a developer to test whether the logical structure of a page is accessible through the use of assistive technology in general and NVDA in particular.
Using POSH we have created a web page that satisfies level A of the WCAG's recommendations on the text content of a web page. Because of this we were able to use the keyboard only to navigate through the page using either headings H, lists L or hyperlinks K. All parts of the page are currently accessible and operable by keyboard.
