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.



 

Seamonkey

Client User Experience Group

Web Page Keyboard Navigation UI

send feedback to the component specific newsgroup 

Last Modification: 24 August 2000

Lake Roca

Initial Creation Date: October 18, 1999

Older spec, will be updated

 


Other related Links

Accelerator Spec
Menu Framework Spec
Context Menus
Selection Behavior Spec?

Selection Look is XUL dependent and skinable see design speck for the individual skin when avaliable.

History

  • The last spec was produced in January 1997

Status: This spec isa proposal.  One thing that needs to be worked out is keyboard mappings for Unix.

 


Table of Contents

This spec will address the keyboard navigation as it relates to the Seamonkey browser navigation through web pages, the keyboard navigation of sidebar and Mail. Visual indication of focus is depicted below. Issues of selection not referring to the controls will be addressed in another document. All toolbar commands are accessible through the menu bar and do not need extra navigation through the mail UI. See the relevant UI spec for the menu. Page author supplied Accesskeys (supported in HTML 4.X) are an alternate method to provide focus and activation of items with in a page. These one keystroke access methods are useful for those who experience difficulty in two key and mouse operation as well as those who want a quick method of using a page.
 

In the browser the Tab key will cycle through controls and items taking the order presented in the source, generally from top to bottom left to right unless source defines the tab order otherwise. (HTML 4.0 functionality allows assigning of tab order. All unassigned items will be presented after the assigned items and default to the previously mentioned behavior.) To reverse this order use Shift+Tab. Once the cycling finishes with those defined in one area the tab order will take it to the next area/frame. Enter or Return keys also activate the "submit" button. The Space Bar will activate the item with focus and when there is no "submit" button Enter or Return keys will also activate the item.

In Email the Tab will cycle through Folders pane, Subject pane, Message pane beginning with items in the Envelop area of the messages pane, any operable items in the rest of the message area, to the sidebar and the items in the open panel of the sidebar. The UP and Down Arrow keys will be used to highlight folders and subjects and Space or Enter or Return will open them. Shift+Tab will operate as Tab but in the reverse order.

    Current state of affairs

    With the development of technology the capabilities of Seamonkey have expanded. However, the keyboard access to these new functions within a web page are as yet undefined in Seamonkey. This document is meant to confirm current 4.X keyboard navigation that works for use in Seamonkey. In addition, this document will identify and provide solutions for those areas where 4.X is inadequate.

    Keyboard navigation for 4.X is inadequate. The problems are:

    • Inconsistent and incomplete keyboard navigation for moving through different panes in Browser, Mail, and News
    • Inconsistent and incomplete keyboard navigation in forms and frames

    Design Goals and Philosophy

    In redesigning the keyboard navigation for Seamonkey we wanted to keep those parts that work best and those that would be difficult for people to adapt away from and to make it easy and logical to access the new functionality that the technology affords. The keyboard navigation should be discoverable and everything not provided for with accelerators or Accesskeys needs to be represented so that no functionality is mouse dependent.

    Tasks

    • Define how to select a URL and jump to that URL.
    • Define keystrokes that take you from pane to pane within Browser, Mail, and News windows.
    • Define how to navigate through items/active elements of a page.
    • Define how to navigate through My Sidebar.
    • Define how to use the controls.
    • Composer coming soon

The following keystroke notations are representative of a windows platform implementation.
the Equivalent in Mac OS and UNIX/Linux are noted below.

 

Windows

Mac

Linux

Ctrl

Cmd

 Ctrl

Alt

Opt

 Alt

     

Browser keyboard navigation

For simplicity, we call the web browser areas:

  • Area 1: URL field (Now also Search)
  • Area 2: Browser body or first cell of frame
  • Area 3: Sidebar

Visual Indication of Focus

Visual Indication of Focus Includes: Text or Links, Image maps and Images, Image maps and images with non black and white background, Label and Control relationship.

Visual Indication of Focus

Reasoning

Expected Behavior

Text or Links with Focus

The previous implementation of one pixel doted out line was difficult to see but was not easily confused with selection.

The contrasting color ensures visibility when the back ground is not white.

(Improved look for 4.x skin)

  • Text: Double pixel dotted line. Text color should remain in the unvisited links color until the link has been activated. The color of the dots in the outline by default should be in a contrasting color from the back ground. The color and pattern are skinable and in this manner comply with the W3C Accessibility guidelines.
     
  • The text bellow shows how text with focus would look. 

