Assistive technology tests on table header associations - act-rules/act-rules.github.io GitHub Wiki

Note: These tests were conducted on January 25th 2020

Assistive Technologies Used:

  • JAWS 2020.1912.11 + Internet Explorer
  • JAWS 2020.1912.11 + Chrome 79.0.3945.130
  • NVDA 2019.2.1 + Firefox 72.0.2
  • VoiceOver + Safari 13.0.4

Test 1: Auto scoped th 

<table>
  <tr>
    <th>Projects</th>
    <th>Progress</th>
  </tr>
  <tr>
    <td>My Project</td>
    <td>15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 2: scoped th 

<table>
  <tr>
    <th scope="col">Projects</th>
    <th scope="col">Progress</th>
  </tr>
  <tr>
    <td>My Project</td>
    <td>15%</td>
  </tr>
</table>

* IE + JAWS: Works

* Chrome + JAWS: Works

* Firefox + NVDA: Works

* Safari + VO: Works

Test 3: Row scoped th 

<table>
  <tr>
    <th scope="row">Projects</th>
    <th scope="row">Progress</th>
  </tr>
  <tr>
    <td>My Project</td>
    <td>15%</td>
  </tr>
</table>
  • IE + JAWS: Does not work
  • Chrome + JAWS: Does not work
  • Firefox + NVDA: Does not work
  • Safari + VO: Works

Test 4: Row scoped th, but with headers

<table>
  <tr>
    <th id="projects1" scope="row">Projects</th>
    <th id="progress1" scope="row">Progress</th>
  </tr>
  <tr>
    <td headers="projects1">My Project</td>
    <td headers="progress1">15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 5: Th not in the same column as the `td, but with headers

<table>
  <tr>
    <td></td>
    <th id="projects2">Projects</th>
  </tr>
  <tr>
    <td headers="projects2">15%</td>
    <td></td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 6:headers does not reference the cell, but th has scope fallback

<table>
  <tr>
    <th scope="col">Projects</th>
    <th scope="col">Progress</th>
  </tr>
  <tr>
    <td headers="projects100">My Project</td>
    <td>15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 7: td with scope

<table>
  <tr>
    <td scope="col">Projects</td>
    <th scope="col">Progress</th>
  </tr>
  <tr>
    <td>My Project</td>
    <td>15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 8: td with role=columnheader 

<table>
  <tr>
    <td role="columnheader">Projects</td>
    <td role="columnheader">Progress</td>
  </tr>
  <tr>
    <td>My Project</td>
    <td>15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Does not work. NVDA does not even render this code as a table.
  • Safari + VO: Does not work.

Test 9: Headers references outside of table 

<div id="projects3">Projects</div>
<div id="progress3">Progress</div>
<table>
  <tr>
    <td headers="projects3">My Project</td>
    <td headers="progress3">15%</td>
  </tr>
</table>
  • IE + JAWS: Does not work (Reads: Table with 2 columns and 1 rows, My Project 15%, table end)
  • Chrome + JAWS: Does not work (Reads: Table with 2 columns and 1 rows, My Project 15%, table end)
  • Firefox + NVDA: Does not work. NVDA considers the headers "Projects" and "Progress" as plain text. After those, it renders a table of one row and two columns: Column one "My project', Column 2 "15%".
  • Safari + VO: Does not work

Test 10: headers references to td 

<table>
  <tr>
    <td id="projects4">Projects</td>
    <td id="progress4">Progress</td>
  </tr>
  <tr>
    <td headers="projects4">My Project</td>
    <td headers="progress4">15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 11: headers references to td with role=columnheader 

<table>
  <tr>
    <td id="projects5" role="columnheader">Projects</td>
    <td id="progress5" role="columnheader">Progress</td>
  </tr>
  <tr>
    <td headers="projects4">My Project</td>
    <td headers="progress4">15%</td>
  </tr>
</table>
  • IE + JAWS: Works
  • Chrome + JAWS: Works
  • Firefox + NVDA: Works
  • Safari + VO: Works

Test 12: Auto scoped th with display:none 

<table>
  <tr style="display:none;">
    <th>Projects</th>
    <th>Progress</th>
  </tr>
  <tr>
    <td>My Project</td>
    <td>15%</td>
  </tr>
</table>
  • IE + JAWS: Does not work (Reads: "My Project" "15%" as plain text)
  • Chrome + JAWS: Does not work (Reads: "My Project" "15%" as plain text)
  • Firefox + NVDA: does not work. NVDA picks up a table with one row and two
  • columns: Column 1 "My Projects", Column 2 "15%".
  • Safari + VO: Does not work

Test 13: Row scoped th, but with headers and display:none 

<table>
  <tr style="display:none;">
    <th id="projects7" scope="row">Projects</th>
    <th id="progress7" scope="row">Progress</th>
  </tr>
  <tr>
    <td headers="projects7">My Project</td>
    <td headers="progress7">15%</td>
  </tr>
</table>
  • IE + JAWS: Does not work (Reads: Table with 2 columns and 1 rows, My Project 15%, table end)
  • Chrome + JAWS: Does not work (Reads: Table with 2 columns and 1 rows, My Project 15%, table end)
  • Firefox + NVDA: Does not work. NVDA picks up a table with one row and two
  • columns: Column 1 "My Projects", Column 2 "15%".
  • Safari + VO: Does not work
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️