WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables Without Header not rendering correctly with NVDA?

for

From: Birkir R. Gunnarsson
Date: Jul 27, 2019 9:44AM

I'm confused what you're trying to do here.
The third table cannot have <th> elements, they should just have a
<div> with role="columnheader" (having a <th> element without a parent
<tr> is an HTML violation, even if you put the ARIA roles on it,
because it's not clear how ARIA and HTML work together.

Screen readers automatically assume that tables without captions, a
summary attribute or a caption are layout tables, that was done to
eliminate the excessive verbosity associated with the time people used
tables for layout purposes (e.g. in forms). A few still do but that's
definitely a dying practece (thank goodness).
You could try one of adding role="table" to a <table> element or add
summary="data table" to the <table> element, or add a <caption>
element, all 3 should force screen readers to treat table as data
tables.
Keep in mind though that data tables should have headers, so that is
technically bad HTML (but if the purpose is to teach people to code,
of course you need to show them bad HTML).
Hope these tidbits hhelp a little.
Cheers

On 7/27/19, Brandon Keith Biggs < <EMAIL REMOVED> > wrote:
> 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/>;
> > > > >


--
Work hard. Have fun. Make history.