Image Maps and Images

The consistent look of the image, map and text focus indicator is also consistent with the behavior.

Image dot pattern was increased to 3 pixels as it is more visible and distinct for pictures. 

(Improved look for 4.x skin)

Image Maps and Images: Select perimeter of image map region with 3 pixel dotted line. The color of the dots in the outline by default should be in a contrasting color from the back ground. The color and pattern are skinable and in this manner comply with the W3C Accessibility guidelines.

Image Maps and Images with non black and white background

The contrasting color ensures visibility when the back ground is not white.

This shows how a contrasting color would look. 

(Improved look for 4.x skin)

Image Maps and Images: Select outside perimeter of image map region with 3 pixel dotted line. The color and pattern are skinable and in this manner comply with the W3C Accessibility guidelines.

The color of the dots in the outline should be in a contrasting color from the back ground.

Label and Control relationship

Thought the behavior is not consistent with previous behavior of showing focus it does disambiguate the relationship between label and control. The user is less likely to misunderstand what the control is used for. Or to select a control by mistake. (See the section on Selecting a Control with Focus, Selecting in a Drop Box and Selecting a Radio Button for behavior.)

Originally we wanted to show the relationship between the radio buttons in a group by showing focus around the group. But due to technological limitations and current convention each radio button will show focus individually.

(Improved look for 4.x skin)

Visual indication for check boxes, drop boxes, text fields and will be indicated by the same two pixel dotted line as used to indicate text focus. (None of these groups will have focus at the same time.)

The color and pattern are skinable and in this manner comply with the W3C Accessibility guidelines.

URL and Folders drop list for when the Folders area is closed.

Since these are on a toolbar it would be more visible to show Focus around the URL item and the Folders drop down rather than the entire toolbar.

Look is consistent with Focus indicator for individual items though these are the only items in their areas.

(Improved look for 4.x skin)

Visual indication for URL in the toolbar and Folders drop down in a toolbar will be indicated by the same two pixel dotted line as used to indicate text focus.

The color and pattern are skinable and in this manner comply with the W3C Accessibility guidelines.

Insert GIF here.

Areas

Browser: Sidebar, Web Page

Email: Folder pane, Thread pane, Message area, Sidebar

This is consistent with 4.x in Mail

 

A bold 3 pixel (Color or Black?) line around the outside perimeter of the area.

Insert GIF here.

 

Special Focus Movement and Point of Regard ("Point of regard" is the part of the page that the user has in the view area)

Upon filling in the URL field and using Enter, Return or using the Search button the Focus will move to the page viewing area and the first operable item shows focus.

When refresh is used the point of regard should be returned to where the use was last.

When the focus moves the point of regard should move to show the item with focus. If the find and "go to" function is implemented it would move the focus and point of regard to the found item.


General Browser Navigation

General Navigation includes: how to change focus from one item to the next, to move from one area or frame to the next, as well as to and from the URL field.

General Navigation

Reasoning

Expected Behavior

Within areas accessing controls (form elements or links) in previously specified order

The Tab and Shift+Tab functions are consistent with previous behavior. This allows the practices keyboard user to continue in their learned behaviors. Additionally this is an easy and generally accepted method of keyboard navigation in for the major platforms. 

The Tab key will cycle through controls and items taking the order presented in the source, generally from top to bottom left to right unless source defines the tab order otherwise.

Within areas accessing controls (form elements or links) in reverse order. (Previous)

The function is consistent with previous behavior. 

Shift+Tab Takes the focus in the reverse order from the Tab key. (see previous entry for details on order).

(Considering if it is feasible to tab to last visible item (preserving point of regard when shift+tabbing out of Sidebar) rather than last item in source)

When there are no more controls in an area go to the next area

The function is consistent with previous behavior.

Tab

When there are no more areas or controls cycle to the beginning i.e. If in are 3 go to area 1.

The function is consistent with previous behavior.

Tab

When at the beginning to go to the last controls in a previous area

The function is consistent with previous behavior.

Shift+Tab

When at the first area beginning of the controls go to last area (3+).

The function is consistent with previous behavior.

Shift+Tab

Jump to and open My Sidebar

The focus will change to that of the first item in the open panel if it has not been accessed earlier in the session. This is a new feature required for keyboard access to Sidebar content. If the sidebar is closed this will also open the sidebar to the state it was left in and up date the content.

