You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

Mozilla/Gecko Keyboard Navigation Proposal

Kyle Yuan, Ginn Chen and Peter Korn
Sun Microsystems, Inc.

Preface

This is the second draft of the Mozilla/Gecko Keyboard Navigation Proposal from Sun Microsystems, Inc. After a huge volume of feedback, we carefully re-thought a number of things and especially took to heart the frequent request for configurability. To that end we have decided to prune some of the commands from this second draft to cover only "core" navigation to be implemented directly in C in Gecko. Configurability is most easily done in JavaScript extensions, and that is where we feel all of the "item navigation" work is best done. This is also where much of the "specialized for specific accessibility needs" navigation falls as well - blind users for example finding good table item navigation particularly important where a general keyboard user wouldn't benefit as much. Please see the new section Item-oriented Navigation using Javascript Component for more on this.

Sun plans to implement all of the specific keyboard navigation items discussed below (any exceptions are clearly noted). We believe that item navigation is important, but we don't propose to implement that immeidately - both because there is yet no clear concensus as to how it should be done, and because we feel that it is urgent that we have "core keyboard navigation" working well as quickly as possible. Please see Section XII for the list of keyboard navigation bugs and their status.

Contents

I. Introduction

A key accessibility requirement of software applications is that all features of that application be achievable via the keyboard (with exceptions made for things like painting programs). See Section 508 § 1194.21(a) which explicitly requires this of software that is acquired by the U.S. Federal Government. One clear feature of a web browser is the ability to copy a region of text from a web page and then paste it elsewhere (perhaps in a text document one is writing). Without a straightforward way to accomplish text navigation and selection within all web pages using only the keyboard, a web browser would fail to meet this key accessibility requirement, and should thus be avoided by U.S. Government purchasing agents and all others who are interested in acquiring and using accessible software applications.

In addition to using keyboard navigation to perform text selection, keyboard navigation of text is important for screen reader users. One of the most common ways that screen reader users interact with software applications in the Graphical User Interface is via the standard keyboard interaction mechanisms of their computer desktop or those unique to the software application: their screen reader receives events from the application in response to keyboard movement (focus or caret events commonly), and then in response reads to the user (or renders via a refreshible Braille display) the appropriate information.

The gecko rendering engine of Mozilla (also embedded in other applications such as Firefox, Galeon, and others) presents only a very minimal keyboard navigation scheme for web content, activated when the user presses the F7 key on their keyboard (sometimes called "F7 navigation" or "Caret Browsing Mode"). In the current Mozilla 1.7 and 1.8 codebases, this mode uses existing code written for use in the Mozilla Editor application for generating web content. Unfortunately there are two significant problems with this mode: (1) it provides no means to navigate the rich structure of web content (e.g. tables, forms), and (2) it has a lot of bugs.

This document contains a proposal by the authors outlining a rich keyboard navigation scheme they propose to implement on the gecko rendering engine and thereby into Mozilla, Firefox, Galeon, and all other gecko-embedding web browsers. It is hoped that a consensus among those interested in open source web accessibility can be reached rapidly based on this proposal, so that it can be implemented quickly. Note: this document proposes these keyboard navigation mechanisms only for when the user is in "Caret Browsing Mode". Section IX highlights the differences between these two modes.

II. Keyboard Navigation in a Block of Text

This section can be generally named as "keyboard navigation in text", because the key bindings are applicable to all text in browser content window, no matter if it is just a paragraph text or inside table/form.

