Accessibility Compliance (igTreeGrid)
igTreeGrid Accessibility 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 igTreeGrid 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 igTreeGridUpdating feature. This makes sense only if the grid's element is a form which is not supported. |
* - control limitations
WAI-ARIA Support
The igTreeGrid follows the WAI-ARIA specification which defined how to design Web content and Web applications to be more accessible to users with disabilities.
The list below provides details on the ARIA attributes that are inherited from the igGrid and the ones specific to the igTreeGrid.
ARIA attributes inherited from the igGrid widget:
- 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 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.
Additional attributes that are specific to the igTreeGrid and help define its the hierarchical structure:
- The igTreeGrid is decorated with a treegrid role.
- The expansion indicators are focusable and can be used to expand/collapse the current row using the Enter/Spacebar keys.
- The rows have aria-level attribute, which defines the hierarchical level of the row within the structure.
- The rows have aria-expanded attribute, which holds information on the current expanded/collapsed state of the row.
- Each row has an id attribute. Parent rows have aria-owns attribute, which holds reference to the related child row ids.