Though the panels will be included in the browser Tab Cycle they will not have an independent cycle. (that is from the first tab into a panel the tab order will cycle through items in the panel at the end it will send focus to the URL and on to the page items rather than back to the top of the panel)

Ctrl+Tab can also be used - see the section on Ctrl_Tab section.

Ctrl+Shift+B (same as in menu)


If the Sidebar is closed this will open the sidebar, the last open panel will be open and that panel header will have focus.

Jump to URL

To return to the URL field with out cycling through any other items use. Feature is under discussion.

This is a new feature requested by users. Though it was proposed in a previous spec it was not adequately implemented. Implementation of this feature saves a keyboard user many keystrokes in navigating back to the URL from other areas in a web page. 

Ctrl+Tab can also be used - see the section on Ctrl+Tab section.

Ctrl+Shift+L for URL. To return to the URL field with out cycling through any other items use.

Currently Ctrl+O is used for opening files and Ctrl+L is used for opening URLs in a new window for composer and browser. Both Ctrl+O and Ctrl+L bring up a dialog to do this.


Feature is under discussion.

Cycle through window areas.

This will cycle the focus through the general areas in the browser the order will be:

  1. URL
  2. Page
  3. Sidebar (if open)

In Tabbed dialogs this can be used to shuffle through the tab areas.

The first operable item will have focus for a new page. For returning to pages the application will return the user to the view and focus they had when this page was last active. The page will be returned to the state it was left in.  On the Windows 4.x version of  Communicator this key combination was used to cycle between Communicators open windows this however did not work when you got to the Addressbook, you got stuck Additionally it was not implimented on the Mac for this reason I do not feel that the precedant of Ctrl+Tab was strong enough to continue it here.

Ctrl+Tab

The individual items in the sidebar that are in the tab order will be skipped when using Ctrl+Tab.

Cycle through window areas in reverse order.

This behaves in the same manner as Ctrl+Tab just in the reverse order. If you initiate this it will reverse the order going through the window areas first then through the windows unless you have already uses Ctrl+Tab to get to the window then it will reverse the window order.

Shift+Ctrl+Tab

Cycle through Links only

This functionality will skip all forms controls saving those who use the keyboard extensively and with difficulty may key strokes. This works from a link to a link only.

Ctrl + Up Arrow for previous link

Ctrl + Down Arrow for next link

Cycle through Buttons only

This satisfies the case where there are many "submit" buttons that operate and are associated with a single page or frame.

Suggested:

Ctrl+Enter for forward cycle

For reverse cycle Ctrl+Shift+Enter

Here I hesitate to recommend this as Enter has such a strong connotation of activating the control.

This cycles focus through buttons only.

Tooltips for the keyboard

Generally on mouse over the mouse user may receive a tooltip provided by the web author using HTML 4.Xs' Title, Caption or Longdesc, Alt or Summary attributes to provide the text. This proposal is for implementing keyboard access to this information. The delay in display to 3 seconds is so that as the user tabs through links and controls they are not flashed with tool tips for every item they tab through. The flashing may stimulate siesures in some users. Additionally the tool tip display time is increased and a hold tool tip option key is suggested for the user of people finding it difficult to read in a short time due to learning or sight related problems.

Upon receiving focus for longer than 3 seconds the tooltip is displayed for 5 seconds unless the ?? key is pressed to keep the tooltip visible. The Tooltip will automatically disappear once the user navigates away from the item Or if they select the item.

 

Trigger or Activate an Item

Trigger or Activate an Item: includes how to activate an entry into the URL field, a control or link and the default/submit button.

Trigger or Activate an Item

Reasoning

Expected Behavior

Activate Entry into URL/Search Field

The integration of search and the URL Fields not only saves space and time for the user but is more forgiving of users incomplete input while giving useful responses. See the Smart Browsing& Search UI Spec. For more details.

Return or Enter: The behavior of the URL/Search Field upon using the Enter or Return key is defined in detail in the Smart Browsing & Search UI Spec.

Upon filling in the URL field and using Enter, Return or using the Search button the Focus will move to the newly loaded page and the first operable item.

Activate control or link with focus

This behavior is consistent with previously implemented behavior.

Space Bar: When a radio button or control of that type has focus the Space Bar should be used to trigger or select the control. The Return or Enter key will perform the same function if there is if there is no submit button. (i.e., this will check and uncheck a check box and a radio button). (This information is also found in the Form Controls section)

