WebMail Accessibility Interest Group

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Main Navigation Bar

• Teleconference
• People
• Events
• Action Items
• Documentation
• Best Practices

WebMail Accessibility Best Practices

Changes

• Date: 03/04/2007
• Editor: Hadi Rangin
• Notes:
  1. Clarified the difference between selected row and Focused row in the Keyboard Commands in the Grid.
  2. Modified the keyboard Commands in the Grid to reflect navigation in the Column and Row Navigation modes.
  3. Added Paging and Continues Scrolling to the Keyboard Commands in the Grid section.

Overview

This document contains the Accessibility Best Practices for WebMail applications. These Best Practices is the result of Webmail Accessibility Working Group.

The primary purpose of the these Best Practices is to improve the accessibility of WebMail applications for everyone including users with disabilities. We believe the best practices drafted here will allow keyboard users in particular those using assistive software/hardware to interact more effectively with the Webmail applications and perform the necessary operations in a more effective manner.

Note that this is a working draft and and the recommendations can change base on the feedback we receive and tests we perform.

We have identified four major widgets/components for any typical WebMail applications:

1. GridView
   This is the component that is responsible for displaying the the summary of a selected mailbox.
2. TreeView
   This is the component that contains all mailboxes/folders.
3. Addressbook
   This is the component that contains all user’s contact information.
4. MailView Controller
   This is the component that is responsible for all interactions and operations across all components.

Why this guideline?

Will be added later

Global Accessibility Recommendations

General screen reader features

• All objects associated with any function should be accessible via keyboard and no screen reader scripting should be needed to run those functions.
• The level of information that screen reader can deliver is usually configurable and depends on verbosity mode namely basic, intermediate, or advance. Screen reader can provide additional information and instruction when a certain situation occurs. For example, when the last cell of a row has been reached, depending on the verbosity of the screen readers, they can provide additional information such as press left arrow key to go to previous cell, arrow down key to go to the next row and so on.
• when an element gets focus, a screen reader should read all the contents that is contained within that element. When the focus changes, the new focused element is read immediately and reading of the previous element is interrupted.

Global configuration/preferences

• All or at least frequently used functions such as Spam, Delete, Reply, Forward should be configurable so user can associate the desired shortcut key to them.
• The refresh rate should be configurable by user.

Global DHTML accessibility features; Jon, can we move these items to the ARIA section?

• Use tabindex="0" for the table
• Use tabindex="-1" for any links and form controls in the grid

Global Web 1.0 Accessibility Techniques

• Use H1 to indicate the main feature of the page you are in, for example, Inbox preview, Compose, Reply to, Addressbook view, etc.Y
• Use title element to reflect at least the same information as H1 above
• Use H2 element to provide a heading for each sub-section of a page, for example, Tree View as a heading for TreeView widget, Inbox Summary as a heading for Gridview widget, Send Options as a heading for all available functions for sending mail, etc.
• use H2 element to provide headings for all navigation bars, menus and any groups of links specific to a particular page.

E-mail GridView

Example implementation of E-mail Grid

Grid Configuration Features

• All columns in a grid are configurable and can be shown or hidden.
• The order of columns in a grid can be changed.

Default Settings

Grid Default Settings

• After any page refresh, the focus and all previous selections should be maintained.
• In the case of performing an action on a single row or group of selected rows (such as deletion) the focus moves to the next available row and if there is no next row, then the focus goes to the previous available row.
• If the grid is empty, the grid provides a message stating that the grid is empty and the focus goes there.
• Regardless of the View or Navigation modes, when moving in and out of the grid all selections and focus information are maintained.
• Navigation begins in Row Navigation Mode.
• Refresh/Mailbox update occurs on demand (refresh rate=0)

Screen reader default settings

Depending on the verbosity mode of the screen reader customized information and instruction can be provided to the users. We recommend the following default settings for screen readers when in a grid:

Advance Mode

Row Navigation Mode

• State of the selection (selected/not-selected)
• Row number
• Status of the row (read, unread, replied, etc)
• Priority
• Label if applicable
• Attachment if applicable
• From
• Date
• Time
• Subject
• Other relevant content such as line number, etc
• The above order changes based on user's Column Order settings

Column Navigation Mode

• Content of the column focused
• All information above
• Instruction how to change to Row Navigation Mode

