WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: thead th and scope="col" and "row"

for

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

From: Schulz, Leslie
Date: Mon, Aug 16 2021 12:23PM
Subject: thead th and scope="col" and "row"
No previous message | Next message →

I have always thought that a table needed th's in the top row if they are acting as headings.
Then I thought scope="col" also had to be added.

Just by accident I came across a table that read correctly without the scope.
The header row also had <thead>.
I played around with whether I included all th's or I included thead, and BOTH seemed to work.

I also played around with th's in the left column. Again, I left off scope="row".

Expected behavior is when using the table navigation keys, I move across a row, as I enter a column, I hear its heading.
As I navigate down a column, I hear the row headings.
I only put th's on a couple of the 1st column items so that I could hear the difference.

Did something change in the way the screen readers handle this?
I thought scope="col" and scope="row" were required if you wanted to hear them read.

Here is some code:
<h2>Table with THs and thead</h2>
<table><thead><tr><th></th>
<th>Late Submission</th><th>Late Penalty</th></tr>
</thead><tbody>
<tr><th>Auto Graded</th><td>Yes</td><td>Yes</td></tr>
<tr><th>Credit / No Credit</th><td>Yes</td><td>Yes</td></tr>
<tr><td>Manually Graded</td><td>Yes</td><td>No</td></tr>
<tr><td>Past Due</td><td>No</td><td>No</td></tr>
<tr><td>No Due Date</td><td>Yes</td><td>Yes</td></tr>
<tr><td>Non-Mindtap</td><td>No</td><td>No</td></tr>
<tr><td>Unsupported</td><td>No</td><td>No</td></tr></tbody></table>

Thanks,
Leslie


Leslie Schulz, MSEd, CPACC
Web Accessibility Specialist, Learning Team
Content and Learning | Higher Ed & Skills
Quality Learning for All
PHONE: 214.212.7379 Central Time
EMAIL: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
WEB: cengage.com<http://www.cengage.com/>;

From: Steve Green
Date: Mon, Aug 16 2021 12:36PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

Yes, I recently noticed that JAWS' behaviour has changed in this respect, although I don't know when. This is just one example of how some screen readers use heuristics to provide a good user experience despite non-conformant coding. However, it is irrelevant in terms of WCAG conformance, which must be assessed by inspecting the code, not by testing with assistive technologies.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Schulz, Leslie via WebAIM-Forum
Sent: 16 August 2021 19:23
To: = EMAIL ADDRESS REMOVED =
Cc: Schulz, Leslie < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] thead th and scope="col" and "row"

I have always thought that a table needed th's in the top row if they are acting as headings.
Then I thought scope="col" also had to be added.

Just by accident I came across a table that read correctly without the scope.
The header row also had <thead>.
I played around with whether I included all th's or I included thead, and BOTH seemed to work.

I also played around with th's in the left column. Again, I left off scope="row".

Expected behavior is when using the table navigation keys, I move across a row, as I enter a column, I hear its heading.
As I navigate down a column, I hear the row headings.
I only put th's on a couple of the 1st column items so that I could hear the difference.

Did something change in the way the screen readers handle this?
I thought scope="col" and scope="row" were required if you wanted to hear them read.

Here is some code:
<h2>Table with THs and thead</h2>
<table><thead><tr><th></th>
<th>Late Submission</th><th>Late Penalty</th></tr>
</thead><tbody>
<tr><th>Auto Graded</th><td>Yes</td><td>Yes</td></tr>
<tr><th>Credit / No Credit</th><td>Yes</td><td>Yes</td></tr>
<tr><td>Manually Graded</td><td>Yes</td><td>No</td></tr>
<tr><td>Past Due</td><td>No</td><td>No</td></tr>
<tr><td>No Due Date</td><td>Yes</td><td>Yes</td></tr>
<tr><td>Non-Mindtap</td><td>No</td><td>No</td></tr>
<tr><td>Unsupported</td><td>No</td><td>No</td></tr></tbody></table>

Thanks,
Leslie


Leslie Schulz, MSEd, CPACC
Web Accessibility Specialist, Learning Team Content and Learning | Higher Ed & Skills Quality Learning for All
PHONE: 214.212.7379 Central Time
EMAIL: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
WEB: cengage.com<http://www.cengage.com/>;

From: Jonathan Avila
Date: Mon, Aug 16 2021 12:39PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