Activate and open a link in a new window

Previously implimented on Win 4.x

Shift+Enter

Activate default button

This behavior is consistent with previously implemented behavior.

Return or Enter: To activate a submit button if it is the only one on the page; the Return or Enter key should be used. In the case of having more than one submit button the Return or Enter key will activate the submit button for the frame that last had focus. (If there is more than one submit button for a frame and the enter is used then nothing will happen.) See the cycling focus through buttons entry in general navigation for multiple buttons associated with a single frame.

 

Form Controls only

Form Controls only: contains navigation through Text fields, Selection in text fields, making selections using Check Boxes, Drop Boxes, Radio Buttons and moving through links, and controls in a Table.

Form Controls Only

Reasoning

Expected Behavior

Move insertion point through the selected text field Left 1 character.

All of the form controls remain as previously implemented in 4.X 

Left Arrow key

Move insertion point through the selected field text Right 1 character.

This behavior is consistent with previously implemented behavior.

Right Arrow key

Move insertion point through selected field text up one line.

This behavior is consistent with previously implemented behavior.

Up Arrow key

Move insertion point through selected field text down one line.

This behavior is consistent with previously implemented behavior.

Down Arrow key

Enter a Tab into a field.

It has been suggested that once the focus is on a field a Tab keystroke should enter a "Tab" space into the field. This was not recommended since this could make it difficult to go to the next control and introduce inconsistent and unfamiliar behavior for navigating forms on the web. A majority of the fields on the web are single entry form fields that the user enters only a word or two rather than a body of text that requires formatting. To satisfy the 90% case Tab should remain dedicated only to cycling through items. The Mac OS Guidelines also support the position that Tab should only move through items in a browser (this is a tab driven application). Quote from Mac OS Guidelines on the web "In text-oriented applications, the Tab key is used to move the insertion point to the next tab stop. In other contexts, Tab is a signal to proceed: it signals movement to the next item in a sequence..."

Ctrl+Shift+ (open key) this may not work until 6.1

 

Select text in field

This behavior is consistent with previously implemented behavior.

Shift+Arrow Left or Right, Up or Down will select line (every thing between insertion points) 
 

This shows insertion point just before the "e".

This shows results of one Shift+Right Arrow keystroke form the insertion point.

This shows results of one Shift+Down Arrow keystroke form the insertion point.

The following items featuring Home End and the Arrow keys are not likely to make it into Seamonkey The following is how it is currently implemented for 4.X version of Windows for the browser. Mac implementation 4.X

Mac uses Home and End for top and bottom of the page.

Home and End as well as the Ctrl+ Home or End and Option+ Home or End in the multi line text field moved the view (not the insertion point) to the top or bottom of the form field.

 Home and End as well as the Ctrl+ Home or End and Option+ Home or End in the single line field moved the insertion point to the beginning and end of the line respectively.

Since there are some usability problems with this as it is currently implemented in 4.X Windows I would like to revisit this before it is implemented with the engineers and community.

For instance when the user is looking at a web page and wants to key back to the top or bottom of a page their first inclination is to use Home and End. As implemented in Win 4.X these do not work so the user may assume that it is broken or the application does not have a go to top or go to bottom. Seldom do users after being unsuccessful with the obvious try something more complicated when trying to do something so simple.

Mac behavior is modal depending on the type of field has focus or if no field has focus. And it does not give as full access to the keyboard user.

I would prefer to see Home when no control field is active take the user to view the top of the page, when a field has focus then the insertion point and view are moved to the top. This would work similarly for End.

Ctrl+Home works only in Fields and takes the user to the beginning of a line. This would work similarly for Ctrl+End.

Shifting would select the items between the insertion point origin and the insertion point final position as specified by the above.

 

Go to top of field

 

Ctrl+Home When the focus is on a text field with an active insertion point Home will move the insertion point back to the top left of the field on single line entry fields this acts the same as Ctrl+Home

(Windows 2000 Guidelines compliant)

not implemented in Mac 4.X

Cmd+Arrow Up (Mac OS Guidelines Compliant)

Go to beginning of line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here. Right and left to go to the ends of a single horizontal line seems more intuitive than up and down or Home and End. Additionally this is a logical extension of the accepted Right and Left Arrow functionality.

Home

(Windows 2000 Guidelines compliant)

