Advanced Data Grid

Important Note About Use of This Example

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

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

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

This implementation of the design pattern for grid 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.
When developing an example implementation for this guide, please follow the APG example coding guidelines .

Accessibility Features

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

ARIA roles
property and state information
Event handlers
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

<!--  Replace content of this div with the example.  -->
<p>
  This is the place where the reader will experience the functioning example.
</p>
<ul>
  <li>
    The HTML in this section along with the javascript and CSS it uses demonstrate
    the design pattern.
  </li>
  <li>
    When developing an example implementation for this guide, please follow the
    <a href="https://ianpouncey.github.io/code-guide/">
      APG example coding guidelines
    </a>
    .
  </li>
  <!--  Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo.  -->
</ul>