Intermediate Mode

Row Navigation Mode

• Provide all information in the Advance Mode
• instruction how to select a row
• Instruction how to select consecutive and non-consecutive rows

Column Navigation Mode

• Content of the column focused
• All information above
• Instruction how to change to Row Navigation Mode

Basic Mode

Row Navigation Mode

• Provide all information in the Intermediate Mode
• Instruction how to open the current row/e-mail
• Instruction how to open attachment
• Instruction how to reply
• Instruction how to forward

Column Navigation Mode

• Content of the column focused
• All information above
• Instruction how to change to Row Navigation Mode

Views and Navigation Modes

View Modes

1. Page View: This is the view mode in a grid where a fixed number of rows (summary of e-mails) are displayed. Usually the number of rows to be displayed is configurable. In this mode user can navigate only within the rows displayed. In order to get to a row off of the display range, user need first to load the next or previous set of rows containing the desired row.
2. Continues Scrolling View: This is the view mode in a grid where user can freely scroll through the rows in a mailbox. User can scroll up and down row by row or page by page in a grid within a mailbox. User can get to a row off of the display area and the grid content changes accordingly to include the new row. Grid content can either change so it include the new row from one end and scroll another e-mail from other end. For example, consider that our display range is configured to show only 10 rows per screen and currently we are viewing row 11 - 20. We scroll up to the 11th row which is on top of the grid. Pressing an up arrow key causes a grid content update and now it shows rows 10 - 19. Grid content can be also changed in a fixed range. For example, in the example above, it can show the rows 1 - 10 with focus on row 10. clearly, in this case, the row 10 will be on the bottom of the grid.

Navigation Modes

1. Row Navigation Mode: In this mode all navigation keys except the right and left arrow keys move the focus to desired row within a grid and mailbox.
2. Column Navigation Mode: In this mode the right and and left navigation keys move the focus to desired column within a row.

   Keyboard commands and desired action

   In the follwoing section, we describe the keyboard commands within a grid and the expected behaviors. The behaviors of the keyboard commands varies depending on the View modes and Navigation modes.

   Tab/shift+tab

   Grid Behavior

   • enters or exits the grid. Once in the grid another tab or shift+tab key will move you out of the grid to the next or previous tab stop on the page respectively.
   • Both tab and shift+tab keys wrap when they reach the bottom and top of the page respectively.
   • When entering grid for the first time, the focus moves to the row in the grid based on the configuration settings.
   • If you leave the grid and come back to it, all previously selections and mode will be maintained. For Example, if you are in column mode and in a particular cell e.g. Subject column of a row, when you leave the grid and come back, you will be back exactly when you left the grid namely in theSubject column of that row.

   Screen Reader Behavior

   • When there is conflicting markups in a grid control, for example, if you have table headers information and a describedBy, the screen reader should initially give priority at least in the default reading mode to The describedBy, because it is above and beyond the HTML markup. Based on the PF group recommendations, you should only use ARIA stuff when there is not equivalent HTML markup. So, by using in the describedBy or labeledBy, you are basically saying "I have a problem with the current markup here. It is not going to do what I wanted to say, so use this label instead.
   • When entering a grid:
     1. Reads DescribedBy value.
     2. Reads Caption value.
     3. Announce the current navigation mode
     4. Reads the content of the row
     5. Provides additional information depending on the verbosity of the screen reader.

   Remarks

   • The configuration section of the WebMail should allow users to define what row to focus when entering the grid for the first time. You do not want always to go to the first row in the grid. Maybe you want to go to the first unread e-mail, which is on row 28.

   Up arrow

   Grid Behavior

   Row Navigation Mode

   1. Page View Mode:
      • The focus moves to the predecessor row of the grid (n-1).
      • If the focus is already on the first row of the grid (n), pressing the up arrow key does not do anything and the focus remains on the first row of the grid (n).
   2. Continues Scrolling mode:
      • The focus moves to the predecessor row of the mailbox (n-1).
      • If the focus is already on the first row of the grid (n), pressing the up arrow key moves the focus to the predecessor row of the mailbox (n-1) and the grid content will change based on the configuration settings to include the new row (n-1).
      • If the focus is already on the first row of the mailbox (1), pressing up arrow key doesn't do anything and focus remains on the first row of the mailbox (1).

   Column Navigation Mode

   1. Page View Mode:
      • The focus moves to the same column of the predecessor row of the grid (n-1).
      • If the focus is already on any column of the first row of the grid (n), pressing the up arrow key does not do anything and the focus remains on the same column of the first row of the grid (n).
   2. Continues Scrolling mode:
      • The focus moves to the same column of the predecessor row of the mailbox (n-1).
      • If the focus is already on any column of the first row of the grid (n), pressing the up arrow key moves the focus to the same column of the predecessor row of the mailbox (n-1) and the grid content will change based on the configuration settings to include the new row (n-1).
      • If the focus is already on any column of the first row of the mailbox (1), pressing up arrow key doesn't do anything and focus remains on the same column of the first row of the mailbox (1).

   Screen Reader Behavior

   Row Navigation Mode

   Reads the state of the row (selected/not-selected) and its content. Provides additional information depending on the verbosity of the screen reader.

   Column Navigation Mode

   • Reads the content of the column focused. Provides additional information such as the state of the row, content of the entire row, etc depending on the verbosity of the screen reader.

   Remarks

   Down arrow

   Grid Behavior

   Row Navigation Mode

   1. Page View Mode:
      • The focus moves to the successor row in the grid (n+1).
      • If the focus is already on the last row of the grid (n), pressing the down arrow key does not do anything and the focus remains on the last row of the grid (n).
   2. Continues Scrolling mode:
      • The focus moves to the successor row of the mailbox (n+1).
      • If the focus is already on the last row of the grid (n), pressing the down arrow key moves the focus to the successor row of the mailbox (n+1) and the grid content will change based on the configuration settings to include the new row (n+1).
      • If the focus is already on the last row of the mailbox (n), pressing down arrow key doesn't do anything and focus remains on the last row of the mailbox (n).

   Column Navigation Mode

