WebMail Accessibility Interest Group

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

University of Illinois at Urbana/Champaign

WebMail Accessibility Best Practices

Changes

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

Global configuration/preferences

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

Global Web 1.0 Accessibility Techniques

E-mail GridView

Example implementation of E-mail Grid

Grid Configuration Features

Default Settings

Grid Default Settings

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
Column Navigation Mode
Intermediate Mode
Row Navigation Mode
Column Navigation Mode
Basic Mode
Row Navigation Mode
Column 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
Column Navigation Mode
Remarks

Left arrow

Grid Behavior
Row navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row navigation Mode
Column Navigation Mode
Remarks

Right arrow

Grid Behavior
Row navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row navigation Mode
Column Navigation Mode
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
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
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
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
Remarks

Space

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
Remarks

Shift+Space

Grid Behavior
Screen Reader Behavior
Remarks

Application key/right mouse click

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
Remarks

Shift+Up arrow

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
Remarks

Shift+Down arrow

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
Remarks

Shift+Left arrow

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
Remarks

Shift+Right arrow

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
Row Navigation Mode
Column Navigation Mode
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
Column Navigation Mode
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
Column Navigation Mode
Remarks

Shift+any keyboard navigation

Grid Behavior
Row Navigation Mode
Column Navigation Mode
Screen Reader Behavior
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
Column Navigation Mode