E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Tables Without Header not rendering correctly with NVDA?

Number of posts in this thread: 3 (In chronological order)

From: Brandon Keith Biggs
Date: Sat, Jul 27 2019 8:45AM
Subject: Tables Without Header not rendering correctly with NVDA?
No previous message | Next message →

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/>;

From: Birkir R. Gunnarsson
Date: Sat, Jul 27 2019 9:44AM
Subject: Re: Tables Without Header not rendering correctly with NVDA?
← Previous message | Next message →

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

From: Brandon Keith Biggs
Date: Sat, Jul 27 2019 10:54AM
Subject: Re: Tables Without Header not rendering correctly with NVDA?
← Previous message | No next message

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