Continuous Navigation

  • <left> moves the caret one character left. Especially, if the caret is at the beginning of a line, <left> will move it to the end of the previous line. If caret is already at the beginning of the current frame, <left> will be no-op.
  • <right> moves caret one character right. Especially, when the caret is at the end of a line, <right> will move it to the beginning of the next line. If the caret is already at the end of the current frame, <right> will be no-op.
  • <up/down> moves the caret one line up/down. Browser keeps the horizontal distance change of the caret as small as possible. If the target line is not long enough to keep the the caret's horizontal distance, browser will remember the original horizontal distance and will return the caret to that position when possible, see example below. If the caret is already at the first/last line of the current frame, <up/down> will be no-op.
    For example, there are 3 lines of text:
     mnopqrst^uvw
     123^
     abcdefgh^ijk

    When the caret is between 'h' and 'i', <up> will move it to after '3^'. Also, as the last the caret position will be remembered, so pressing <up> again will move the caret to after 't^' in the first line, or pressing <down> will move the caret back to the original position (between 'h' and 'i').

  • <ctrl+left> if the previous character is a part of a word, <ctrl+left> moves the caret to the beginning of that word; if the previous character is blank (spaces, tabs), <ctrl+left> moves the caret skip those blank spaces and to beginning of the previous word. For example:

    abc def gh^i - the next 3 stops when press <ctrl+left> will be '^g', '^d', '^a';
    abc def ^ghi - the next 2 stops when press <ctrl+left> will be '^d', '^a'.

  • <ctrl+right> is more complicated - its behavior depends on a preferences setting layout.word_select.eat_space_to_next_word.
    It defaults to true on Windows, but false on Linux/Solaris/Mac.

    layout.word_select.
    eat_space_to_next_word=    		 current caret position behavior example
    false (to be consistent with GTK) inside a word moves the caret to the end of that word a^bc def ghi - the next 3 stops are: 'c^', 'f^', 'i^';
    before blank (spaces, tabs) moves the caret skip those blank spaces and to end of the next word abc^ def ghi - the next 2 stops are: 'f^', 'i^'.
    true (to be consistent with Windows) inside a word moves the caret to the beginning of the next word a^bc def ghi - the next 2 stops are: '^d', '^g'';
    abc^ def ghi - the next 2 stops are: '^d', '^g'';
    before blank (spaces, tabs)

    An exception, for HTML listing elements (<ul>, <ol>, <li>), the caret won't go through the leading numbers/bullets of the <li> element. For example:

    1. abc
    2. def

    When the caret is before "d", <left> will move it to after "c" in the previous line.

  • preferences setting layout.word_select.stop_at_punctuation.
    If this setting is true, <ctrl+left/right> will stop at punctuations, for example, "-" in "e-mail".
    It defaults to true on Windows, but false on Linux/Solaris/Mac.

Status of Continuous Navigation work: <left/right/up/down> basically work well, though some rarely visible bugs remain. See Bugs that Affect Arrow Movement for the detailed status. <ctrl+left/right> is finished. See Bugs that Affect Ctrl+Arrow Movement for detailed status.

Discontinuous Navigation

  • <pgup/pgdn> scrolls the content one page up/down. The browser keeps the horizontal and vertical distance change of the caret as small as possible. As the browser will automatically scroll the page when the caret is about to move out of the visible area, there is no key binding for horizontal scrolling.
  • <home/end> moves the caret to the beginning/end of the current line. If the caret is already at the beginning/end of the current line, <home/end> will be no-op.
  • <ctrl+home/end> moves the caret to the beginning/end of the current frame. If the caret is already at the beginning/end of the current frame, <ctrl+home/end> will be no-op.
  • <tab> moves the caret to the next focusable widget (link, form control etc.).
  • <shift+tab> moves the caret to the previous focusable widget.

Status of Discontinuous Navigation work: Most commands are working properly, with a few problems remaining with Ctrl+Home/End. See Bugs that Affect Discontiuous Navigation for detailed status.

Text Selection

<shift>+any the caret movement keys listed above will move the caret from the current position (A) to the destination position (B) and select the text between A and B. For example, <shift+right> will move the caret one character right and select the current character.

Status of Text Selection work: There are some known issues with caret movement for text selection. Bugs to be filed in bugzilla.mozilla.org.

III. Keyboard Navigation Across Frame Boundaries

Using the key bindings mentioned in section II, you are not able to move the caret across frame boundaries.

  • For framesest, <F6>/<shift+F6> is used to switch to next/previous frame within the current document and the URL bar.
  • <F8> is used to focus frame's separator, and <arrows> to resize frames. (Not implement yet, we don't intent to do it immediately)
  • For iframe, both <tab> and <F6> can be used for switching focus into or out of iframe.

Browser remembers the most recent caret position of each frame and will return the caret to that position when press <F6>/<shift+F6>. If it is the first time that caret enters the frame, the caret will be placed at the beginning of that frame (as same as the position after you pressed <ctrl+home> in that frame).

Status of Keyboard Navigation Across Frames work: <F6>/<shift-F6> work, <F8> and iframe work not yet implemented. Bugs to be filed in bugzilla.mozilla.org.

IV. Form Control Navigation

Move into and out-of form Controls

