Accessibility QA Test Case: web content with JAWS screen reader in
Firefox
Firefox Web Content on Microsoft Windows: Navigation of Web content
using Freedom Scientific JAWS.
Description
This test case describes the approach and methods used to test
keyboard navigation and keyboard functions in a web page displayed in the
Windows version of Firefox, using the JAWS screen reader. Be sure to
follow the test case setup instructions
before proceeding with this test case.
The following types of functions will be tested. You can select the
provided link for each to go directly to the section.
Basic text navigation: Arrow keys, Page Up
and Down keys, Home, End, and several other JAWS navigation keys.
The goal is to test is to verify that the Firefox Web browser and the
JAWS screen reader work together. The focus of this test is Web content
that is displayed in the Web browser. This Web page file contains a
number of common Web page elements. JAWS should read appropriate
information for all elements in this page, as described in this test
case.
This test might uncover Firefox bugs or JAWS bugs. Firefox bugs should
be reported to the Mozilla.org bug tracking system. JAWS bugs should be
reported to Freedom Scientific.
It is impossible include every combination of web page elements here,
but the techniques described here can be used when testing other Web
pages. This test case does not include applets, plug-ins, or multimedia
content. Testers are encouraged to find live Web sites containing those
elements, and test them using JAWS also.
The techniques discussed in in this test case are
specifically for JAWS and Firefox running on the Microsoft Windows
operating system. Learning to use a screen reader such as JAWS takes time
and practice. This test case attempts to help a novice use many JAWS
features relating to Web page navigation. Read the JAWS Help pages and
online manual for more information on how to use JAWS.
Tools required
This test case requires the use of the JAWS screen reader. Information
about JAWS can be found on the Freedom Scientific Web site.
Test Case Setup
All of these files must be available for this test case. You may save
them all in a file folder on your PC, or, if you have a Web server, they
may all be stored in a single directory on the Web server.
win-webcontent-jaws.html (This is the file you are reading right
now.)
groovy-longdesc.html
groovyimg.jpg
imgmap2.jpg
Test Case Instructions
Start JAWS.
Open this file with Firefox.
Use any method you prefer to open this file. For example, with
Firefox started, you can start the "Open file" dialog by pressing
Ctrl + O, or by selecting "Open file" from the File menu
bar pulldown.
With JAWS running, scroll down through this file within the Firefox
browser and follow the instructions written in each section.
Do not use the mouse during the execution of
this test case.
In the instructions, keystroke sequences are listed in bold type.
For example: H means to press the "H" key on the keyboard,
or Ctrl + H means to press and hold the Ctrl key,
then press and release the H key, then release the
Ctrl key.
Because Web pages are essentially "read-only", JAWS uses its Virtual
PC Cursor mode when reading Web pages. This mode allows you to navigate
the page in a way similar to navigating a word processor document,
using the Arrow keys to move forward and backward, up and down.
If you are not familiar with JAWS cursor modes, see the JAWS online
documentation for more information.
Tip: You can press Insert + Z to toggle virtual cursor
mode on and off. If you have somehow turned virtual cursor mode off,
press Insert + Z to turn it back on.
Please note:
Even though you are in "read-only" mode, you may still need to
interact with parts of a web page, in text entry fields within a
form, for example. In that case, you will enter "Forms" mode by
pressing the Enter key, temporarily allowing keyboard input. See the
section on testing forms in this test case for more information.
JAWS provides a number of options that govern how much or how little
information JAWS will speak in certain situations. To view the HTML
options in the Configuration Manager:
Open Configuration Manager by selecting it from the Utilities
menu in the JAWS application window. (Or, press Insert +
F2, then select Configuration Manager from the Run JAWS Manager
dialog.)
Press Ctrl + Shift + D to open the default
configuration file.
Select Set Options and then HMTL Options to view the HTML options dialog.
(Tip: to change options temporarily, for the current session
only, you can use the Adjust JAWS Verbosity dialog by pressing
Insert + V instead of using the Configuration Manager,
above.)
These are the options to be used when running this test case. All of
these options are default settings, so you should not need to set them
manually. Even so, you should verify that these options are set before
running this test.
Text Page
Select "Indicate Block Quotations". (Selected by
default)
Graphics Page
Graphics verbosity: Select "Tagged graphics". (Selected by
default)
Graphics options: Select "Use Alt Attribute". (Selected by
default)
Links Page
Select "Say Link Type". (Selected by default)
Select "Identify Same Page Links". (Selected by default)
Text Link Options: Select "Use Screen Text". (Selected by
default)
Image Map Link Verbosity: Select "All Image Map Links".
(Selected by default)
Graphical Link Verbosity: Select "All Graphical Links".
(Selected by default)
Lists and Tables Page
Select "Indicate Lists". (Selected by default)
Headings and Frames Page
Headings Verbosity: Select "Headings with Level". (Selected
by default)
Select "Announce Frame Start and End". (Selected by
default)
Misc Page
Select "Speak Access Keys within Web Pages". (Selected by
default)
Form Field Prompts Options: Select "use labels". (Selected by
default)
You can select additional verbosity options to increase
the amount of information spoken by JAWS, if you wish.
End of "Note about JAWS Configuration Manager HTML options"
JAWS provides a number of keystrokes to navigate Web pages. This
section describes many of those keystrokes, to be tested with Firefox.
Perform all of these keystrokes to verify that they work with the Firefox
browser.
Verify that each of the following JAWS navigation functions works with
as described while reading this test case.
General navigation keys
Perform each of the following keystrokes and verify that JAWS
performs the indicated action. These keystrokes can be tested from
anywhere within this test case.
Left Arrow and Right Arrow - move left or
right one character
Ctrl + Left and Ctrl + Right Arrow - move
left or right one word
Up Arrow and Down Arrow - move up or down
one line
Insert + Up Arrow - read current line
Insert + Down Arrow - Say all: read from current
position to end of page
Alt + Left Arrow - Back a page
Backspace - Back a page (same as Alt+LeftArrow)
Alt + Right Arrow - Forward a page
Alt + D - Move to address bar (location or URL text
field at top of browser window)
Insert + A - Read address bar (without changing JAWS
cursor)
Insert + A twice quickly - Move JAWS Cursor to
address bar (same as Alt+D???)
Heading navigation
Verbosity settings for headers (press Ins + V to
view):
Element: Headings
use default settings: (select "Indicate Heading Level")
Perform the following keystrokes and verify that JAWS performs the
indicated action.
(Note that this file contains heading levels 3, 4, and 5. The main
section headings, including the title, are <h3> headers, and
some sections contain <h4> and <h5> headers. As a test
aid, sighted users can visually recognize headers in this file by the
light blue background stretching across the window from left to
right. If you are unsure if JAWS is finding all legitimate header
tags, view the page source for the page to determine where html
header tags are truly being used.)
Insert + F6 - Display list of headings on page
H - Next heading
Shift + H - Previous heading
Alt + Insert + Home - First heading
Alt + Insert + End - Last heading
# (1 through 6) - Next heading of level #, where #
is from 1 to 6. (This file contains level 3, 4, and 5
headers.)
Shift + # (1 through 6) - Previous heading of level
#, where # is from 1 to 6.
Paragraph navigation
Perform the following keystrokes and verify that JAWS performs the
indicated action.
There are many paragraphs in this test case file (using the html
<p> tags). To ensure that JAWS is navigating to true html
paragraphs, you can view the page source to see where the paragraph
tags are used.
P - Next paragraph
Shift + P - Previous paragraph
List navigation
Verbosity settings for lists (press Ins + V to
view):
Element: Lists
Use default settings (select "Insert Beginning / End
Message", "Indicate Bullets", "Read to End (Bullets))
Perform the following keystrokes and verify that JAWS performs the
indicated action. There are many lists found in this file, including
this list of instructions.
Ctrl + Insert + L - Display list of all ordered,
unordered, and definition lists
L - Next list
Shift + L - Previous list
I - Next list item
Shift + I - Previous list item
F8 - Select list (when pointing to beginning of
list)
Quote/Blockquote navigation - using <q>
or <blockquote> html tags.
Verbosity settings for quotes / blockquotes (press Ins +
V to view):
Element: Quotes / Block Quotes
Recommended settings: select "Insert Beginning / End
Message"
Perform the following keystrokes and verify that JAWS performs the
indicated action. There are some quote and blockquote examples
provided below for use in testing these keystrokes.
Q - Next quote or blockquote
Shift + Q - Previous quote or blockquote
Quote and Blockquote examples for use in this test:
This
sentence is surrounded by the <q> quote html tag.
And this set of sentences is surrounded by the
<blockquote> tags, and is therefore set apart from the
surrounding text. You should be able to use the above quote-related
keystrokes to navigate these two quoted test sections.
Access Keys
An Access key is an attribute that can be associated with various
HTML tags. The access key is a single keyboard character. When an
access key is defined, Firefox allows you to press Alt + Shift +
specified character to jump directly to the spot on the web
page where the access key was defined.
The following lines contain several access keys. Press the
indicated key combinations to jump to the indicated element. Verify
the following things:
Verify that the screen reader jumps to the indicated
destination, and speaks the proper information for the target
element.
Verify that, after jumping to the target, the screen reader
proceeds from that point when continuing navigation. For example,
if you press Alt + Shift + B to jump to the first
button, then press the Down Arrow key, the screen reader should
speak the line directly following the button, and not retain its
original focus from before the execution of the access key.
Verify that when reading the elements that contain access keys,
JAWS announces that an access key is available, and also speaks the
alt+shift+letter combination of the access key.
The following access key combinations are provided below:
Alt + Shift + A - access key attached to an ANCHOR
tag (defining a text link).
Alt + Shift + B - access key attached to a BUTTON
tag.
Alt + Shift + C - access key attached to an INPUT
tag.
Alt + Shift + L - access key attached to a LABEL
tag.
Alt + Shift + T - access key attached to a TEXTAREA
tag.
Accesskey on button tag. Press Alt + Shift + B to jump
to the following button.
Miscellaneous navigation
Perform the following keystrokes and verify that JAWS performs the
indicated action. You may need to view the page source to ensure that
JAWS is navigating to the proper sections of the page.
S - Move to next same element (same as the current
element)
Shift + S - Previous same element
D - Move to next different element (different from
current element)
Shift + D - Previous different element
Shift + Period (.) - Move to next element
Shift + Comma (,) - Previous element
J - Jump to line (then press line number, and
Enter to complete the jump)
Shift + J - Previous line (return to pre-jump
location on page)
Verbosity settings for links and images (press Ins + V to
view):
Element: Links
Use default settings (select "Indicate Link Before",
"Identify Visited Links", "Read to End")
Element: Objects
Recommended settings: select "Include Type", "Expose
Alternative Text"
Element: LongDesc
Recommended settings: select "Indicate LongDesc"
JAWS provides keystrokes to navigate from one link to another in the
Web page. Perform the following keystrokes and verify that JAWS performs
the indicated action.
Following the list of keystrokes to be tested, below, you will find
some sample link elements to be used in this test, including a text link,
an image link, and an image map containing several links. (There are many
other links in this file that can be tested using the JAWS link
navigation keys also.)
(Note that the Tab key will move to not only links,
but also other controls, like text entry fields and buttons. This
section is concerned only with moving between links.)
Shift + Tab - move to previous link or control
V - Next visited link
Shift + V - Previous visited link
U - Next unvisited link
Shift + U - Previous unvisited link
Enter - Activate Link at current cursor position (if on
a link) Verify that the JAWS focus moves to the target of the
link.
Enter - Enter is also used by JAWS to activate link to
"long description" file associated with a graphic image. (Does JAWS
provide a way to view the longdesc if there is a link (href) associated
with the image?)
Ctrl + Enter - Open link in new tab (Firefox tabbed
browsing)
Shift + Enter - Open link in new window
N - Move to next non-link text
Shift + N - Previous non-link text
A - Move to next Anchor
Shift + A - Previous Anchor
Ctrl + Insert + A - Display list of Anchors on page
G - Move to next graphic
Shift + G - Previous graphic
Ctrl + Insert + G - Display list of graphics on
page
Link elements for use in Link testing
Verify that all of the JAWS keystrokes listed above work properly with
all of the following links.
The graphic image below is an image link that links to the Link
Navigation section header. It also has alternative text (alt) defined.
Verify that JAWS speaks the alternative text for the image,
which is: "Groovy Image Link Button"
Verify that JAWS indicates that a link is associated with the
image.
With focus on the image button, verify that JAWS provides a
method of activating the link. You should be able to press
Enter to activate the link.
This is an image map that links to various sections of this file.
Each area of the image has alternative text which is the same as the
text on the image.
Verify that you can navigate to each of the buttons on the
image map.
Verify that JAWS reads the Alternative text for each button
(which is the same as the button text).
Verify that you can activate the links for the buttons by
pressing the Enter key.
The graphic image below has a long description (longdesc) attribute
defined.
Verify that JAWS speaks the alternative text for the image,
which is: "Groovy Image Link Button with long description"
Verify that JAWS indicates that a long description is available
for the image. JAWS should prompt you to press
Enter to open the long description.
With focus on the image button, press Enter to
open the long description page. Verify that the long description
page is displayed and is announced by JAWS.
Return to this page when finished reading the long description
page.
Verbosity settings for JavaScripts (press Ins + V to
view). Note, there are no specific options for JavaScripts, but the
Object settings may affect the way Window-Eyes reads certain
elements.
Element: Objects
Recommended settings: select "Include Type"
This section contains some simple JavaScripts.. Please feel free to
find other more complex JavaScript examples on other Web pages on the
net, and test the ability to use those JavaScripts in Firefox using
JAWS.
Javascript: Onkeypress alert
The JavaScript in this section is activated by placing keyboard focus
on the sentence that says "Activate this JavaScript to cause onKeyPress
alert", and pressing the Enter key. When activated, the
JavaScript will display an alert pop-up message.
The goal of this section is to verify the following things:
Verify that JAWS identifies the JavaScript as such, letting the
user know that they can interact with the script.
Verify that JAWS will allow the user to activate the script.
Verify that JAWS will read the resulting alert pop-up to let the
user know what has happened.
Verify that JAWS honors the "tabindex" property and adds the
Javascript text to its tab ring.
Navigate to the script, below, using these methods. (Go through
these steps twice, once for each method of navigation!):
Verify that JAWS makes it clear that a JavaScript has been
encountered when it reaches the script text.
Press the Tab or Shift + Tab key to move
focus to the script text.
Verify that JAWS includes the script in its tab ring. (The
JavaScript text is surrounded by an anchor tag with the
"tabindex" attribute, which instructs the Web browser to add it
to the tab ring.)
With keyboard focus on the script
Press Enter to activate the onkeypress event.
Verify that an alert box is displayed, with the words "You
pressed enter".
Verify that JAWS reads the text that is displayed in the
pop-up.
Select "OK" to clear the alert box.
(If you click the mouse on the sentence, you will activate
the "onclick" event, and a different message will
display.)
In this example, the pulldown list contains links to various sections
of this file. The Go button activates the Javascript to jump to the
selected destination.
Navigate to the script, below, using both of these methods. (Go
through these steps twice, once for each method of navigation!):
When the pulldown list is read, verify that JAWS makes it
clear that it is a pulldown list.
When the Go button is read, verify that JAWS says the words
"Go" and "Button" to make it clear that it is a button, and
that the button text says "Go".
Press the Arrow keys or Tab or Shift
+ Tab key to move focus to the pulldown list.
Verify that JAWS includes the pulldown list in its tab
ring.
Verify that JAWS includes the Go button in its tab
ring.
With keyboard focus on the pulldown list:
Press Down Arrow to navigate through the list items
in the pulldown list.
Verify that JAWS reads the list items as you arrow down
through them.
Press Enter to select an item from the list.
Press Tab to move focus to the Go button.
Press Enter to execute the Go function.
Verify that JAWS move focus to the selected section, and starts
reading from that point.
Javascript: Popup current time
The following button will cause a popup window to display the time. It
interacts with a continuously running JavaScript that starts when this
page is first loaded.
Make sure you are in Browse mode (press Ctrl + Shift + A
to set).
Use the normal JAWS navigation keys to move to the button below
(use Arrow keys)
Verify that JAWS tells you that it is a button, and the button
text says "Display the current time".
Press Enter to activate the button.
Verify that a pop-up message is displayed, with the current
time, and that JAWS reads all of the text in the pop-up
dialog.
Press Enter again to select the "OK" button to close the
pop-up.
Verify that JAWS returns focus to the same spot as before the
pop-up was generated.
Verbosity settings for Forms (press Ins + V to view).
Element: Forms
Recommended settings: select "Insert Beginning / End Message
(Forms)", "Insert Beginning / End Message (Fieldsets)"
Element: Objects
Recommended settings: select "Include Type"
JAWS provides keystrokes to navigate between form elements. Use the
following instructions to verify the JAWS form navigation features are
compatible with Firefox.
Use the following form navigation keystrokes to navigate the forms on
this page. There are three forms in this file: one in the JavaScript
section, one in this section (directly after this list, below), and the
third form is in the section titled "Testing Additional JAWS features".
When testing the JAWS keys that navigate within a single form, use the
form in the section below titled "Sample form for HTML form testing".
To use the form navigation keys listed below, Virtual PC Cursor
mode must be ON.
To allow keyboard input into the form, you must enter Forms mode.
(As described in the keystroke list below, you can press
Enter to enter Forms mode.
Perform all of the keystrokes listed below to navigate between
controls within a form.
Use these keystrokes to move from one form to another: (Does JAWS
have a way of doing this?)
F - Next form
Shift + F - Previous form
Use the following keystrokes to navigate between controls and
fields in a form.
F - Next form field
Shift + F - Previous form field
Insert + Ctrl + Home - Move to first form field
Insert + Ctrl + F - Move to last form field
B - Move to next button
Shift + B - Previous button
Ctrl + Insert + B - Display list of buttons
C - Next combo box
Shift + C - Previous combo box
Ctrl + Insert + C - Display list of combo boxes
E - Move to next edit box
Shift + E - Previous edit box
Ctrl + Insert + E - Display list of edit boxes
R - Move to next radio button
Shift + R - Previous radio button
Ctrl + Insert + R - Display list of radio
buttons
X - Move to next check box
Shift + X - Previous check box
Ctrl + Insert + X - Display list of check boxes
Enter - Enter Forms mode to allow keyboard
input
Numpad Plus (on full size keyboard) - Exit forms
mode CapsLock + Semicolon (on Laptop) - Exit forms mode
Insert + F5 - Display list of form fields
Sample Form for use in HTLM Form testing
The following form contains a variety of HTML form options.
Instructions are included for navigating the form fields and
controls.
Use the basic JAWS navigation keys (Arrow keys) to
listen to the table.
Verify that JAWS indicates that a form has been encountered,
and the controls (buttons, radio buttons, checkboxes, text input
fields) are announced as they are encountered.
The following keys are provided by JAWS for frame navigation.
M - Next frame
Shift + M - Previous frame
Insert + F9 - Display list of frames
Rather than implementing frames inside of this file, this test will be
done on a file containing example frames on the w3schools Web site. You
are encouraged to find other examples of Web pages using Frames on the
internet to test with JAWS also.
Verbosity settings for Tables (press Ins + V to
view):
Element: Tables
Recommended settings: select "Insert Beginning / End Message",
"Include Table Summary", "Include Table Size", "Indicate Row
Grouping", "Indicate Merged Cells", "Header Attrib Override",
"Default Header to Column and Row", "Read to End".
Here is a list of JAWS keystrokes provided for table navigation.
Verify the function of these keystrokes using the sample tables
below.
Table navigation
T - Next table
Shift + T - Previous table
Ctrl + Alt + Right Arrow - Move to and read next
cell
Ctrl + Alt + Left Arrow - Move to and read prior
cell
Ctrl + Alt + Up Arrow - Move to and read cell
above
Ctrl + Alt + Down Arrow - Move to and read cell
below
Ctrl + Alt + Home - Move to and read first cell
Ctrl + Alt + End - Move to and read last cell
Ctrl + Alt + Numpad 5 (on full size keyboard) - Read
current cell ???? (what is this on a laptop?) - Read current
cell
Windows Key + Down Arrow - Read next row
Windows Key + Up Arrow - Read prior row
Windows Key + Comma (,) - Read current row
Insert + Shift + Home - Read from beginning of row
to current cell
Insert + Shift + Page Up - Read from current cell to
end of row
Windows Key + Period (.) - Read current column
Insert + Shift + End - Read from top of column to
current cell
Insert + Shift + Page Down - Read from current cell
to bottom of column
Windows Key + J - Jump to table cell
(must also enter cell number)
Shift + Windows Key + J - Return to previous
cell
General Instructions for testing tables
Use the keystrokes listed above to navigate the following tables.
Verify that all keystrokes work as described.
Verify that the table headers are announced as you change rows or
columns.
Verify that the table summary is announced when the table is
encountered by JAWS.
Table 1: Simple table using column and row headers
In this table, each cell in the first row is a column header, and the
first cell of each row is a row header. The table uses the "scope="
attribute to instruct the screen reader that the row and column headers
are available. The table summary attribute is as follows: "This table
contains 3 columns, first a country name, then the name of the capital
city, then the name of the largest city."
Capital city and Largest city of select countries
Country
Capital
Largest City
Australia
Canberra
Sydney
Brazil
Brasilia
São Paulo
India
New Delhi
Mumbai
Morocco
Rabat
Casablanca
United States of America
Washington, D.C.
New York City
Table 2: Complex table with multiple column headers
In this table, each data column is associated with one row header and
two column headers. The table uses the "headings=" attribute to instruct
the screen reader that multiple column headers are available for each
data cell. The table summary attribute is as follows: "This complex table
contains 4 columns, first a name, then home phone number, cell phone
number, and fax number."
The Mozilla.org Web site contains a number of examples of accessible
DHTML elements. Rather than reproduce them here, follow the links
provided below to load those example pages.
Detailed instructions for testing these controls with JAWS have not
yet been written. For now, just verify the following things while viewing
the DHTML pages with JAWS running:
Verify that you can use the JAWS text and link navigation
techniques to read and access all of the fields and controls on the
DHTML example pages.
Verify you can activate all of the controls that allow user
interaction with JAWS running..
There are many other keyboard functions provided by JAWS. Here is a
list of keys that should be tested. View the JAWS documentation to see
more information about "Using the Internet with JAWS".
Miscellaneous navigation
Shift + Insert + F1 - Display element information
(for element with current focus)
Ctrl + Shift + Insert + F1 - Display
detailed element information (compare with IE output)
F5 - Reload web page
Ins + Esc - Refresh JAWS virtual mode
F3 - JAWS Find next
Shift + F3 - JAWS Find previous
Ctrl + K - Temporary place marker
Ctrl + Shift + K - List, Goto, or Modify place
markers
K - Move to next place marker
Shift + K - Move to previous place marker
Insert + Ctrl + Enter - Activate mouse-over
Copy/Paste keystrokes (a text entry field is provided below
Ctrl + A - Select entire page
Shift + Left Arrow - Select character to left of
pointer
Shift + Right Arrow - Select character to right of
pointer
Ctrl + Shift + Left Arrow - Select word to left of
pointer
Ctrl + Shift + Right Arrow - Select word to right of
pointer
Shift + Up Arrow - Select line from current line
position to same place on previous line
Shift + Down Arrow - Select line from current line
position to same place on next line
F8 - Select entire element (such as a table or a
list)
Ctrl + C - Copy selected text to system
clipboard
Ctrl + V - Paste text from clipboard to current
insertion point.
You may use the following text input area to test the paste function,
after copying text into the system clipboard. Remember that you must
enter Forms mode before you can enter text into the field! (Press
Enter to enter Forms mode.)
Firefox provides a feature called Caret Browsing, where a user can
navigate a Web page in a way similar to navigating a document in a word
processor. Visually, you see an insertion caret (cursor) on the page, and
you can use the Arrow keys to move up, down, left, and right,
one line or character at a time.
Caret Browsing mode is not really needed when using a
screen reader such as JAWS, since the screen reader provides similar
functions. However, because a user can potentially enter caret browsing
mode even when a screen reader is in use, some testing of that scenario
should be done. Failures in this area will not result in VPAT issues.
Follow these instructions to verify the basic functions of Caret
Browsing.
Press F7 to start Caret Browsing mode. Select the "Yes"
button in the resulting popup (if it displays) to complete the switch
to Caret Browsing mode.
