Skip to content

Advanced Data Grid

Advanced Data Grid Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

This example has not yet been developed. Development is described in issue 155.

This implementation of the Grid Pattern demonstrates how to implement a grid that has functionality similar to a spreadsheet.

Similar examples include:

  • Data Grid Examples: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.
  • Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.

Example

This is the place where the reader will experience the functioning example.

The HTML in this section along with the javascript and CSS it uses demonstrate the design pattern.

Accessibility Features

Please replace this content with a list of accessibility features demonstrated in this implementation, such as:

  1. ARIA roles
  2. property and state information
  3. Event handlers
  4. tabindex values

Keyboard Support

  • KEY_NAME: function
  • KEY_NAME: function

Role, Property, State, and Tabindex Attributes

Attribute Applied to Element Usage
role="ROLE_NAME" HTML_ELEMENT Brief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.
aria-labelledby="ID_REF" HTML_ELEMENT Brief explanation of usage, purpose, benefit, and/or guidance that is relevant to this specific implementation.
And so on ... covering all relevant attributes ... ...

Javascript and CSS Source Code

  • CSS:
  • Javascript:

HTML Source Code

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.