You are viewing information archived from 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.


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

  1. Scroll bars: Scroll up/down and right/left on web pages that are too large to fit in the browser window.
  2. Links: Tab to text links and image links in a web page and use the keyboard to select the links.
  3. JavaScripts: Test simple JavaScript functions
  4. HTML Form fields and controls: Navigate form entry fields and controls with the keyboard.
  5. HTML Frames: Navigate frames with the keyboard.
  6. DHTML controls: Navigate DHTML elements with the keyboard.
  7. 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.

  1. win-webcontent-kbnav.html (This is the file you are reading right now.)
  2. groovyimg.jpg
  3. imgmap1.jpg

Test Case Instructions

  1. Open this file with Firefox.
  2. 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.

Testing Scroll bars

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.

Steps for testing Scroll Bars

Follow these instructions.

  1. Press the Down Arrow key to scroll down a line at a time, and the Up Arrow key to scroll back up.
  2. Press the Page Up and Page Down keys to scroll up and down a page at a time.
  3. Press the Right Arrow key to scroll to the right, and the Left Arrow key to scroll back to the left.

End of Scroll Bar test section.

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.

  1. 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.)
  2. 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.
  3. Press Tab one more time. You should see the visual focus move to the following image link: Groovy Image Link Button
  4. 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.
    image map containing links to various sections of this document.
  5. Next, display the context menu and properties for one of the image map links above, using these steps.

Scroll Bars Links JavaScripts Forms DHTML Caret Browsing Last Update

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.

  1. Tab to the "Tab here and press Enter..." sentence below.
  2. Press Enter to activate the onkeypress event.

> 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.

  1. Tab to the "Select a destination" pulldown.
  2. Press the Arrow keys (up or down) to select a destination.
  3. With focus in the "Select a destination" pulldown, press Alt + Down Arrow.
  4. Press Tab again to move to the Go button.
  5. Press Enter to activate the JavaScript.
  6. Verify that focus moves to the selected jump destination using both of these methods:

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.

  1. Tab to the button below.
  2. Press Enter to activate the button.
  3. Verify that a pop-up message is displayed, with the current time.
  4. Press Enter again to select the "OK" button to close the pop-up.

End of JavaScript test section

Testing HTML Form fields and controls

The following form contains a variety of HTML form options. Instructions are included for navigating the form fields and controls.

  1. 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!)

Beginning of Form

This form contains a number of typical HTML form input elements. The numbered instructions will guide you through keyboard navigation of this form.

  1. Press Tab to jump to the first text field in the form, below (the "email" field).
    • Verify that you see a clear visual focus indication in the "email" text input field. (In this case, the field contains an initial value. You should see the initial text highlighted when focus moves to the input field.)
  2. Press Tab again, to jump to the name field.
    • Verify that you see a clear visual focus indication in the name field. (In this case, you will see a blinking cursor.)
    (Testing instructions continue after the User Information group.)
User Information

  1. Press Tab to move to the radio button section of the form, below.
    • Verify that you see a clear visual focus indicator on the "Ice Cream" option.
    • Note that for radio buttons, if there is a default value set, as in this case, you will tab directly to the pre-selected option, rather than to the first item in the group.
  2. With focus on the Ice Cream option, press the Up Arrow and Down Arrow keys to move focus to the other options.
    • Verify that you see a clear visual focus indicator each time you press the Arrow key.
    (Testing instructions continue after the Favorite dessert group.)
Favorite dessert

  1. Press Tab to move keyboard focus from the "Favorite dessert" group above to the "Favorite flavor" section below.
    • Verify that you see a clear visual focus indicator on the first option (Chocolate). In this case, the solid-line checkbox changes to a dotted-line checkbox.
    • Note that for checkboxes, you tab to the first item in the group, regardless of whether any items have been pre-selected.
  2. Press Tab to move to the next checkbox. This will move from the "Chocolate" checkbox to the "Vanilla" checkbox. (Note that, unlike the radio button group, above, you must press Tab to move between checkboxes, and not the Arrow keys.
    • Verify that you see a clear visual focus indicator on the second option (Vanilla). Again, the solid-line checkbox changes to a dotted-line checkbox.
    (Testing instructions continue after the Favorite flavor group.)
Favorite flavor

  1. Press Tab to move keyboard focus from "Favorite flavor" above to the "Specify file name" field below.
    • Note that there is no tab stop at the hidden field. (You can look at the page source to see the hidden field, if you are interested.)
    • Verify that you see a clear visual focus indicator in the "...file name" field. (You should see a blinking cursor.)
  2. Press Tab again to move to the "Browse" button following the text field.
    • Verify that you see a clear visual focus on the Browse button. (You should see a dotted line around the text within button.)
  3. Press Enter to activate the browse button.
    • Verify the "File Upload" window displays after pressing Enter.
  4. Press Esc to close the browse window.
    • Verify that the File Upload window disappears.
    • Verify that visual and keyboard focus return to the Browse button below.
  5. Repeat steps 10 and 11 using Spacebar instead of Enter. The Spacebar is a standard key for activating buttons.
    • Verify the "File Upload" window displays when Spacebar is pressed.
    • Again, verify that focus returns to the Browse button again after pressing Esc to exit the File Upload menu.
    (Testing instructions continue after the Specify file name option.)

You should not be able to see it or tab to it. (This text is not part of the field!)

  1. Press Tab to move keyboard focus from "Browse" button to the "Send" button, below.
    • Verify that you see a clear visual focus indicator in the "Send" button. You should see a dotted line around the text within the button.
    • (Note that this form is not functional... if you press the "Send" button, it will not submit this form, but it will attempt to find some server on the network, and give you a "server not found" error. The function of the Send button is not a focus of this test.)
  2. Press Tab again to move to the "Reset" button.
    • Verify that you see a clear visual focus on the Reset button. (You should see a dotted line around the text within button.)
    • (If you select the Reset button, either with Enter or Spacebar, it will reset the values of all of the form fields and controls to their initial states. This is not part of the focus of this test though.)

End of Form

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.)

  1. Open the following web page with Firefox:
  2. When the page loads, press F6 several times.
  3. Then press Shift + F6 several times.
  4. 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.

End of Frames test section.

Testing DHTML controls

The 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.

  1. 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.
  2. Press the Up Arrow key, then the Down Arrow key.
  3. Press the Right Arrow key, then the Left Arrow key.
  4. Press the Page Up key, then the Page Down key.
  5. Press the Home key.
  6. Press the End key.
  7. Press Ctrl + Home.
  8. Press Ctrl + End.
  9. Press the Tab key and the Shift + Tab key.
  10. Test copy and paste to the system clipboard:

End of Caret Browsing test section.

End of Test Case