not implemented in Mac 4.X (Mac OS guidelines specifies that Home does not change the incertion point.)

Cmd+Arrow Left (Mac OS Guidelines Compliant)

Go to beginning of word

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Ctrl+Arrow Left (only when a form field has focus)

This is no longer possible as Ctrl+Right Arrow is now Forward to next page.

implemented as option arrow in 4.x for Mac..

Option+Arrow Left (Mac OS Guidelines Compliant)

Select to beginning of the word or previous word in line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Ctrl+Shift+Arrow Left

Selection at this level is not included in the Mac OS Guidelines.

Select to top of line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Ctrl+Shift+Home

Selection at this level is not included in the Mac OS Guidelines.

Select to end of field

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Shift+Home

Selection at this level is not included in the Mac OS Guidelines.

Go to bottom of field

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Ctrl+End When the focus is on a text field with an active insertion point End will move the insertion point back to the bottom right of the field.

(Windows 2000 Guidelines compliant)

not implemented in Mac 4.X

Cmd+Arrow Down (Mac OS Guidelines Compliant)

Go to end of word or end of next word in line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here. Additionally this is a logical extension of the accepted Right and Left Arrow functionality.

Ctrl+Arrow Left (only when a form field has focus)

This is no longer possible as Ctrl+Left Arrow is now Back to previous page.

implemented as Option+Arrow left in 4.x for Mac.

Go to end of line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here. Right and left to go to the ends of a single horizontal line seems more intuitive than up and down or Home and End. Additionally this is a logical extension of the accepted Right and Left Arrow functionality.

End: (only when a form field has focus)

(Windows 2000 Guidelines compliant)

not implemented in Mac 4.X

Cmd+Arrow Right (Mac OS Guidelines Compliant)

 

Select to the end of the line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Ctrl+Shift+Arrow Left

Selection at this level is not included in the Mac OS Guidelines.

Select to end of field

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Shift+End

Selection at this level is not included in the Mac OS Guidelines.

Select to end of line

It is not possible to conform to all platforms here. The most inclusive of functionality is included here.

Ctrl+Shift+End

Selection at this level is not included in the Mac OS Guidelines.

Go to beginning of paragraph

Would like to add: not implemented in previous versions and dependent on the previous being implemented.

These are more necessary to an editing application than to a browser.

Ctrl+Arrow Up

Option+Arrow Up (Mac OS Guidelines Compliant)

Select to beginning of paragraph

Would like to add: not implemented in previous versions

Ctrl+Shift+Arrow Up

Go to end of paragraph

Would like to add: not implemented in previous versions

Ctrl+Arrow Down

Option+Arrow Down (Mac OS Guidelines Compliant)

Select to end of paragraph

Would like to add: not implemented in previous versions

Ctrl+Shift+Arrow Down

Typing in a field

 

The Space Bar should enter a single space in a field and for multi line fields The Enter (PC) key should behave as a carriage return taking the cursor to the beginning of the next line.

Select control with focus

This behavior is consistent with previously implemented behavior.

Space Bar: When a control such as a radio button or a check box has focus the Space Bar should be used to select or activate the control. The Enter (PC) key will perform the same function if there is no submit button. (i.e., this will check and uncheck a check box, and make a selection in a multiple selection drop box or menu, and radio buttons, Tab will move you to the next field). (This information is also found in the Trigger or Activate section)

Make a selection in a single selection drop box. (HTML "select")

This behavior is consistent with previously implemented behavior.

Popping the control open (drop-box or pop-up menu) will allow the user to view the possible choices decreasing the instances where the user has to cycle through all the items to decide.

Up and Down Arrow keys: When a single selection drop box menu has focus the Up and Down Arrow keys will cycle through the options available. The selection indicator will be highlighted text that moves as the selection is cycled. When the user presses Tab again the option highlighted is the one selected and the focus is now at the next item. Or the user can press the Space bar which will close the drop box preserving the selection but Tab will take the user to the next item. (If the control is a pop-down or pop-up menu the first arrow click should pop the control open.) (Multiple selections where appropriate are handled using the appropriate Ctrl or Shift + Arrow keys depending on it the selection is discontinuous or contiguous.)

Move through cells in table with content that is triggerable.

This is the default behavior if the author uses HTML 4.X. They may set a different tab order. Any cell with out triggerable controls, links or buttons will be skipped.

Tab moves through only the triggerable items of the table in this order. The numbers represent controls, links or buttons. The value of the number is the order in which they receive focus. 

