You are viewing information archived from Mozilla.org on 2015-08-04.
You are here: Mozilla Accessibility QA testcases >
Keyboard Navigation and Visual Focus of Web Content
Accessibility QA Test Case: Keyboard Navigation and Visual Focus of
Web Content in Firefox
Firefox Web Content on Microsoft Windows: Keyboard navigation of Web
content with no Assistive Technology software running.
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. 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
- Scroll bars: Scroll up/down and
right/left on web pages that are too large to fit in the browser
window.
- Links: Tab to text links and image links in a
web page and use the keyboard to select the links.
- JavaScripts: Test simple JavaScript
functions
- HTML Form fields and controls: Navigate
form entry fields and controls with the keyboard.
- HTML Frames: Navigate frames with the
keyboard.
- DHTML controls: Navigate DHTML elements with
the keyboard.
- Caret Browsing: Navigate the page in
Caret Browsing mode, use keyboard functions like cut/paste.
This test case is based on the IBM Web
accessibility checklist, checkpoints 1, 2, 5, 7, and 9.
Scope of test
The goal is to test a sample of common Web page elements. It is
perhaps impossible to document every type of Web page element and testing
techniques for each, so this test case provides some of the common
elements to be tested. (Testers are encouraged to surf the Web and use
the techniques described here to test other live Web sites.)
The techniques discussed in in this test case are
specifically for Firefox running on the Microsoft Windows operating
system.
Tools required
No software tools are required for this test.
Note that this is a visual test. There should be no assistive
technologies (such as screen readers or screen magnifiers) running during
the execution of this test case. Assistive technologies generally provide
their own keyboard navigation methods when viewing Web pages.
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-kbnav.html (This is the file you are reading right
now.)
- groovyimg.jpg
- imgmap1.jpg
Test Case Instructions
- 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.
- Using the Firefox browser, scroll down through this file and follow
the instructions written in each section. Do
not use the mouse during the execution of this test case, except where
noted.
Rationale for testing Scroll Bars
This Web page, like many on the Web, are too large to be seen in their
entirety within the Web browser window. Because many users cannot use a
mouse, we must test to be sure it is possible to scroll through all of
the Web page content using the keyboard.
You should see a vertical scroll bar along the right side of this
browser window, and a horizontal scroll bar along the bottom side of the
window.
- If you do not see them, then resize the window to a smaller size
until you see both scroll bars. (You may use the mouse to resize the
window, if desired.)
- The following horizontal rule has a set width of 120% of the screen
width, which should force a horizontal scrollbar to display at the
bottom of the browser window. (If it does not, there is a functional
problem in the browser!)
Steps for testing Scroll Bars
Follow these instructions.
- Press the Down Arrow key to scroll down a line at a
time, and the Up Arrow key to scroll back up.
- Press the Page Up and Page Down keys to
scroll up and down a page at a time.
- Press the Right Arrow key to scroll to the right, and
the Left Arrow key to scroll back to the left.
- Verify that you can use the arrow keys to scroll to parts of
the Web page not currently visible within the browser window.
- Yes, this is pretty trivial, but it's got to be
done!
End of Scroll Bar test section.
Testing Link Navigation
Rationale for testing Link Navigation
Many Web pages contain links to other Web pages, or links to other
sections within the same Web page. There are many ways to implement these
links. Two of the most common are text links and image links, where a
mouse user would "click" on either a string of text or on a graphic image
to follow the link. Because many people cannot use the mouse, or just
prefer to use the keyboard, users must be able to navigate to these links
using only the keyboard.
The Tab key is used to navigate to links on a Web page.
(The tab key is also used to navigate to other user controls in a Web
page, such as input fields and buttons in forms.) When you press the
Tab key, focus will jump to the next link or control.
- When the browser first loads a Web page, the initial keyboard focus
for the page should be at the top of the page.
- When you press Tab for the first time on a page,
keyboard focus should move to the first link or control at the top of
the page.
- Remember that the links on the page may not be visible. Often, for
example, the first link on a page is a "skip to main content" link,
which is provided to allow users to skip over banner images and Web
site navigation links and jump directly to the main content of the
current page. The "skip to main content" link is often attached to an
invisible image, since it is not generally used by sighted users. (More
often, "skip to main content" is used by blind users who are using a
screen reader,
Steps for testing Link Navigation
- Click here to set keyboard focus to the
Link Navigation steps. Just this once, you may use the mouse for
this, if you wish. We just want to place keyboard focus at a known
location, since there is no way of knowing what keys you pressed before
you got to this test. FYI... clicking on the link in this step will
move the keyboard focus to the "Steps for testing Links" header, just
above.)
- Press the Tab key once. Verify that you see a
dotted-line box around the words "Click on this link". The dotted line
is a "visual focus indicator". Any time you press Tab in a
We page, a clear visual focus indicator should show the location of the
current keyboard focus.
- Press Tab one more time. You should see the visual focus
move to the following image link:
- Verify that you see a clear visual focus indicator (dotted
line) around the image. (As you will see, the visual focus
indicator will be clearer for some objects than it is for others...
but there must be a visual indicator of some sort.)
- Press Tab seven more times. You should see the visual
focus move to the following client-side image map. There are 7 mapped
areas in this image, corresponding to the different colored bands.
- Verify that you see a clear visual focus indicator (dotted
line) around each section of the image each time you press
Tab.
- (Note that as of the time this test case was written, this
visual focus test fails on the image map area with a black
background. Bugzilla bug 338033
has been written against this bug.)
- Next, display the context menu and properties for one of the image
map links above, using these steps.
- Press Shift + Tab until focus is on the "Forms" link
in the image map above. You will see the dotted-line visual focus
indicator around the word "Forms".
- Press Shift + F10 to display the context menu. You
should see the context menu, listing several link-related options.
The last item in the menu should be Properties.
- Verify that the context menu is the same as the context menu
displayed when you press the right mouse button on the same
image.
- Press P to select the Properties option. Verify that
you see the properties dialog window pop up.
- Verify these properties are listed in the properties dialog:
- Alt = Forms
- Title = Html Forms
navigation test techniques
The above properties correspond to the "Alt=" and
"Title=" attributes specified in the image map tags for the Forms
section of the image map. If you view the page source for this
page, you will see similar properties set for the other image map
areas, if you wish to verify those also.
- Press Esc to close the properties window. Verify
that visual focus returns to the Forms link (back where you
started). Press and Tab and Shift + Tab to
verify that keyboard focus returned to the Forms link.
End of link navigation test section.
Testing Simple JavaScripts
This section contains some simple JavaScripts, with instructions on
how to test them with the keyboard. 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.
Javascript: Onkeypress alert
In this example, both "onkeypress" and "onclick" events are coded, and
different alerts are displayed depending on which action is taken.
-
Tab to the "Tab here and press Enter..." sentence below.
- Verify that you see a clear visual focus indicator (dotted
line) around the text.
- (Note that as of the time this test case was written, this
visual focus test fails. Bugzilla bug 338035
has been written against this bug.)
- Press Enter to activate the onkeypress event.
- Verify that an alert box is displayed, with the words "You
pressed enter".
- 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.)
>
Tab here
and press Enter for onKeyPress alert. <
Javascript: Jump to selected destination
In the following example, the Go button activates the Javascript to
jump to the selected destination.
- Tab to the "Select a destination" pulldown.
- Press the Arrow keys (up or down) to select a
destination.
- Verify the arrow keys cause different selections to display in
the field.
- With focus in the "Select a destination" pulldown, press Alt +
Down Arrow.
- Verify the selection pulldown is displayed.
- Press Tab again to move to the Go button.
- Press Enter to activate the JavaScript.
- Verify that focus moves to the selected jump destination using both
of these methods:
- Visually verify that the selected destination is displayed in
the browser.
- Press Tab to verify that the keyboard focus starts
jumping from the selected destination. (In other words, make sure
the keyboard focus is not still set on the Go button in this
JavaScript section.)
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.
- Tab to the button below.
- Press Enter to activate the button.
- Verify that a pop-up message is displayed, with the current
time.
- Press Enter again to select the "OK" button to close the
pop-up.
End of JavaScript test section
The following form contains a variety of HTML form options.
Instructions are included for navigating the form fields and
controls.
- Click here to set keyboard focus to the
HTML Form testing section. This is another of those rare times when
you may use the mouse, if you wish. This will place keyboard focus to a
spot just before the beginning of the HTML form found below. (Then
return to keyboard navigation!)
End of Form test section.
Testing HTML Frames
Some web pages use frames to separate different areas of the page,
like window-panes within a large window. The F6 and Shift
+ F6 keys are used to move from one frame to another in the web
page.
We will link to a sample page at the w3schools web site to display and
test a page implemented with frames.
Follow these steps when testing keyboard navigation of frames. Because
you need to open a new web page, it might be best to read all of these
instructions before proceeding. (Note that these instructions also make
use of Firefox's Tabbed Browsing capability.)
- Open the following web page with Firefox:
- Press Tab to focus on the w3schools link below.
- Press Shift + F10 to open the context menu for the
link.
- Press T to select the "Open Link in New Tab" option. Verify that a new web page notebook tab is
created at the top of the Firefox window. It has a title that
starts "Tryit Editor..."
- Press Ctrl + Tab to switch to the "Tryit Editor..."
notebook tab. (You can press Shift + Ctrl + Tab to
return to this page to review the instructions.)
- Link to
Frames example at w3schools web site
- When the page loads, press F6 several times.
- Watch the focus carefully. Verify that you see a clear visual
focus indicator when focus moves to each frame. You should see a
dotted line around the edge of each frame when it has focus.
- Then press Shift + F6 several times.
- Watch the focus carefully. Verify that you see a clear visual
focus indicator when focus moves to each frame. You should see a
dotted line around the edge of each frame when it has focus.
- When you are done verifying the keyboard navigation and visual
focus of the frames on the w3schools page, press Ctrl + W to
close that notebook tab.
- Verify that the notebook tab containing the Frames example page
closes, and focus returns to this page, at the same point in the
page where you left it.
End of Frames test section.
Testing DHTML controls
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.
The examples do not contain detailed information on how to navigate
the DHTML elements. For now, just verify that you can use the
Tab key and/or the Arrow keys to access all of the
fields and controls on the DHTML example pages.
Links to DHTML example pages
End of DHTML test section.
Testing Caret Browsing and the system clipboard
function
Firefox provides a little-known feature called Caret Browsing. When in
Caret Browsing mode, you 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. In this
mode, you can use the keyboard to select text and copy it into the system
clipboard. When not in Caret browsing mode, you can select specific parts
of the page text only with the mouse.
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.
- Verify that the location of the keyboard focus (the "caret", or
cursor) is clear when Caret Browsing mode starts.
- (The caret is a vertical, blinking line. If the location of the
caret is not obvious, you may need to press the Up Arrow
or Down Arrow key and watch closely to find the
caret.)
- Continue to the next step when you have visually located the
caret.
- Press the Up Arrow key, then the Down Arrow
key.
- Verify the caret moves up one line at a time, or down one line
at a time, depending on which arrow key was pressed.
- Press the Right Arrow key, then the Left
Arrow key.
- Verify the caret moves right or left one character at a time,
depending on which arrow key was pressed.
- Press the Page Up key, then the Page Down
key.
- Verify the page moves up and down, as expected.
- Press the Home key.
- Verify the caret moves to the beginning of the current line
(left edge of the browser window) when you press
Home.
- Press the End key.
- Verify the caret moves to the end of the current line when you
press Esc.
- Press Ctrl + Home.
- Verify the browser displays the top of the page, and the caret
moves to the upper left corner of the page.
- Press Ctrl + End.
- Verify the browser displays the bottom of the page, and the
caret moves to the end of the last line of the page.
- Press the Tab key and the Shift + Tab key.
- Verify that focus moves between links and form controls, just
as when you tested them in non-Caret Browsing mode.
- Note these exceptions: If an Arrow key has a
specific function in the area where the caret is currently located,
you may need to use the Tab key to to navigate away from
that area. For example, in a radio button group, the Arrow
keys are used to move from one selection to another. If you
Tab to the radio button group in the form (in the forms testing
section, above), you cannot use the Arrow keys to move
the cursor back to the text above or below the radio buttons. You
must press Tab to move out of the radio button group,
then the Arrow keys will again move the caret up, down,
left, or right, as expected in Caret Browsing mode.
- Test copy and paste to the system clipboard:
- Press the Arrow keys to a text area in this
page.
- While holding down the Shift key, press the
Arrow keys to select a section of text. (The left and
right arrow keys will select text one character at a time, while
the up and down arrow keys will select a line at a time.)
- After highlighting the desired text, press Ctrl + C
to copy the text into the system clipboard.
- Press the Tab or Shift + Tab keys to move
to the text area box, below. (Note that you must
tab into the text area box in order to edit the contents of the
box. If you use the arrow keys to enter the box, you will remain in
"read only" mode, and you will not be allowed to edit (or paste)
text in the box.)
- Press Ctrl + V to paste the clipboard text into the
box.
- Verify that the text is pasted properly into the text
area.
- If you feel adventurous, you can also try to paste some text
into the Name field in sample form in the
forms testing section of this test case. Or, start your
favorite word processor and verify that you can paste the text
selected from the Firefox browser window into a word processor
document, to verify the "system" clipboard is being used properly.
Use the cursor to select different elements in this page: text,
form fields, graphics, links... and see how they make the
transition to the word processor document.
End of Caret Browsing test section.
End of Test Case