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.

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.

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

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.

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.

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.)
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 email:
Name:

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.
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 Cake
Pie
Ice Cream

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

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.)
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.)
Press Enter to activate the browse button.
- Verify the "File Upload" window displays after pressing Enter.
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.
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.)

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

Specify file name:

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

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.
  Text entry area for copy/paste test:
- 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.