3. Page View Mode:
   • The focus moves to same column of the the successor row in the grid (n+1).
   • If the focus is already on any column of the the last row of the grid (n), pressing the down arrow key does not do anything and the focus remains on the same column of last row of the grid (n).
4. Continues Scrolling mode:
   • The focus moves to the same column of the successor row of the mailbox (n+1).
   • If the focus is on any column of the last row of the grid (n), pressing the down arrow key moves the focus to the the same column of the successor row of the mailbox (n+1) and the grid content will change based on the configuration settings to include the new row (n+1).
   • If the focus is on any column of the last row of the mailbox (n), pressing down arrow key doesn't do anything and focus remains on the same column of the last row of the mailbox (n).

Screen Reader Behavior

Row Navigation Mode

Reads the state of the row (selected/not-selected) and its content. Provides additional information depending on the verbosity of the screen reader.

Column Navigation Mode

• Reads the content of the column focused. Provides additional information such as the state of the row, content of the entire row, etc depending on the verbosity of the screen reader.

Remarks

Left arrow

Grid Behavior

Row navigation Mode

• Doesn't do anything.

Column Navigation Mode

• Moves the focus to the predecessor cell.
• The state of the row (selected/not-selected) remains unchanged.

Screen Reader Behavior

Row navigation Mode

• Announces the Row Navigation Mode.
• Reads teh content of the row.
• Provides instruction how to switch to column Navigation Mode.
• Depending on the verbosity of the screen reader, it provides additional information.

Column Navigation Mode

• Reads the content of the cell focused.
• Reads the state of the row (selected/not-selected).
• Provides instruction how to switch to Row Navigation Mode if the left arrow key is pressed from the 1st cell.
• Depending on the verbosity of the screen reader, it provides additional information.

Remarks

Right arrow

Grid Behavior

Row navigation Mode

• Doesn't do anything.

Column Navigation Mode

• Moves the focus to the successor cell.
• The state of the row (selected/not-selected) remains unchanged.

Screen Reader Behavior

Row navigation Mode

• Announces the Row Navigation Mode.
• Reads teh content of the row.
• Provides instruction how to switch to column Navigation Mode.
• Depending on the verbosity of the screen reader, it provides additional information.

Column Navigation Mode

• Reads the content of the cell focused.
• Reads the state of the row (selected/not-selected).
• Provides instruction how to switch to Row Navigation Mode if the right arrow key is pressed from the last cell.
• Depending on the verbosity of the screen reader, it provides additional information.