The WAI tutorials show an example of where TH can be used without scope in specific cases.
https://www.w3.org/WAI/tutorials/tables/one-header/

Jonathan

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Monday, August 16, 2021 2:37 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] thead th and scope="col" and "row"

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Yes, I recently noticed that JAWS' behaviour has changed in this respect, although I don't know when. This is just one example of how some screen readers use heuristics to provide a good user experience despite non-conformant coding. However, it is irrelevant in terms of WCAG conformance, which must be assessed by inspecting the code, not by testing with assistive technologies.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Schulz, Leslie via WebAIM-Forum
Sent: 16 August 2021 19:23
To: = EMAIL ADDRESS REMOVED =
Cc: Schulz, Leslie < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] thead th and scope="col" and "row"

I have always thought that a table needed th's in the top row if they are acting as headings.
Then I thought scope="col" also had to be added.

Just by accident I came across a table that read correctly without the scope.
The header row also had <thead>.
I played around with whether I included all th's or I included thead, and BOTH seemed to work.

I also played around with th's in the left column. Again, I left off scope="row".

Expected behavior is when using the table navigation keys, I move across a row, as I enter a column, I hear its heading.
As I navigate down a column, I hear the row headings.
I only put th's on a couple of the 1st column items so that I could hear the difference.

Did something change in the way the screen readers handle this?
I thought scope="col" and scope="row" were required if you wanted to hear them read.

Here is some code:
<h2>Table with THs and thead</h2>
<table><thead><tr><th></th>
<th>Late Submission</th><th>Late Penalty</th></tr>
</thead><tbody>
<tr><th>Auto Graded</th><td>Yes</td><td>Yes</td></tr>
<tr><th>Credit / No Credit</th><td>Yes</td><td>Yes</td></tr>
<tr><td>Manually Graded</td><td>Yes</td><td>No</td></tr>
<tr><td>Past Due</td><td>No</td><td>No</td></tr>
<tr><td>No Due Date</td><td>Yes</td><td>Yes</td></tr>
<tr><td>Non-Mindtap</td><td>No</td><td>No</td></tr>
<tr><td>Unsupported</td><td>No</td><td>No</td></tr></tbody></table>

Thanks,
Leslie


Leslie Schulz, MSEd, CPACC
Web Accessibility Specialist, Learning Team Content and Learning | Higher Ed & Skills Quality Learning for All
PHONE: 214.212.7379 Central Time
EMAIL: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
WEB: cengage.com<http://www.cengage.com/>;

From: Birkir R. Gunnarsson
Date: Mon, Aug 16 2021 12:46PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

<th> cells used at the edge of the table are automatically assigned
scope by the browser ("col" if they are in the top row, "row" of they
are in the first column).
I can go dig this up in the HTML5 spec for tables. There's also a
reference to this somewhere in the WCAG 1.3.1 HTML techniques for
tables.

If you add a <th> cell anywhere else in the table, not in top row or
first column, then you need to add a scope attribute.


On 8/16/21, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> The WAI tutorials show an example of where TH can be used without scope in
> specific cases.
> https://www.w3.org/WAI/tutorials/tables/one-header/
>
> Jonathan
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve
> Green
> Sent: Monday, August 16, 2021 2:37 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] thead th and scope="col" and "row"
>
> CAUTION: This email originated from outside of the organization. Do not
> click links or open attachments unless you recognize the sender and know the
> content is safe.
>
>
> Yes, I recently noticed that JAWS' behaviour has changed in this respect,
> although I don't know when. This is just one example of how some screen
> readers use heuristics to provide a good user experience despite
> non-conformant coding. However, it is irrelevant in terms of WCAG
> conformance, which must be assessed by inspecting the code, not by testing
> with assistive technologies.
>
> Steve Green
> Managing Director
> Test Partners Ltd
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Schulz, Leslie via WebAIM-Forum
> Sent: 16 August 2021 19:23
> To: = EMAIL ADDRESS REMOVED =
> Cc: Schulz, Leslie < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] thead th and scope="col" and "row"
>
> I have always thought that a table needed th's in the top row if they are
> acting as headings.
> Then I thought scope="col" also had to be added.
>
> Just by accident I came across a table that read correctly without the
> scope.
> The header row also had <thead>.
> I played around with whether I included all th's or I included thead, and
> BOTH seemed to work.
>
> I also played around with th's in the left column. Again, I left off
> scope="row".
>
> Expected behavior is when using the table navigation keys, I move across a
> row, as I enter a column, I hear its heading.
> As I navigate down a column, I hear the row headings.
> I only put th's on a couple of the 1st column items so that I could hear the
> difference.
>
> Did something change in the way the screen readers handle this?
> I thought scope="col" and scope="row" were required if you wanted to hear
> them read.
>
> Here is some code:
> <h2>Table with THs and thead</h2>
> <table><thead><tr><th></th>
> <th>Late Submission</th><th>Late Penalty</th></tr>
> </thead><tbody>
> <tr><th>Auto Graded</th><td>Yes</td><td>Yes</td></tr>
> <tr><th>Credit / No Credit</th><td>Yes</td><td>Yes</td></tr>
> <tr><td>Manually Graded</td><td>Yes</td><td>No</td></tr>
> <tr><td>Past Due</td><td>No</td><td>No</td></tr>
> <tr><td>No Due Date</td><td>Yes</td><td>Yes</td></tr>
> <tr><td>Non-Mindtap</td><td>No</td><td>No</td></tr>
> <tr><td>Unsupported</td><td>No</td><td>No</td></tr></tbody></table>
>
> Thanks,
> Leslie
>
>
> Leslie Schulz, MSEd, CPACC
> Web Accessibility Specialist, Learning Team Content and Learning | Higher Ed
> & Skills Quality Learning for All
> PHONE: 214.212.7379 Central Time
> EMAIL: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> WEB: cengage.com<http://www.cengage.com/>;
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

