Grid Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

Grid provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-label, aria-colcount, aria-rowcount and others. Following WAI-ARIA's grid design pattern, it enables users to navigate the information or interactive elements it contains using directional navigation keys While the words "row" and "column" are used in the names of WAI-ARIA attributes and by assistive technologies when describing and presenting the logical structure of elements with the grid role, using this role on an element does not necessarily imply that its visual representation is tabular.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

The Grid is a composed element containing collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys. The grid role does not simply imply a specific visual, e.g. tabular, presentation. It describes relationships among elements. It may be used for purposes as simple as grouping a collection of checkboxes or navigation links or as complex as creating a full-featured spreadsheet application.

The Grid contains multiple elements with different rows some of which include:

  • rowheader - indicates an element that acts as a header for the row or a column.
  • row - indicates an element that groups one or many grid cells.
  • rowgroup - indicates an element that groups one or many rows that have one or many columns.
  • columnheader - indicates an element that represents a header for a column.
  • gridcell - indicates an element that acts as a grid cell.
  • toolbar - indicates an element that is a part of the header but can contain controls to manipulate the content of the Grid.

The Grid also supports hierarchical structure which means that it can turn into a TreeGrid. When that mode is enabled the role of the Grid is changed to "treegrid" to reflect the new data structure of the element.

The following ARIA attributes are used inside the Grid:

  • aria-disabled - indicates that interaction with the Grid is disabled.
  • aria-hidden - indicates that the element does not take part in the interaction with the Grid and will not be mapped to the accessibility API. This attribute is typically applied to containers that do not provide any feedback regarding the state or the value of the Grid.
  • aria-readonly - applied to the grid cells of the element when editing is disabled. Indicates that the cell cannot be edited.
  • aria-rowcount - indicates the number of rows inside the Grid.
  • aria-colcount - indicates the number of columns inside the Grid.
  • aria-colindex - indicates the index of the columns. Applied to the column elements.
  • aria-rowindex - indicates the index of the rows. Applied to the row elements.
  • aria-activedescendant - indicates the currently focused cell inside the Grid.
  • aria-labelledby - indicates an element inside the Grid is labeld by another one. For example the Pager inside the heder is labelled by another element that shows the page summary.
  • aria-haspopup - indicates that an element inside the Grid(for example, a column header) has a popup that can be triggered.
  • aria-controls - indicates the relationship between an element and its popup which when opened is no more part of it's DOM structure. This attribute is used to indicate the id of the popup that is controled by a Grid control, such as the menu that appears from the column headers.

Keyboard Interaction

The Grid presents tabular information and groups other elements at the same time. As such it provides a way to navigate through all focusable elements using the keyboard.

The following keyboard shortcuts are available to interact with the Grid:

Key Action
Arrow Down/Up Navigate vertically to the next/previous cell inside the Grid.
Arrow Left/Right Navigate horizontally to the next/previous cell inside the Grid.
Home Navigate to the first cell inside the current column.
End Navigate to the last cell inside the current column.
Alt + Arrow Down/Up Open/Close the menu of the current column.
Alt + S Sorts the Grid data according to the curent column.
Alt + G Enables/Disabled column grouping.
Escape Cancels an ongoing operation or closes a popup depending on the focused item. For example, if cell editing has started, Escape will cancel the editing and return the content of the cell to it's previous state.
F2/Space Begins cell editing if a cell is focused and editing is enabled.
Enter Select a focused cell or update a cell if editing is started and navigates vertically to the next cell in the column.
Backspace/Delete Deletes the content of the currently focused cell.
Shift + Arrow Up/Down/Left/Right Selects multiple cells in the direction of the pressed arrow key.
Control + Arrow Up/Down Selects the first/last cell in the current column.
Control + Arrow Left/Right Selects the first/last cell in the current row.
Page Up/Down Navigate to the first/last cell from the next/previous scroll view. When pressed the Grid scrolls up/down to the target item by scrolling to it to make it visible.

Additional information on WAI-ARIA for the SMART Framework can be found here.