Remarks

Home

Grid Behavior

Row Navigation Mode

1. Page View Mode:
   • Moves the focus to the 1st row in the page.
2. Continues Scrolling Mode:
   • Moves the focus to the 1st row in the grid and the grid content changes to include the 1st row.

Column Navigation Mode

• Moves the focus to the 1st cell of the current row.
• The state of the row (selected/not-selected) remains unchanged.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the new row (selected/not-selected).
• Reads the content of the new row.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads the content of the 1st cell of the current row.
• Reads the state of the row (selected/not-selected).
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

End

Grid Behavior

Row Navigation Mode

1. Page View Mode:
   • Moves the focus to the last row in the page.
2. Continues Scrolling Mode:
   • Moves the focus to the last row in the grid and the grid content changes to include the last row.

Column Navigation Mode

• Moves the focus to the last cell of the current row.
• The state of the row (selected/not-selected) remains unchanged.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the new row (selected/not-selected).
• Reads the content of the new row.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads the content of the last cell of the current row.
• Reads the state of the row (selected/not-selected).
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Space

Grid Behavior

Row Navigation Mode

• Regardless of the view modes, the currently focused row is selected/deselected.
• The visual appearance of the selected/deselected row changes accordingly.
• If applicable, the associated checkbox is checked or unchecked respectively.

Column Navigation Mode

• Regardless of the view modes, the currently focused row is selected/deselected.
• The visual appearance of the selected/deselected row changes accordingly.
• If applicable, the associated checkbox is checked or unchecked respectively.
• Grid statys in column Navigation mode and its focus stays in the same column before selection/deselection.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the row (selected/not-selected).
• Reads the state of navigation mode (column/row navigation mode).
• Reads the content of the row.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads the state of the row (selected/not-selected).
• Reads the state of navigation mode (column/row navigation mode).
• Reads the content of the cell currently focused.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Shift+Space

Grid Behavior

• Regardless of the view modes, it toggles between Row and Column Navigation modes.
• The visual appearance of the current row changes to indicate the state of navigation mode.

Screen Reader Behavior

• Reads the state of the row (selected/not-selected).
• Reads the state of navigation mode (column/row navigation mode).
• Reads the content of the current row if it switches to Row Navigation Mode and reads the content of the cell currently focused if it switches to Column Navigation Mode.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Application key/right mouse click

Grid Behavior

Row Navigation Mode

• Context menu opens and associated functions are displayed (such as Reply, Delete, Spam, etc).
• Up and Down arrow keys move the selection up and down in the context menu.
• Enter key triggers the selected function.

Column Navigation Mode

• If the cell is associated with one or more functions, context menu opens and associated functions are displayed.
• Up and Down arrow keys move the selection up and down in the context menu.
• Enter key triggers the selected function.

Screen Reader Behavior

• Announces "Context Menu" and reads the first item in the menu.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Shift+Up arrow

Grid Behavior

Row Navigation Mode

• Selects the current row or already selected rows and consecutive predecessor row.
• Visual appearance of the rows changes to reflect their selection.
• The range of upwards movement is limited to the range of Up arrow key itself.
• Question: What happens if checkbox implementation is used? Are checkboxes checked as we go over them?

Column Navigation Mode

• Selects the content of the current cell or the contents of already selected cells and the content of the same column of consecutive predecessor row.
• Visual appearance of the selected contents changes to reflect their selections.
• The range of upwards movement is limited to the range of Up arrow key itself.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the newly added row to the selection (selected/not-selected).
• Reads the content of the newly added rwo to the selection.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads teh content of the cell newly added to the selection.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Shift+Down arrow

Grid Behavior

Row Navigation Mode

• Selects the current row or already selected rows and consecutive successor row.
• Visual appearance of the selected rows changes to reflect their selection.
• The range of downwards movement is limited to the range of Down arrow key itself.

Column Navigation Mode

• Selects the content of the current cell or the contents of already selected cells and the content of the same column of consecutive successor row.
• Visual appearance of the selected contents changes to reflect their selections.
• The range of downwards movement is limited to the range of Down arrow key itself.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the newly added row to the selection (selected/not-selected).
• Reads the content of the newly added rwo to the selection.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads teh content of the cell newly added to the selection.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Shift+Left arrow