From: Don Mauck
Date: Mon, Aug 16 2021 12:48PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

I'm curious what Browser you used. Is it possible that the Browsers have changed how they react?

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Monday, August 16, 2021 12:37 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [External] : Re: [WebAIM] thead th and scope="col" and "row"

Yes, I recently noticed that JAWS' behaviour has changed in this respect, although I don't know when. This is just one example of how some screen readers use heuristics to provide a good user experience despite non-conformant coding. However, it is irrelevant in terms of WCAG conformance, which must be assessed by inspecting the code, not by testing with assistive technologies.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Schulz, Leslie via WebAIM-Forum
Sent: 16 August 2021 19:23
To: = EMAIL ADDRESS REMOVED =
Cc: Schulz, Leslie < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] thead th and scope="col" and "row"

I have always thought that a table needed th's in the top row if they are acting as headings.
Then I thought scope="col" also had to be added.

Just by accident I came across a table that read correctly without the scope.
The header row also had <thead>.
I played around with whether I included all th's or I included thead, and BOTH seemed to work.

I also played around with th's in the left column. Again, I left off scope="row".

Expected behavior is when using the table navigation keys, I move across a row, as I enter a column, I hear its heading.
As I navigate down a column, I hear the row headings.
I only put th's on a couple of the 1st column items so that I could hear the difference.

Did something change in the way the screen readers handle this?
I thought scope="col" and scope="row" were required if you wanted to hear them read.

Here is some code:
<h2>Table with THs and thead</h2>
<table><thead><tr><th></th>
<th>Late Submission</th><th>Late Penalty</th></tr>
</thead><tbody>
<tr><th>Auto Graded</th><td>Yes</td><td>Yes</td></tr>
<tr><th>Credit / No Credit</th><td>Yes</td><td>Yes</td></tr>
<tr><td>Manually Graded</td><td>Yes</td><td>No</td></tr>
<tr><td>Past Due</td><td>No</td><td>No</td></tr>
<tr><td>No Due Date</td><td>Yes</td><td>Yes</td></tr>
<tr><td>Non-Mindtap</td><td>No</td><td>No</td></tr>
<tr><td>Unsupported</td><td>No</td><td>No</td></tr></tbody></table>

Thanks,
Leslie


Leslie Schulz, MSEd, CPACC
Web Accessibility Specialist, Learning Team Content and Learning | Higher Ed & Skills Quality Learning for All
PHONE: 214.212.7379 Central Time
EMAIL: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
WEB: cengage.com<https://urldefense.com/v3/__http://www.cengage.com/__;!!ACWV5N9M2RV99hQ!cEJjpGN_sgJDyao3sActVyiMCPgYvKJj7oLoa6vNCzYe_ixt7hwffB7Tf9gqQYM$ >

From: Sailesh Panchang
Date: Mon, Aug 16 2021 6:00PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

