React Grid Accessibility Compliance

    The Ignite UI for React Data Table / Data Grid supports accessibility and screen readers that interpret keyboard navigation interactions through the cells and columns of the grid.

    This is activated by setting the useAccessibility property of the grid to true.

    React Grid Accessible Example

    ##Section 508 Compliance Section 508 of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages.

    Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for Angular controls and components are compliant with the relevant accessibility rules.

    ##WAI-ARIA Support In 2014 the W3C finalized their WAI-ARIA specification which defined how to design Web content and Web applications to be more accessible to users with disabilities.

    This section shows the accessibility (ARIA) support of the framework as well as how easily manageable the directionality of the components is.

    ARIA Attributes In order to give screen readers the contextual information they require to interpret and interact with the grid, ARIA attributes are added to the grid DOM elements. These attributes are particularity useful when plain HTML elements such div and span are used to create complex DOM structures, which is the case with ag-Grid.

    When inspecting the grid's DOM elements the following roles and properties are supported and announced by the screen reader:

    • Grid Cell - element containing a grid cell.
    • Row Count - announces the number of rows.
    • Column Count - announces the number of rows.
    • Row - a row of column headers or grid cells.
    • Row Index - announces the visible index of the row.
    • Row Selected - only present if the row is selectable, it announces the selection state.
    • Group Expanded - only present in row groups, it announces the expand state.
    • Column Header - element containing a column header.
    • Cell Index - announces the visible index of the column.
    • Colspan - only present if the column spans across multiple columns, it helps guide screen readers.
    • Sort - only present in sortable columns, it announces the sort state.
    • Column Index - announces the visible index of the cell.
    • Selected - only present if the cell is selectable, it announces the selection state.
    • Expanded - only present in a group cell, it announces the expand state.

    Keyboard Navigation

    After setting the useAccessibility property to true, this will enable a range of keyboard navigation options in the data grid that screen readers can recognize. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell:

    Navigating within the Grid

    • Ctrl + Alt + →: Navigate one cell up.
    • Ctrl + Alt + ←: Navigate one cell left.
    • Ctrl + Alt + ↓: Navigate one cell below.
    • Ctrl + Alt + ↑: Navigate one cell above.
    • Ctrl + Alt + Home: Navigate to first column header.
    • Ctrl + Alt + End: Navigate to last visible cell.
    • Ctrl + Alt + Shift + ↑ Navigate to current column header.
    • Ctrl + Alt + Shift + ↓ Navigate to last cell in current column.
    • Ctrl + Alt + Shift + ← Navigate to first cell in current row.
    • Ctrl + Alt + Shift + → Navigate to last cell in current row.

    Screen Reader Commands

    • Ctrl OR Alt + Num Pad 5: Read current cell.
    • Insert + Shift + ↑: Read current row.
    • Insert + Shift + Home: Read from start of row.
    • Insert + Shift + Page Up: Read to end of row from current cell.
    • Insert + Shift + Num Pad 5: Read current column.
    • Insert + Shift + End: Read from top of column.
    • Insert + Shift + Page Down: Read to bottom of column.

    Code Snippet

    The following demonstrates how to implement cell accessibility in the React data grid:

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    useAccessibility="true" />

    API References