Website Accessibility is fast gaining recognition among developers, authors, website managers and designers. Web authors are not only looking at designing web pages keeping accessibility guidelines and standards in mind but also focusing on testing for accessibility using different Assistive Technologies.

One of the key Assistive Technology from Web Accessibility perspective is screen reader. In this article, we will be focusing on basic testing of a web page using Dolphin's SuperNova screen reader with Internet Explorer.

While using SuperNova, following points need to be kept in mind:

• Maximize the browser window.
• Ensure that NumLock is Off.
• Try and use the keyboard to test the web page and avoid using the mouse to get accurate findings. If you find it difficult to use only a keyboard, don't worry it does not come natural to most of us but I am sure that can be done with practice.
• Dolphin key refers to the "CapsLock key.

Reading Web pages

The best feature of SuperNova is that it provides on-screen visual indication about user's location. This helps to understand what is currently being read out. A rectangle box surrounds the line that is being read out and it moves as the user moves from one position to another.

SuperNova will start reading information on the web as soon as the page loads. It firsts reads the title of the page and announces the total number of links, headings and frames used on a particular page. SuperNova uses the Dolphin cursor to read web pages which will read the web page in the order in which it is specified in the markup.

On the web you can use the Arrow keys to read the text and Tab to jump between focusable elements, such as links. Users can read characters, words, lines and even paragraphs using the different keystrokes.

Following are some of the general reading keystrokes of SuperNova:

General reading keystrokes

Description	Keystroke
Read character	Numpad 4
Read word	Numpad 5
Read line	Numpad 6
Move to the next paragraph	P
Read continuously (Toggle key)	Numpad Plus
Mute speech temporarily	Left Control
Allow through	Left Control + 7 (on the Numeric row)
Find	F3
Access Help	Dolphin key + F1
Turn Dolphin Cursor On/Off	Left Control + 4 (On the Numeric row)
Move to next focusable element	Tab
Move to previous focusable element	Left Shift + Tab
Move to the top of the page	Left Control + Home
Move to the bottom of the page	Left Control + End
Move to the address bar	F6 or Alt + D
Screen refresh	Left Control + Semi colon (;)

Note: Use the Screen refresh command to refresh SuperNova in the virtual buffer. This will not refresh the web page.

With the above mentioned keystrokes one can read the web page information and find out if the reading order is correct. I will recommend read the information line by line to start with and once you are accustomed with the voice use the continuous reading function. One important thing to remember is that SuperNova treats each element as a separate line.

Let's now move ahead and find out how to read and test different web page elements.

Web page elements

We generally skim through web page information and identify links, headings, tables etc by looking at the page and differentiate the same from the content on the basis of their visual appearance. But this is very different for screen reader users, they are informed by the screen reader about the element type as they browse through web page information.

For instance while reading headings, SuperNova will not only identify it as a heading but also read out its heading level. When the user presses the Down Arrow key to read the information below the heading, it will identify the text as "Normal" for users. This results in screen reader users having to listen to lot of information.

Let's now move ahead understand how to test some of the basic web page elements using SuperNova:

Page Title

Although title information is not a web page element, it is very important information for a screen reader user as it gives them information about the current web page contents, if defined appropriately.

Web page title is the first piece of information read out by a screen reader when the web page loads. To read the web page title, press "Numpad 7". SuperNova will read the title information along with information at user's current cursor location on the web page. This is referred to as "Where Am I" in SuperNova.

Listen to the title information carefully to find out whether the title is descriptive of the page contents. Check whether punctuations are used appropriately as it will improve the listening experience for users as the screen reader will pause while reading out the title text.

Try it yourself: Access the title information of different web pages to understand how the information is read out.

Headings

Headings are used to mark the content structure. They help screen reader users understand the structure and interpret the information easily. More importantly screen readers provide users with an option to navigate the web page using headings. This is very helpful to quickly skim through the web page content.

