A cell in a tabular container.
Description
New in ARIA 1.1
A cell in a tabular container. See related gridcell.
Authors MUST ensure elements with role cell are contained in, or owned by, an element with the role row.
Example
HTML Example
<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>
Characteristics
Superclass Role
- section
Subclass Roles
- columnheader
- gridcell
- rowheader
Base Concept
- HTML td
Required Context Role
- row
Supported States and Properties
- aria-colindex
- aria-colspan
- aria-rowindex
- aria-rowspan
Inherited States and Properties:
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- contents
- author
Semantic HTML
Use the HTML <td> tag.
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
The “cell” role is only valid within a role=”table” construct, and is not valid within any other construct such as role=”grid”. The use of the roles “table” and “cell” are only valid within a construct that simulates a standard data table.
Reference
- W3C (opens new window)