Skip to main content

Omit unnecessary scope attribute for simple table headers

Medium
accessibilityreacthtml

What​

This practice applies when building data tables that only have header elements (<th>) in a single row or a single column. Code that includes a 'scope' attribute on these <th> elements is considered redundant since the table structure inherently conveys the header relationships.

Why​

Using extra attributes like 'scope' when not required can clutter the markup and confuse developers maintaining the code. Keeping the code simple improves readability while still complying with accessibility standards such as WCAG.

Fix​

Remove the 'scope' attribute from header elements in tables with a single header row or column. Use semantic <th> tags directly to indicate headers without additional attributes.

Examples​

Example 1:​

Positive​

The code correctly uses <th> elements without the 'scope' attribute since the header is clearly defined in a single row.

import React from "react";

const SimpleTable = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Widget</td>
          <td>$25</td>
          <td>Available</td>
        </tr>
        <tr>
          <td>Gadget</td>
          <td>$40</td>
          <td>Out of stock</td>
        </tr>
      </tbody>
    </table>
  );
};

export default SimpleTable;

Negative​

The code unnecessarily adds 'scope' attributes on <th> elements despite having a clearly structured single-row header, resulting in redundant markup.

import React from "react";

const RedundantTable = () => {
  return (
    <table>
      <thead>
        <tr>
          <th scope="col">Product</th>
          <th scope="col">Price</th>
          <th scope="col">Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Widget</td>
          <td>$25</td>
          <td>Available</td>
        </tr>
        <tr>
          <td>Gadget</td>
          <td>$40</td>
          <td>Out of stock</td>
        </tr>
      </tbody>
    </table>
  );
};

export default RedundantTable;