Ensure table columns, rows, and cells have proper ARIA labels

An element with role=”table” is a static tabular structure with rows containing cells. The cells are not focusable or selectable, but widgets within individual table cells can be interactive. Using a native HTML table element whenever possible is strongly encouraged.

Adding ARIA attributes:

To create an accessible table, semantic table elements, such as <tbody>, <thead>, <tr>, <th>, and <tbody> need to be referenced via associated roles, such as ”table”, ”row”, ”columnheader”, and ”cell”.

1. Add <checks-richtext_code>role=”table”<checks-richtext_code> to the container element
2. Add <checks-richtext_code>role=”row”<checks-richtext_code> to all the rows
3. Add <checks-richtext_code>role=”cell”<checks-richtext_code> to every cell
4. Add <checks-richtext_code>role=”columnheader”<checks-richtext_code> to all the column headers
5. Add <checks-richtext_code>role=”rowheader”<checks-richtext_code> to all row headers
6. Add <checks-richtext_code>aria-rowcount=”number-of-rows”<checks-richtext_code> to the container element (where “number-of-rows” is the actual number of rows in the table)
7. The table caption can be defined via <checks-richtext_code>aria-labelledby<checks-richtext_code> or <checks-richtext_code>aria-label<checks-richtext_code>
   

Below is an example of proper HTML structure and labeling:

<div role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="4">
  <div id="semantic_elements_table_desc">Semantic Elements to use instead of ARIA's roles</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">ARIA Role</span>
      <span role="columnheader">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row">
      <span role="cell">header</span>
      <span role="cell">h2</span>
    </div>
    <div role="row">
      <span role="cell">header</span>
      <span role="cell">h3</span>
    </div>
    <div role="row">
      <span role="cell">header</span>
      <span role="cell">h4</span>
    </div>
  </div>
</div>

Copy codeCopied!

Useful resources:

• ARIA: table role
• ARIA: table example
  

WCAG reference:

1.3.1 Info and Relationships