Grid Behavior

Row Navigation Mode

• Doesn't do anything.

Column Navigation Mode

• Selects the content of the current cell or the contents of already selected cells and the content of consecutive predecessor cell.
• Visual appearance of the selected contents changes to reflect their selections.
• The range of movement is limited to the range of Left arrow key itself.
• Question: Do we want to allow selection across multiple columns and rows? In other words, do we want to be able to select two or more columns across multiple rows?

Screen Reader Behavior

Row Navigation Mode

• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads teh content of the cell newly added to the selection.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Shift+Right arrow

Grid Behavior

Row Navigation Mode

• Doesn't do anything.

Column Navigation Mode

• Selects the content of the current cell or the contents of already selected cells and the content of consecutive successor cell.
• Visual appearance of the selected contents changes to reflect their selections.
• The range of movement is limited to the range of Right arrow key itself.

Screen Reader Behavior

Row Navigation Mode

• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads teh content of the cell newly added to the selection.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Control+Up arrow

Grid Behavior

Row Navigation Mode

1. Page View Mode:
   • Moves the focus to the 1st row in the page.
2. Continues Scrolling Mode:
   • Moves the focus to the 1st row in the grid and the grid content changes to include the 1st row.

Column Navigation Mode

1. Page View Mode:
   • Moves the focus to the cell in the same column of 1st row in the page.
   • The state of the row (selected/not-selected) remains unchanged.
2. Continues Scrolling View Mode:
   • Moves the focus to the cell in the same column of 1st row in the grid.
   • The state of the row (selected/not-selected) remains unchanged.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the new row (selected/not-selected).
• Reads the content of the new row.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads the content of the focused cell.
• Reads the state of the row (selected/not-selected).
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Control+Down arrow

Grid Behavior

Row Navigation Mode

1. Page View Mode:
   • Moves the focus to the last row in the page.
2. Continues Scrolling Mode:
   • Moves the focus to the last row in the grid and the grid content changes to include the 1st row.

Column Navigation Mode

1. Page View Mode:
   • Moves the focus to the cell in the same column of last row in the page.
   • The state of the row (selected/not-selected) remains unchanged.
2. Continues Scrolling View Mode:
   • Moves the focus to the cell in the same column of last row in the grid.
   • The state of the row (selected/not-selected) remains unchanged.

Screen Reader Behavior

Row Navigation Mode

• Reads the state of the new row (selected/not-selected).
• Reads the content of the new row.
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads the content of the focused cell.
• Reads the state of the row (selected/not-selected).
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Shift+any keyboard navigation

Grid Behavior

Row Navigation Mode

• If the Shift key is pressed down while performing any keyboard navigations, originating and distinating rows and all rows in between are selected.
• All previously selected rows remain unchanged.
• Reselecting already selected row does not deselect it; it means that the selectin is sticky.
• To deselect an already selected row, the Space key is used.

Column Navigation Mode

• If the Shift key is pressed down while performing any keyboard navigations, originating and distinating cells and all cells in between are selected.
• Reselecting an already selected cell deselect it; it means that the selectin is not sticky.
• Any keyboard navigations without holding down the Shift key will deselect all selection of cell contents.
• Selection of cells can occur as block selection; it means that only adjacent cells in a row and/or columns can be selected.
• All previously selected rows remainn unchanged.

Screen Reader Behavior

• Reads number of selected rows in the most recent selecting action.
• Reads the contents of the selected rows starting with originating rows and ending distinating row.
• Depending on the verbosity of the screen reader, additional information will be provided.

Remarks

Interactive search

Grid Behavior

Row Navigation Mode

1. Page View Mode:
   • Not available
2. Continues Scrolling View Mode:
   • Not available

Column Navigation Mode

1. Page View Mode:
   • Start searching for the match interactively in the current column downwards in the same page.
   • Focus moves interactively to the last match found.
   • The key press latency for interactive search input is configurable in the user preferences.
     • Continues Scrolling View Mode:
       • Start searching for the match interactively in the current column downwards in the grid.
       • Focus moves interactively to the last match found.
       • The key press latency for interactive search input is configurable in the user preferences.