See
https://www.w3.org/WAI/WCAG21/Techniques/html/H63
A TD with scope attribute has worked just fine too for as long as I
can remember.
HTML5 made it invalid to use scope on TD. It was valid in HTML 4.01.
Use scope only when needed to convey directionality for TH.

Thanks,
Sailesh

From: Schulz, Leslie
Date: Tue, Aug 17 2021 12:15PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

Thank you for your helpful replies.

I will look into the HTML5 specifications.

I also appreciate this link https://www.w3.org/WAI/tutorials/tables/one-header/ from Jon Avila.

W3C does offer examples of not using the scope attribute in simple tables.

Thank you all for your help!

Leslie

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Tuesday, August 17, 2021 1:00 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [EXTERNAL] WebAIM-Forum Digest, Vol 197, Issue 15

Send WebAIM-Forum mailing list submissions to
= EMAIL ADDRESS REMOVED =

To subscribe or unsubscribe via the World Wide Web, visit
https://urldefense.com/v3/__https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum__;!!MXVguWEtGgZw!evLBnEb1yBIINzetWzWVbfmearuPxuHuEbIoGoc1pUNMxpFKHUY-mNXReEZ4IfPlmu7a$
or, via email, send a message with subject or body 'help' to
= EMAIL ADDRESS REMOVED =

You can reach the person managing the list at
= EMAIL ADDRESS REMOVED =

When replying, please edit your Subject line so it is more specific than "Re: Contents of WebAIM-Forum digest..."

From: Birkir R. Gunnarsson
Date: Tue, Aug 17 2021 5:31PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | Next message →

Here is the HTML5 spec:
https://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html
(look for the definition of how browsers handle scope="auto" i.e. no
scope attribute).
The formula is not coded accessibly so I can't be 100% sure but my
understanding is that the auto scope attribute will affect all cells
below the header cell (if it is a column) or to the right of the
header cell (if it is a row).
If you have a cell that is not in the first row or first column you
should always explicitly define the scope of the cell, else you could
end up with incorrect or at least inconsistent results.


On 8/17/21, Schulz, Leslie via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
> Thank you for your helpful replies.
>
> I will look into the HTML5 specifications.
>
> I also appreciate this link
> https://www.w3.org/WAI/tutorials/tables/one-header/ from Jon Avila.
>
> W3C does offer examples of not using the scope attribute in simple tables.
>
> Thank you all for your help!
>
> Leslie
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> = EMAIL ADDRESS REMOVED =
> Sent: Tuesday, August 17, 2021 1:00 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [EXTERNAL] WebAIM-Forum Digest, Vol 197, Issue 15
>
> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS REMOVED =
>
> To subscribe or unsubscribe via the World Wide Web, visit
> https://urldefense.com/v3/__https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum__;!!MXVguWEtGgZw!evLBnEb1yBIINzetWzWVbfmearuPxuHuEbIoGoc1pUNMxpFKHUY-mNXReEZ4IfPlmu7a$
> or, via email, send a message with subject or body 'help' to
> = EMAIL ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS REMOVED =
>
> When replying, please edit your Subject line so it is more specific than
> "Re: Contents of WebAIM-Forum digest..."
> > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Wed, Aug 18 2021 2:38PM
Subject: Re: thead th and scope="col" and "row"
← Previous message | No next message

You never know when the code is going to be changed and if some adds a row
or column before the cells you were relying being a header cell, so I
always specify scope even if it's on the first row or first column. It
makes the code easier to read too.


On Tue, Aug 17, 2021 at 5:31 PM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Here is the HTML5 spec:
> https://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html
> (look for the definition of how browsers handle scope="auto" i.e. no
> scope attribute).
> The formula is not coded accessibly so I can't be 100% sure but my
> understanding is that the auto scope attribute will affect all cells
> below the header cell (if it is a column) or to the right of the
> header cell (if it is a row).
> If you have a cell that is not in the first row or first column you
> should always explicitly define the scope of the cell, else you could
> end up with incorrect or at least inconsistent results.
>
>
> On 8/17/21, Schulz, Leslie via WebAIM-Forum
> < = EMAIL ADDRESS REMOVED = > wrote:
> > Thank you for your helpful replies.
> >
> > I will look into the HTML5 specifications.
> >
> > I also appreciate this link
> > https://www.w3.org/WAI/tutorials/tables/one-header/ from Jon Avila.
> >
> > W3C does offer examples of not using the scope attribute in simple
> tables.
> >
> > Thank you all for your help!
> >
> > Leslie
> >
>