WebAIM - Web Accessibility In Mind

E-mail List Archives

Tables Without Header not rendering correctly with NVDA?

for

From: Brandon Keith Biggs
Date: Jul 27, 2019 8:45AM

Hello,
I'm making a non semantic interface for the game:
https://codepen.io/gaearon/pen/gWWZgR
Because this is a basic example, I would like to encourage the use of
table. A screen reader user needs a table layout to figure out where the
cells ar.
The problem is that for some reason, NVDA doesn't read the table unless it
has a header. Because this is a non semantic interface, a header is not
needed and would break the experience.
I would normally just use roles, because they work, but this is an intro
tutorial, and if roles are used, then we are going to see a significant
uptick in role usage in the developer community, which is not really what
we want to see.
I guess there could be a comment in the tutorial letting readers know this
is a "game" and does not use semantic HTML, but that's probably going to go
over the head of most newbies.
What do people think?
Here is some HTML code that shows a table with a header, a table without a
header and a div table without a header:

<!DOCTYPE html>
<html>
<body>

<h2>Correct HTML Table</h2>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<h2>Table without the header</h2>

<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<h2>Div Table Without Header</h2>

<div role="table" style="width:100%">
<div role="row">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</div>
<div role="row">
<div role="cell">Jill</div>
<div role="cell">Smith</div>
<div role="cell">50</div>
</div>
<div role="row">
<div role="cell">Eve</div>
<div role="cell">Jackson</div>
<div role="cell">94</div>
</div>
<div role="row">
<div role="cell">John</div>
<div role="cell">Doe</div>
<div role="cell">80</div>
</div>
</table>


</body>
</html>

Brandon Keith Biggs <http://brandonkeithbiggs.com/>;