When the caret is moved into a form control, this form control should be automatically focused. In the mean time, all keyboard events are captured by this form control. <alt+[/]> is designed for leaving the form control and back to the "caret browsing" mode. <alt+]> moves the caret to the position that next to the current control (move forward); <alt+[> moves the caret to the position that previous to the current control (move backward).
(We're using alt+[/] for this purpose now, but for a long-term we'll change the keybinding. Need more discussion.)

For example, when you moved the caret beyond the "t" of "input", you entered the input box, then you can start typing in the input box. When finished, press <alt+]> makes the input box lose focus and put caret after the input box, then you can continue moving the caret using <left>, <right> etc. Press <alt+[> makes the input box lose focus and put caret before the input box (i.e. after the "t" of "input").

input

INPUT (type=text); TEXTAREA

<arrows>, <ctrl+arrows>, <home/end/pgup/pgdn>, <ctrl+home/end> moves the caret inside text box;
<enter> submits form.

INPUT (type=checkbox/radio)

<space> Toggle state. Same as mouse click;

INPUT (type=button); BUTTON

<space> Press the button down;
<enter> Click the button;

SELECT (size>1)

<space> Select current item;
<shift+up/down> Extend select in multi-select listbox;
<up/down> Move focus to the previous/next item and select it;

<>To make discontiguous selection, use <ctrl+up/down> and <space>.
<ctrl+up/down> Move the focus indicator up/down without affecting the current selection;
<space>(after pressing <ctrl+up/down>) Toggle the selection state of the focused item.
For example, to select item 1,3,5, the key sequence is <space> to select item 1,<> <ctrl+down> twice to move focus indicator to item 3, <space> to select item 3, <ctrl+down> twice to move focus indicator to item 5, <space> to select item 5.

SELECT (size=1)

<><up/down> Cycle through list items backward/forward without dropping down the list;
<home/end> Select the first/last item;
<alt+up/down> Close up/drop down the list.

Status of Form Control Navigation work: All known bugs are fixed.

V. Keyboard Navigation in a Client-side Image Map

  • <tab>/<shift+tab> moves focus between each area of a client-side image map.
  • <space/enter> has the same effect as mouse clicking on the focused map area.
  • No keyboard navigation available for server-side image maps. Web authors shall avoid using it.

    Status of Client-side Image Map Navigation work: Completed.

VI. Keyboard Navigation into/out-of Plugins (and also Java[TM] Applets)

  • <tab>/<shift+tab> moves focus among the focusable widgets, including plugins, users should be able to <tab> into plugin and <tab> out of plugin.
  • Once the focus is inside plugin, the keyboard events will go there, plugins may have their own key binding.
  • Keys that the plugin doesn't need should get bubbled up to the browser. For example, most plugins should allow alt+left/alt+right through to the browser for history navigation.

NOTE: To support this, both mozilla & plugin need to implement xembed protocol. So far, only Java plugin (above 1.5) and Helix plugin implemented xembed. It will be great if Flash and Acrobat reader also have this feature.

Status of Plugin Navigation work: <tab> and <shift+tab> will move the focus into the plugin/applet, but there is no way to move it out. Bug to be filed in bugzilla.mozilla.org.

VII. Keyboard Navigation in a Sample Web Page

It is useful to examine how this proposal would work on a sample web page. For our examination we have chosen http://www.sun.com

The whole page is in a table. Turn on caret browsing mode by pressing <F7>, you can navigate the context using the following ways:

  • Using arrow key navigation: Pressing <right>, the caret will move right, character by character, Press <down> the caret will move down, line by line.
  • Using focus/TAB navigation: Focus can be moved along all links and form controls by using <tab>: "How to buy" -> "My Sun" -> "text input" -> "input image button (>>)" -> "Products & Services" -> ... ->"Low Cost Computing" -> "Making connections in Greece" -> "Affordable,..." -> "HP's Problem" -> "Sun Wins StarOffice Deal in Australia“ -> "Find It Fast" -> "Solaris Preview" -> "Sun Java Desktop System" -> "Sun Fire V40z" -> "Get Java Technology For Free" -> "see all features" -> "see all promotions" -> "Contact" -> ... -> "Trademarks".
  • Form control navigation: Press <right>, the caret will move right, character by character, after "sun.com     How To Buy | My Sun | Worldwide Sites", the input box will be focused, you can type something into it, and press <alt+]>, the caret will be after the input box, press <right> some times, the ">>" button will be focus. Press <enter>, your search will be submitted.

VIII. Unresolved Issues

  1. How to access fixed/floating widget using keyboard?
    Some widgets (most of them are ads) can be put anywhere in the web page by specifying the absolute position attribute in CSS style. Their physical position may be very different from their logical position.
    NOTE: We didn't find anything in Web Content Accessibility Guidelines 2.0 discussing using fixed/floating widget in web pages.

IX. Differences Between Caret Browsing Mode and Non-Caret Browsing Mode

Behaviors that are different in caret browsing mode and non-caret browsing mode

key bindings caret browsing mode non caret browsing mode
<left/right> move caret one character left/right scroll page left/right (if the content has horizontal scrollbar)
<up/down> move the caret one line up/down scroll page up/down (if the content has vertical scrollbar)
<home/end> move the caret to the beginning/end of the current line. scroll to the beginning/end of the content.

Behaviors that are only available in caret browsing mode

key bindings behavior
<ctrl+left/right> move the caret one word left/right
<alt+[/]> put the caret out of form control