1

2

3

4

5

6

7

8

9

Horizontally merged cells 

1

2,3

4

5

6

7

8

9

Vertically merged cells 

1

2

3

4,5

6

7

8

9

 

Viewing More of a Page

Viewing More of a Page includes: how to change the part of a web page that is displayed. This applies only when area 2 has Focus to the page in that area with focus. General selection of page content is not addressed in this spec. When there are two frames with Scroll bars each frame should be treated as a page.

Viewing More of a Page

Reasoning

Expected Behavior

Scroll up or down a screen full

This behavior is consistent with previously implemented behavior.

Page Up or Page Down (Space will not be used to scroll up and down as it is an over loaded key and page up and down are much more intuitive)

Scroll left or right

This behavior is consistent with previously implemented behavior

Left or Right Arrow

Scroll left or right one full screen

 

Ctrl + Left Arrow or Ctrl + Right Arrow (This may conflict with History keyboard access)

Go to top of page

When the user is looking a ta web page and wants to keyback to the top or bottom of a page their first inclination is to use Home and End. As implemented in 4.X these do not work so the user may assume that it is broken or the application doesn't do it. Seldom do users after being unsuccessful with the obvious try something more complicated when trying to do something so simple.

Ctrl+Home (Win.4.X)  Home (Mac 4.X) Recommend using just Home in Windows as well as Mac

Go to bottom of page

See above. 

Ctrl+End (Win.4.X) End (Mac 4.X)  Recommend using just End in Windows as well as Mac

 

My Sidebar Navigation

My Sidebar Navigation includes: how to open, navigate to, navigate within, and activate panels and content.

The My Sidebar content behaves similarly to web pages.

The Panels behave similarly to drop boxes.

The Space bar when the panels have focus collapses and expands the panels. If the panel with focus is open it collapses the panels. If the panel with focus is closed it will open the panel.

Navigation runs like this: to get to the Sidebar Tab through every thing or use Ctrl+Shift B, use the up and down arrow keys to direct focus to previous or next panel. Use Space bar to select/open a panel that is closed, Tab into the content, use web page navigation techniques here. To get to another panel, from inside an active open panel Tab or Shift+Tab to beginning of panel content and up to panel header to give panel header focus the use Arrow up and down, or use Ctrl+Shift B to get to the and use arrows to go through the panel header.

My Sidebar Navigation

Reasoning

Expected Behavior

Jump to My Sidebar

If the side bar has not been visited in this window the focus will change to that of the first item with in the last opened pane. When returning to the sidebar from the page or the URL the sidebar will return to the state it was last at for that window. This is a new feature required for keyboard access to Sidebar content. Though these will be included in the Tab Cycle, they will not have an independent cycle, that is it will not cycle through the open panel items and then continue cycling through sidebar items. Once the open items are exhausted the focus will continue to the URL and then the page.

Tab cycle order from the Open Sidebar panel at start of session

  1. Side Bar head
  2. Panel Head 1
  3. Panel Head 2... To Open Panel
  4. Open Panel Item 1
  5. Open Panel Item 2
  6. Open Panel Item 3...
  7. Last Open Panel Item
  8. URL
  9. First Page Item...

Ctrl+Shift+ S (same as in menu) 

If the Sidebar is closed this will open the sidebar, the last open panel will be open and that panel header will have focus. (Tab to enter content of panel)

If the Sidebar is open but does not have focus then, the open panel will header will have focus.

If the Sidebar is open and the open panel header has focus already the panels will collapse with the top panel having focus.

Open My Sidebar

 

Ctrl+Shift+B

Close My Sidebar

 

Ctrl+Shift+an open Alphanumeric key (same as in menu)

Moving through the panels

 This will cycle the focus through the panels only. The Tab will do this in part as well but it will include the content of the  open panel and then continue out of the Sidebar when the end is reached.

Up and Down Arrow keys:

Expand and collapse Folders in Tree

Implemented in 4.x mac and Windows

Right Arrow expands, Left Arrow collapses

Activating/Opening a panel

 

Space Bar: When a Sidebar panel header has focus but is closed the Space Bar should be used to open the panel. The Return or Enter key will perform the same function. 

Navigating panel content

 

Same as for Web pages

Activating panel content

 

Space Bar: When a panel content has focus the Space Bar should be used to activate that item. The Return or Enter key will perform the same function if there is no submit button.

