WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables Without Header not rendering correctly with NVDA?

for

From: Brandon Keith Biggs
Date: Jul 27, 2019 10:54AM

Hello,
Here is the code that I am proposing. I think the table is the best, but
the div works as well:
https://codepen.io/frastlin/pen/EqNgzq

The tutorial with the inaccessible game is:
https://reactjs.org/tutorial/tutorial.html

What do people recommend? The table or the div?
Thank you,

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


On Sat, Jul 27, 2019 at 8:44 AM Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> 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.
> > > > >