Accessibility

Accessibility is a critical aspect of web development, ensuring that all users can effectively navigate and interact with your application, regardless of their abilities. The GraphiteGridDom renderer is designed to be fully accessible and complies with industry-standard accessibility guidelines. This page provides an overview of the accessibility features and considerations for Graphite Grid.

Renderer Accessibility

GraphiteGridDom

The GraphiteGridDom renderer is fully accessible and conforms to the W3C's WCAG 2.0 standard. There are three levels of conformance: A, AA, and AAA. Meeting the AA standard ensures compliance with most other accessibility standards, such as the ADA standard set by the US Department of Justice.

To ensure accessibility, the GraphiteGridDom renderer adds various ARIA (Accessible Rich Internet Applications) properties to the grid rows, grid cells, and column header cells. Screen readers recognize these properties, enabling visually impaired users to navigate and understand the grid structure and content effectively.

Caution

The GraphiteGridCanvas renderer is not currently accessible. It is drawn as an image to the browser. Following standard industry guidelines, the team at 1771 Technologies believes that "no accessibility" is better than "bad" accessibility. We are actively researching better ways to make the Canvas Renderer accessible. Still, at present, browsers do not offer the full range of functionality required to make the canvas renderer accessible to the extent that we desire.

ARIA Roles and Properties

To remain spec-compliant and ensure accessibility, Graphite Grid adds various ARIA roles and properties to the grid elements.

Grid Roles

The primary container of Graphite Grid has role="grid", marking the grid viewport. Additionally, the following ARIA properties are added:

aria-rowcount: indicates the total number of rows in the grid.
aria-colcount: indicates the total number of columns in the grid.
aria-multiselectable=true (if multiple row selection is enabled): indicates that the grid supports multiple row selection.

Row Roles

Graphite Grid uses two roles for rows: role="row" and role="rowgroup". An element containing rows is marked with the "rowgroup" role.

For the "rowgroup" role, the following additional ARIA property is added:

aria-expanded: indicates whether the row group is expanded or collapsed.

For the "row" role, the following additional ARIA properties are added:

aria-rowindex: indicates the index of the row within the grid.
aria-selected: indicates whether the row is currently selected.

Header Cell Roles

Any column header is given the role="columnheader". Additional ARIA properties are also added for the column header:

aria-colindex: indicates the index of the column within the grid.
aria-expanded: indicates whether the column is expanded or collapsed.
aria-sort: indicates the current sort direction of the column (ascending, descending, or none).

Grid Cell Roles

Any grid cell is given the role="gridcell". Additional ARIA properties are also added for the cells:

aria-colindex: indicates the index of the column within the grid.
aria-selected: indicates whether the cell is currently selected.

Considerations for Visually Impaired Users

Screen Readers

Visually impaired users often rely on screen readers to understand and navigate the content displayed in the browser. Two popular screen readers are:

The GraphiteGridDom renderer is fully compatible with these screen readers and follows the W3C's accessibility standards to ensure the best possible user experience.

Color Accessibility

When designing your grid theme colors, it's crucial to consider visually impaired users. According to Color Blind Awareness, approximately 300 million people are affected by some degree of color blindness. Ensuring that the colors used in your grid theme are accessible is essential for meeting the AA accessibility standard.

Some recommended color palettes that prioritize accessibility are:

By using accessible color combinations, you can ensure your grid is visually distinguishable and readable for all users.

Conclusion

The GraphiteGridDom renderer is built with accessibility in mind, following industry-standard guidelines and best practices. By leveraging ARIA roles and properties, ensuring compatibility with screen readers, and using accessible color palettes, you can create a data grid that is inclusive and usable for all users, regardless of their visual abilities.

Remember to prioritize accessibility throughout your development process and regularly test your grid with various assistive technologies to ensure a seamless and inclusive user experience.