X. Item-oriented Navigation using Javascript Component

Instead of using up/down arrows to navigate by line which is a visual based navigation, there is another navigation mechanism called "item-oriented navigation" can be used for content based navigation. A paragraph, a table cell, a form control, a select menu item, a list item can be defined as an item or the minimal unit of navigation. Arrow keys, as well as the combination of ctrl/shift/alt and arrow keys, will navigate the content based on those items, rather than character by character or line by line in the caret browsing mode. <ctrl+F7> is designed for switching between those two mode.

Since javascript is a convenient language for writing mozilla extension, the item-oriented navigation can be implemented as a javascript component. The advantages of doing that are:

  • Avoid the complicate hacking work in Gecko and potential regression
  • Easily hook up the keyboard event
  • Fully configurable & modifiable
  • Avoid the versioning and API changes issues
  • Platform independent

The detail key binding schema for item-oriented navigation is still under design discussion. We'll list them in another document.
(no plan in the near future, need more discussion.)

XI. Reference

XII. Buglist

Bug status current as of 14Nov04. Bugs are first fixed in Sun's Mozilla 1.7 branch and then ported to trunk. Please see the source tarball for Sun's 1.7 branch from14Nov04 if you want to build this edition of Mozilla.

General navigation bugs:

Bug ID Description Fixed in mozilla.org Fixed in Sun browser 1.7
144000 caret browsing - bad initial position Yes Yes
169297 caret becomes invisible when switching windows if it's not in linked content Yes Yes
202163 caret mode: caret disappears after finding text (FAYT text mode) Yes Yes

Bugs affect arrow movement:

Bug ID Description Fixed in mozilla.org Fixed in Sun browser 1.7
241038 [keyboard] Up or down arrow keys can't go through a java applet. when caret browsing Yes Yes
241042 [keyboard] [table] Can't reach the title of a table in caret browse mode No Fixed for up/down arrow, left/right arrow still not work
250371 Caret navigation: Links do not activate when using Ctrl+Arrows (Option+Arrows in OS X) Yes Yes
254997 Caret tracking by line (down arrow) skips over huge portions of the document Yes Yes
256833 Right arrow skips some text after <HR> Yes Yes
259984 Caret moving pause if there is a named archor. Yes Yes
265203 When caret is at end of one link, focus displays to next link Yes Yes
269317 Caret/selection circles in sun.com No Yes

Bugs affect ctrl+arrow movement:

Bug ID Description Fixed in mozilla.org Fixed in Sun browser 1.7
237228 pref "layout.word_select.eat_space_to_next_word" can't be set by user in the profile's prefs.js Yes Yes
250371 Caret navigation: Links do not activate when using Ctrl+Arrows (Option+Arrows in OS X) Yes Yes
256252 ctrl+right arrow sometimes skip a word Yes Yes
256835 [crash]ctrl+left cause crash in bugzilla [@ nsTextFrame::PeekOffset ][@ ntdll.dll - nsFrame::GetFrameFromDirection] Yes Yes

Bugs affect discontinuous navigation:

Bug ID Description Fixed in mozilla.org Fixed in Sun browser 1.7
70154 (ctrl)+shift+home/end should select to beginning/end of webpage Yes Yes
143996 in caret browsing, home/end must go to start/end of line Yes Yes
205846 caret eventually gets stuck when trying to scroll with PageDown / PageUp keys No No
244953 Ctrl+End and Ctrl+Home do not work in Caret Browsing mode Yes Yes
262497 Ctrl+Home and Ctrl+End problems (apparent with RTL) Yes No
269318 TAB doesn't start from selection text after mouse click Yes Yes

Bugs affect form control navigation:

Bug ID Description Fixed in mozilla.org Fixed in Sun browser 1.7
202154 caret mode: caret can appear within html listboxes No Yes
256269 Caret browsing: up/down arrow should not get into button text Yes Yes
260667 in caret browse mode, can't move out of textarea Yes Yes
260668 in caret browse mode, caret skip brframe in textbox/textarea No Yes
260669 caret shows in wrong place when use up/down arrow key to browse between text and textbox No Yes
262236 Can't select listitems which are not next to. Yes Yes
263999 caret should not show when label is bound with a focusable form control No Yes
264475 in caret browse mode, caret shouldn't show when focus in select, button, radio, checkbox if user use tab to switch focus No Yes
269306 use left/right arrow key to move into input element with type=text and textarea element, and out with alt+[/] No Yes
269307 use left/right key to move into input element with type=button/submit/reset, button element and select element, out of them with alt+[/] No Yes
269309 use left/right arrow key to move into input element with type=radio/checkbox, out of with alt+[/] No Yes