Collapse panels

 

Space Bar: When a panel is open and has focus within the Sidebar the Space bar should be used to collapse the panels

Customize/add fly out menu

 

Accessible when top panel header has focus use Tab.

 

Mail keyboard navigation

This section will address the methods for using the keyboard to select and open folders and messages, and how to access content in the Envelope portion of the message pane. Web pages and HTML content that appear in an Email will behave as specified for the browser.

For simplicity, we call the mail areas:

  • Area 1: Folder pane
  • Area 2: Subject pane
  • Area 3: Envelope & Massage pane
  • Area 4: Sidebar

General Navigation

Reasoning

Expected Behavior

Between areas and items in order.

Tab order

  1. Area 1: Folder pane or drop down(?)
  2. Area 2: Subject/Thread pane
  3. Area 3: Envelope & Massage pane - (if open), Attached button (if there) first
  4. From: Item(s)
  5. TO: items
  6. CC and others listed on the envelope: items
  7. Other Items in the Message area (this will have the same behavior as a web page)
  8. Area 4: Sidebar
  9. Area 1:Folder pane....

Tab

Will cycle through areas and items in the order specified.

Between areas in reverse order.

 

Shift+Tab

Will cycle through areas and items in reverse order from what was specified for Tab.

Within areas accessing/highlighting Folder and Thread elements.

The function is consistent with previous 4.x behavior. 

When you get to the end of the list it cycles to the beginning of that same list. (This is a closed cycle.)

Up and Down Arrow Keys

When an item receives highlight it is automatically selected. So if "Drafts" is selected in the Folders pane the message pane is automatically populated with messages from that folder and the last selected message from that folder is displayed in the Message area. Multiple select for Thread Pane only is handled using the appropriate Ctrl or Shift + Arrow keys depending on it the selection is discontinuous or contiguous.

Expand and collapse Folders in Tree

Implemented in 4.x mac and Windows

Right Arrow expands, Left Arrow collapses

When there are no more areas or controls cycle to the beginning i.e. If in Sidebar at the end of the items in the open panel go to Folders area 1.

The function is consistent with previous behavior.

Tab

When at the first area beginning of the controls go to last area (From Folders to Sidebar).

The function is consistent with previous behavior.

Shift+Tab

Jump to and open My Sidebar

The focus will change to that of the first item with in the frame. This is a new feature required for keyboard access to Sidebar content. If the sidebar is closed this will also open the sidebar to the state it was left in and up date the content.

Though the panels will be included in the browser Tab Cycle they will not have an independent cycle. (that is from the first tab into a panel the tab order will cycle through items in the panel at the end it will send focus to the URL and on to the page items rather than back to the top of the panel)

Ctrl+Tab can also be used - see the section on Ctrl+Tab.

Ctrl+Shift+ B (same as in menu)

If the Sidebar is closed this will open the sidebar, the last open panel will be open and that panel header will have focus.

Cycle through window areas and then to different windows.

In Mail the order will be:

  1. Folders area in Window 1 (if Open)
  2. Threads area in Window 1
  3. Message area in Window 1
  4. Sidebar
  5. Folders area in Window 1 (if Open) ...

Ctrl+Tab

The individual items in the Message area, the sidebar that are in the tab order will be skipped.

Cycle through window areas and then to different windows in reverse order.

Reverse order to what is stated for Ctrl+Tab. If you initiate this it will reverse the order going through the window areas first then through the windows unless you have already uses Ctrl+Tab to get to the window then it will reverse t he window order.

Shift+Ctrl+Tab: Performs this in the reverse order

Activate control or link with focus

This behavior is consistent with previously implemented behavior.

Space Bar: When an item in the folders pane is highlighted and the folders pane has focus the Space Bar should be used to trigger or select the control.

OR

When an item in the threads pane is highlighted and the threads pane has focus the Space Bar should be used to trigger or select the control.

The
Return or Enter key will perform the same function if there is if there is no submit button. (i.e., this will check and uncheck a check box). (This information is also found in the Form Controls section)

Jump to Folders

Changes focus to Folders area returning to the state it was last left in

Ctrl+Shift+F (same as in menu)


Under discussion

Jump to Threads

Changes focus to Threads area returning to the state it was last left in

Ctrl+Shift+H (same as in menu)


Under discussion

 

Mail Compose Area

HTML Only

Reasoning

