<table> where aria-labelledby should be accessible name

← Return to main list

The purpose this test is to show the cascade order of how accessible names are applied in the accessibility tree for the <table> element. The priority order from highest to lowest is:

• If present, use aria-labelledby
• Otherwise, if present, use aria-label
• Otherwise, if present, use <caption>
• Otherwise, if present, use title
• Otherwise, there is no accessible name

Example

Animals

Code

<h3 id="a1">Animals</h3>
<table aria-labelledby="a1">
  <thead>
    <tr>
      <th>Fishes</th>
      <th>Birds</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Snapper</td>
      <td>Starling</td>
    </tr>
    <tr>
      <td>Salmon</td>
      <td>Eagle</td>
    </tr>
  </tbody>
</table>

Assistive technologies

← Return to main list