Accessibility

Considerations

• The comparison table headers accurately describe the data contained in the rows and columns.
• If the comparison table has a labels it should be clear and concise.
• If the comparison table has a description, aria-describedby should be set on the table element with a value referring to the element containing the description.

Label

Every table should have a label. If it's a separate element, use aria-labelledby; otherwise use aria-label:

<table class="if table" aria-label="A label"></table>

Or:

<table class="if table" aria-labelledby="id-to-label-element"></table>

Description

Not every table needs to have a caption or description, but every table that does should use aria-describedby to connect it with that element:

<table class="if table" aria-describedby="id-to-description-element"></table>

Identify column and row headers

Identify the direction of the table headers. If the headers are horizontally, use scope="col" on the ths:

The headers are in the first row

<table class="if comparison-table" …>
  <thead class="if">
    <tr class="if">
      <th class="if" scope="col">…</th>
      <th class="if" scope="col">…</th>
      <th class="if" scope="col">…</th>
      <th class="if" scope="col">…</th>
    </tr>
  </thead>
</table>

If the header cell spans more than one column, use scope="colgroup".

The header spans two columns

<table class="if" …>
  <tbody class="if">
    <tr class="if">
        <th class="if">…</th>
        <th class="if" scope="colgroup" colspan="2">…</th>    </tr>
  </tbody>
</table>

If the column header changes in the middle of the table, make sure that each data cell is associated with the correct header. Each th element must have a unique id and each td cell must have a headers attribute that lists the id values of the associated header cells.

Table with multiple headers in one column

<table class="if">
    <thead class="if">
        <th id="header-1" scope="col">Header</th>        …
    </thead>
    <tbody class="if">
        <tr class="if">
            <td headers="header-1" class="if">Cell</td>            <td headers="header-1" class="if">Cell</td>
            <td headers="header-1" class="if">Cell</td>
        </tr>
        <tr>
            <th id="header-2" class="if" scope="col">Header</th>            <td headers="header-2" class="if">Cell</td>            <td headers="header-2" class="if">Cell</td>
            …
        </tr>
    </tbody>
</table>

Expandable table

• The first cell of each row contains a disclosure button that controls the visibility of the hidden content.
• When the controlled content is hidden, the button is styled with a down-pointing arrow to hint that activating the button will display additional content. When the content is visible, the arrow points up.
• When the content is visible, the disclosure button must have aria-expanded attribute set to true. When the content area is hidden, it should be set to false.
• The disclosure button must have aria-controls attribute that refers to element that contains all the content that is shown or hidden.
• To activate the disclosure button and toggle the visibility of the disclosure content, user can use button "Enter" or "Space".

Table with expandable rows

<table class="if comparison-table expandable">
  <tbody class="if">
    …
    <tr class="if expandable is-expanded">
      <td class="if">
        <span
          class="if"
          role="button"
          aria-controls="description-2"          aria-expanded="true"          tabindex="0"
        >...</span>
      </td>
      …
    </tr>
    <tr class="if" id="description-2">      <td class="if" colspan="3">
        <p class="if">
          Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin
          volutpat ac justo ac efficitur.
        </p>
      </td>
    </tr>
  </tbody>
</table>

Announcements

• Inform the user that the table contains expandable rows or table can be sorted after each column, by adding aria-describedby attribute.
• Let the user know if the hidden content is visible or not after pressing the disclosure button.

Resources