Accessible Mootools Widget Demo

Data Grid

Accessible Grid





How to use the Grid widget

Navigation Mode (Read-Only) is the default mode, and allows quick and intuitive navigation around the grid.

  • The first Tab into the grid moves focus to the first cell of the first row.
  • The second Tab leaves the grid and moves focus to the next tabbable item on the page.
  • Subsequent Tab: Once focus has been moved inside the grid, subsequent tab presses that re-enter the grid return focus to the cell that last held focus.
  • Left Arrow / Right Arrow: Navigates through the columns. There is no wrap at the end or beginning of columns.
  • Up Arrow / Down Arrow:Navigates through the rows. There is no wrap at the first or last rows.
  • Home: Moves the focus to the first cell of the current row.
  • End: Moves the focus to the last cell in the current row.
  • Page Up: Moves the focus to the first cell in the current column.
  • Page Down: Moves the focus to the last cell in the current column.
  • Selecting Cells
    • Ctrl+Space: Selects the current column.
    • Shift+Space: Selects the current row.
    • Ctrl+A: Selects the entire grid.
    • Shift+Arrow: Selects contiguous cells.
    • Shift+F8: Allows additional cells to be added to a previous selection to accomplish non-contiguous selection.

Actionable Mode (Interactive) allows the interaction with other objects that might be found in the grid cells such as edit fields, links, etc.

  • Enter / F2: Pressed while focus is on an actionable item will enter Actionable Mode. Focus will remain on the actionable item that has focus.
  • Using grid as an example, by default, pressing Esc anywhere inside the grid will mean exiting Actionable mode (by which the user may enter text or perform an action to complete a operation) and a return to Navigation Mode (where the user is allowed to move focus among elements). If a widget is in the current grid cell that also uses the Esc key, then it should cancel the event propagation. A subsequent press of the Esc key will return focus to the parent widget.
  • Tab: Moves to the next actionable (tabbable) item in the grid and stay within the grid wrapping at the bottom. In this mode each tabbable object in each cell of the grid can be reached with the tab key. If multiple tabbable items are located inside a single grid cell, the tab will stop at each one. When the last tabbable item in a cell is reached the next tab will move to the next tabbable item in the grid, wrapping at the last tabbable item in the grid.
  • Shift+Tab: Moves to the previous actionable (tabbable) item in the grid and stays within the grid, wrapping at the top.

Accessibility changes made

  • New widget based on Mootools HtmlTable.
  • Download accessible Grid
  • Added WAI ARIA role "application", "grid", "row", "gridcell" and "columnheader" and WAI ARIA properties "aria-describedby", "aria-sort" and "aria-selected"
  • Added full keyboard navigation support.
  • Added high visual contrast indicator.