Press H to move to the next heading and Shift + H to move to the prior heading. SuperNova will read out the heading text. In addition, it provides you with an option to view web page headings in the form of a list. Press Dolphin key + 2 to activate Headings List Utility dialog box and access all the page headings along with their levels.

Check the web page to find out if headings are defined. Navigate through the headings to test whether they are nested correctly to help users interpret the content easily. Also analyze if the heading text is descriptive of the content written below the headings.

Try it yourself: Access headings provided on a web page to find out if they are provided appropriately.

Images

Images are used to add value to the web page content. Some images are informative while others might be decorative. Authors provide alternate text to images to make the information conveyed using images available to screen reader users.

SuperNova identifies images as "Graphics" for users. Press G to move to the next graphic and Shift + G to move to the previous graphic. SuperNova will read out the alternate text provided by the author and skip pass the decorative images with empty alternate text.

Listen to the alternate text provided for informative images on a web page. Does the alternate text describe the purpose of the image? Or does it read out file path for an image? Did the alternate text help you in understanding the information conveyed through the images?

Try it yourself: Access alternate text for images on any website that you wish to test.

Links

Links are used to help users navigate from one web page to another or from one section to another. Screen reader users differentiate between links on the basis of the link text. This might be in the form of actual text displayed on the page or else alternate text for image links.

SuperNova helps you navigate between links on the page using the standard Tab and Left Shift + Tab keys for next and previous links respectively. In addition, you can navigate between links by pressing L and Shift + L. Similar to headings, you can also access the links on a web page in the form of a list by pressing "CapsLock + 1" (on the Numeric row). This will display links along with the page URL the link is pointing to.

Navigate between the links on the page to test if the link text is descriptive of its purpose. Were you able to identify what information will be displayed on clicking on a particular link by listening to the link text only? Did you find links with identical text that lead to confusion in understanding the purpose of the same?

Try it yourself: Navigate through the links on a web page to test the same.

Tables

We will be talking about data tables here. Data table are used to display tabular data on the web page. Tables are often found confusing by screen reader users to understand especially complex data tables.

SuperNova identifies table on the web page for the user and reads out the information in left-to-right and top-to-bottom order. It first announces the total number of rows and columns the table is made up of. Users can opt to access the table data either row by row or column by column. SuperNova reads each cell data on a separate line along with the cell coordinates. Press T to jump to the next table and Shift + T to jump to the previous table. In addition, press the CapsLock + Left/Right Arrow keys to move from one cell to another on a row and press CapsLock + Up/Down Arrow keys to move from one cell to another in a column.

Listen to the table data carefully on the page. Were you able to understand the data when read out in a linear order? Was the cell order marked appropriately?

Try it yourself: Test different tables on a web page to check the same for accessibility.

Element keystroke reference

Following table includes keystrokes for navigating different web page elements using SuperNova:

Element Reading keystrokes

Description	Keystroke
Read web page title	Numpad 7
Move to the next heading	H
Move to the previous heading	Shift + H
Activate the Headings List Utility dialog box	CapsLock + 2 (on the Numeric row)
Move to the next graphic	G
Move to the previous graphic	Shift + G
Move to the next link	Tab or CapsLock + L or L
Move to the previous link	Left Shift + Tab or CapsLock + Shift + L or Shift + L
Activate the Links List Utility dialog box	CapsLock + 1 (on the Numeric row)
Move to the next Table	T
Move to the previous Table	Shift + T

Conclusion:

In the article, we have tried to get you started with testing web page using a screen reader but this article is in no means indicative of the browsing pattern of screen reader users. Some users might navigate the page using the Arrow keys while others will just skim through the web page content using headings. That's why we will recommend to get the page finally tested by screen reader users.

To sum up the article, we will suggest to use the article for doing the basic testing of a web page to check for the content reading order, heading structure, page title, alternate text for images, link text whenever you design a new website. This will help you identify the potential barriers that can be faced by screen reader users.