Screen Reader Behavior

Row Navigation Mode

• Announces "Interactive search is not supported in Row Navigation Mode".
• Depending on the verbosity of the screen reader, additional information will be provided.

Column Navigation Mode

• Reads the characters as they are being entered.
• Refreshable Braille display devices display the content of the matched cell interactively.
• If interactive match fails, system returns a system error beep/sound, announces "Match failed" and displays it on refreshable Braille Displays.
• Depending on the verbosity of the screen reader, additional information will be provided.

  Remarks

  Recommended ARIA Techniques

  • Use tabindex for All cells and focus() to focus to an element
  • Set role="grid" on the table
  • Property=”multiselectable”
  • Property=”labelledby”
  • Set role="region" for each row or tr
  • property=”selected” for the rol
  • Set role=”gridcell” on the cells in the grid
  • property=”selected” for the role

  Recommended Web 1.0 Access techniques

  • Use table to display the summary of a mailbox in the grid
  • Use caption for table
  • Use th and id attribute (or scope) for the column headers
  • Use td and headers attribute to indicate the column headers
  • Use links for column headers to sort
  • Use labels for checkboxes

  Treeview for Mailboxes

  TreeView Terminology:

  • A node is an item in a tree
  • Parent node is a node with children which can be open / expanded or closed / collapsed
  • Open node is a node with children which is expanded, the first level children are visible.
  • Closed node is a node with children which is closed, the children are not visible.
  • End node - a node with no children

  Keyboard navigation

  • One and only one node of the tree control is in the tab order of the page at any time.
  • Up and down arrow keys to move between visible nodes
  • Left arrow key will collapse an open node.
  • Left key on a closed or end node will move focus to the node's parent
  • Right arrow key will expand a closed node, move to the first child of an open node, or do nothing on an end node.
  • Enter key toggles between expand and contract on parent nodes (this is not supported by the Windows tree view and Hadi has concerns that blind users generally do not like toggles - needs discussion)
  • Enter key causes ondblclick action on end nodes (are there ever parent nodes that have an action other than expand or collapse?)
  • Typing a letter will move focus to the next instance of a visible node whose title begins with that letter.
  • Home key moves to the top node in the tree view
  • End key moves to the last visible item in the tree.
  • Nodes can be focused and/or selected. There must be visual distinction between activated and selected nodes.
  • Arrowing to an item with the keyboard or clicking on an item with the mouse will focus and select the item. Any previous selections are cleared. How do you usually do? Single or double click?
  • Ctrl-click on an item with the mouse will focus and select the item. Previous selections are maintained.
  • Ctrl-arrow to an item with the keyboard will focus the item (but not select it). Previous selections are maintained. Is this a typical Windows behavior?
  • Ctrl-space with focus on an item will toggle the selection of the item.

  Recommended ARIA Techniques

  • Use unordered list markup
  • role="tree" on the primary ul
  • role="treeitem" on each li which represents a node
  • ARIA state of expanded="true" or expanded="false" on nodes which have children. The expanded value represents the current state of the node: expanded="true" for open nodes, expanded="false" for closed nodes. There is no expanded property provided for end nodes.
  • ARIA state of expanded="true" or expanded="false" is updated as a node is expanded or collapsed.
  • Property "labeledby" points to the header (I'm not sure what this means? Is it referring to the header of the treeview?)
  • Initially the first node has a tabindex="0" and all other nodes have a tabindex="-1". When a node receives focus the tabindex value is changed to 0. When a node loses focus the tabindex value is set to -1. Only one node in the tree should have a tabindex="0" at any time.
  • Any additional mechanism to expand / collapse the node with the mouse should be marked with role="presentation" and should not be included in the tab order to prevent this information from being redundantly provided by assistive technology. The assistive technology user will get the expand/collapse information from the treeitem expanded property and the expand / collapse will be performed via the keyboard.
  • Any additionally images to identify the expanded/ collapses state of the node should have a role="presentation", alt="", and not be included in the tab order to prevent redundant information about the state of the node to be provided by assistive technology.

  Recommended Web 1.0 Access techniques

  • Use unordered lists for the tree elements

Copyright 2006 University of Illinois at Urbana/Champaign | Accessibility

• Accesskey 1: Main Content
• Accesskey 3: Navigation Bar