Accessibility Compliance (igGrid)
In this topic
This topic contains the following sections:
igGrid Section 508 Compliance
All of the Ignite UI for jQuery™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. Table 1 contains the specific rules of Subpart 1194.22 that pertain to the control. Also detailed is how the grid control complies with each rule.
To meet the requirements each accessibility rule, in some cases, you may need to interact with the control by to setting a specific property, but in other cases the control does the work for you.
Note: As jQuery controls are client-only, some of the rules are not supported and are marked as limitations.
Table 1: Section 508 compliance description
| Rules |
How We Comply with Rules |
| (a) |
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). |
| (b) |
Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. |
| (d) |
The control's markup is not readable without the associated style sheet because it's a client-side control and depends on the CSS rules. |
| (g) |
Row and column headers shall be identified for data tables. |
| (h) |
Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. |
| (n) |
The igGrid control participates in the tab sequence of the page and receives focus including via a mouse click. Selection must be enabled in order keyboard navigation to work.
- LEFT ARROW: When a cell is selected, this command makes the previous cell selected.
- RIGHT ARROW: When a cell is selected, this command makes the next cell selected.
- UP ARROW: Makes the row/cell in the previous row selected
- DOWN ARROW: Makes the row/cell in the next row selected
- SHIFT+UP (or DOWN) ARROW: Includes the above (or below) row/cell in a multiple selection
- CTRL+UP (or DOWN) ARROW: Changes the currently active row/cell
- SHIFT+ENTER: Deselects the currently selected row/cell
* Descriptive label (for) is not provided for the editor input elements as part of the igGridUpdating feature. This makes sense only if the grid's element is a form which is not supported. |
* - control limitations
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. The igGrid has been designed so that it follows these guidelines.
The list below provides details about what changes have been made to the igGrid to support WAI-ARIA. Please note that no special settings are needed to leverage these changes, as they are all enabled by default.
- All elements of the igGrid render a tabindex attribute with a corresponding value from the tabindex option of the igGrid, which allows access to the elements through the use of TAB and SHIFT+TAB keys.
- The igGrid is decorated with a grid role.
- The header elements are each decorated with an aria-label attribute with the column header text, which allows the header text to be read instead of the title attribute value when a title attribute is present.
- All column headers are decorated with the columnheader role.
- The thead, tbody, and tfoot elements are all decorated with a rowgroup role
- The rows are decorated with a row role.
- Row selector elements are decorated with a rowheader role.
- Table cell elements inside of the table body rows are decorated with a gridcell role.
- Table cell elements inside of the table body rows are decorated with aria-describedby attributes with a value set to the id of the corresponding columnheader element of the column the table cell belongs to.
- Table cell elements inside of the table body rows are decorated with aria-selected attributes when the selection feature is enabled. By default the value of the aria-selected will be false unless a row is selected initially in configuration.
- The table is decorated with an aria-multiselectable attribute when the selection feature is enabled. The value of this attribute depends on the value of the multipleSelection option of the selection feature.
- Checkboxes are decorated with the checkbox role and aria-checked attribute. In addition, checkboxes are decorated with the aria-title attribute which corresponds to the related column header.
