• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

WAI-ARIA: Role=Cell

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y