Accompanying Files
Observation Details
The comparison table with tabular content is not using the semantic HTML table element and as such cannot be accessed in a useful way via keyboard navigation and assistive technology. Each "section" inside the tabular data can only be navigated one column at a time. Navigation from row to row and column to column is important to understand complex tabular content.
Given. the example in the attached screenshot, there are three devices in comparison. Navigating this data by assistive technology, going to section "Kapazität", the content is simply announced as "128 GB, 256 GB, 512 GB, 128 GB, 256 GB, 512 GB, 128 GB, 256 GB, 512 GB". No hint on the compared devices' names is given.
Matching of cell data to the visually presented column heading (device name) is not possible without visual confirmation.
Remediation Notes
Ensure, all tabular data is using proper semantic HTML table elements.
The given data could be implemented in various ways. The most accessible would be the cumulation in a single data table as all data is connected to one device. For technical requirements please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Table". An example structure could look like this:
<table>
<caption>DEVICE TYPE Vergleich</caption>
<thead>
<tr>
<th><!-- DATA TYPE --></th>
<th scope="col">Device Name 1</th>
<th scope="col">Device Name 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Kapazitäten</th>
<td>
<ul>
<li>128 GB</li>
<li>256 GB</li>
<li>512 GB</li>
</ul>
</td>
<td>
<ul>
<li>128 GB</li>
<li>256 GB</li>
</ul>
</td>
</tr>
<tr>
<th scope="row">Farben</th>
<td>
<ul>
...
</ul>
</td>
<td>
<ul>
...
</ul>
</td>
</tr>
...
</tbody>
</table>