Expected Behavior

Move insertion point through the selected text field Left 1 character.

All of the form controls remain as previously implemented in 4.X 

Left Arrow key

Move insertion point through the selected field text Right 1 character.

This behavior is consistent with previously implemented behavior.

Right Arrow key

Move insertion point through selected field text up one line.

This behavior is consistent with previously implemented behavior.

Up Arrow key

Move insertion point through selected field text down one line.

This behavior is consistent with previously implemented behavior.

Down Arrow key

Adjusting Tab space (List properties) anywhere except in a Table

 

Tab increases the indent of a line or selected text. Shift+Tab decreases the indent of a line or selected text.

Select text

This behavior is consistent with previously implemented behavior.

Shift+Arrow Left or Right, Up or Down will select line (every thing between insertion points) 
 

This shows insertion point just before the "e".

This shows results of one Shift+Right Arrow keystroke form the insertion point.

This shows results of one Shift+Down Arrow keystroke form the insertion point.

The following may not be implemented for Seamonkey See Form Controls navigation for the browser above for notes.

The following is documentation of how it is implimented in Windows 4.x

 See reasoning in Browser Control Forms

 See Browser Control Forms

Go to top of document

 

 

Go to beginning of line

 

 

Go to beginning of word

 

 

Select to beginning of the word or previous word in line

 

 

Select to beginning of doc

 

 

Select to beginning of line

 

 

Go to bottom of document

 

 

Go to end of word or end of next word in line

 

 

Go to end of line

 

 

Select to the end of the line

 

 

Select to end of field

 

 

Select to end of line

 

 

Go to beginning of paragraph

Would like to add: not implemented in previous versions and dependent on the previous being implemented.

 These are more necessary to an editing application than to a browser.

 

Select to beginning of paragraph

Would like to add: not implemented in previous versions

 

Go to end of paragraph

Would like to add: not implemented in previous versions

 

Select to end of paragraph

Would like to add: not implemented in previous versions

 

Move through cells in table with content that is triggerable.

This is the default behavior if the author uses HTML 4.X. They may set a different tab order. Any cell with out triggerable controls, links or buttons will be skipped.

Arrow keys move through empty cells of the table in this the direction of the arrow

When the cells have content the arrows act as they do in the text area.

 

Inserting a Tab space into a table

 

 Tab

Moving out of a table.

 

When the cursor is at the end of a table the Right Arrow moves the insertion point out of the table. When the insertion point is at the beginning the Left Arrow moves it to the previous character.

 

Keypad alternative (First Pass.)

Users should also be able to use the keypad to navigate - it prevents them from having to reach all over the keyboard and from having to press two keys at once, both of which can be difficult for some users. In this design, there is no alternative offered for the home/end keys, the page up/down keys, and the ctrl-arrow combinations. There is, however, room to add component-specific shortcuts to common functions if we decide to add them later. This design has drawbacks for those with limited motion control. Though it decreases the number of keystrokes it, the keys are so close together there may be a problem with accidentally hitting the wrong key. Alternate solutions would be: allowing people to designate their own single key short cuts (accesskeys) or assigning an on/off for special mapping for one finger web page navigation on the main keyboard. The later alternate solution would work for lap top users as well who do not have a numeric key pad. Stickykeys were considered but they have the draw back of adding keystrokes for those with the least ability to perform a keystroke.

Computer Number pad

A phone pad can be similarly mapped for cell phone web use.

Notes:

Selecting a text in the URL/Search field does not necessarily take you to that URL. The behavior of the URL/Search field when Enter or Return are used is defined in the Smart Browsing & Search UI Spec.

All toolbar commands are accessible through the menu bar and do not need extra keyboard navigation through the main UI.

Focus to the pane is indicated as mentioned above selection however is outlined in another spec.

Suggestions:

  1. Allow the user to use the find command to jump to a link instead of tabbing there. It would save a lot of keystrokes, especially if one programs the keystrokes as macros. But this requires that focus moves to the location that find highlights.
  2. Allow the user to use find command to jump to text in buttons. (Will not implement)
  3. Allow the user to use find command to jump to image by searching on its alternative content (e.g., "alt" attribute). (Under discussion)
  4. Behavior - When the focus moves to a control that is off the screen the screen view should shift so that the user can see the item.
  5. Allow the user to turn on and off Access Keys supplied by the page. (Though we will support Access Keys we are not able to do this at this time)