Table Example

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.

The below example illustrates an implementation of the WAI-ARIA table design pattern. Note that when possible, using a native HTML table element is recommended.

Similar examples include:

Sortable Table Example: Basic HTML table that illustrates implementation of aria-sort in the headers of sortable columns.
Data Grid Examples: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.

Example

Students currently enrolled in WAI-ARIA 101 for the coming semester

First Name Last Name Company Address

Fred Jackson Acme, Inc. 123 Broad St.

Sara James Acme, Inc. 123 Broad St.

Ralph Jefferson XYZ, Inc. 456 Main St.

Nancy Jensen XYZ, Inc. 456 Main St.

Keyboard Support

Not Applicable

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`table`		`div`	Identifies the element containing the table structure.
	`aria-label="Students"`	`div`	Provides an accessible name for the table.
	`aria-describedby="IDREF"`	`div`	Refers to the element that serves as the caption for the table.
`rowgroup`		`div`	Identifies the elements that serve as containers for the table header and table body rows. Unlike HTML, WAI-ARIA does not include separate roles for the table header and table body row sets.
`row`		`div`	Identifies each element that contains the cells for a row.
`columnheader`		`span`	Identifies elements that serve as a cell containing a column label.
`cell`		`span`	Identifies elements containing content for a single cell.

Javascript and CSS Source Code

CSS: table.css
Javascript: Not applicable.

HTML Source Code

<div role="table"
     aria-label="Students"
     aria-describedby="students_table_desc">
  <div id="students_table_desc">
    Students currently enrolled in WAI-ARIA 101 for the coming semester
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">
        First Name
      </span>
      <span role="columnheader">
        Last Name
      </span>
      <span role="columnheader">
        Company
      </span>
      <span role="columnheader">
        Address
      </span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">
        Fred
      </span>
      <span role="cell">
        Jackson
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
      <span role="cell">
        123 Broad St.
      </span>
    </div>
    <div role="row">
      <span role="cell">
        Sara
      </span>
      <span role="cell">
        James
      </span>
      <span role="cell">
        Acme, Inc.
      </span>
      <span role="cell">
        123 Broad St.
      </span>
    </div>
    <div role="row">
      <span role="cell">
        Ralph
      </span>
      <span role="cell">
        Jefferson
      </span>
      <span role="cell">
        XYZ, Inc.
      </span>
      <span role="cell">
        456 Main St.
      </span>
    </div>
    <div role="row">
      <span role="cell">
        Nancy
      </span>
      <span role="cell">
        Jensen
      </span>
      <span role="cell">
        XYZ, Inc.
      </span>
      <span role="cell">
        456 Main St.
      </span>
    </div>
  </div>
</div>