WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: help with complex table

for

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

From: Angela French
Date: Wed, Sep 27 2017 6:09PM
Subject: help with complex table
No previous message | Next message →

Hello, my co-worker and I are trying to build a complex table (the content will be database driven). Here is my sample page<https://www.sbctc.edu/_testing/complex-table.html>.
It will become more complex that what is currently here, but first things first.

I only have NVDA to test with. Although the table headers are marked scope="row", NVDA is not reading the adding the column name when it reads the value in the second column which are table cells.

My next question is how to associate Class #2 and Class #3 with the High School Classes header. I'm thinking I might be able to accomplish this with headers and id, but until I can get NVDA to at least associate the values in column two with the headers in column 1, I have tackled the bigger problem yet.

I also found it weird that NVDA reads the value of the first table header (College) when it gets down to the empty cells on column 1, rows 5 and 6.

Any advice greatly appreciated. This doesn't seem like it should be that tough. Maybe I don't know how to use NVDA, though I had no problem here: https://webaim.org/articles/nvda/tables.htm

Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Reinhard Stebner
Date: Wed, Sep 27 2017 7:17PM
Subject: Re: help with complex table
← Previous message | Next message →

First off, I think you're using the wrong syntax here. Try
scope = cop
Sent from my iPhone

> On Sep 27, 2017, at 8:09 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hello, my co-worker and I are trying to build a complex table (the content will be database driven). Here is my sample page<https://www.sbctc.edu/_testing/complex-table.html>.
> It will become more complex that what is currently here, but first things first.
>
> I only have NVDA to test with. Although the table headers are marked scope="row", NVDA is not reading the adding the column name when it reads the value in the second column which are table cells.
>
> My next question is how to associate Class #2 and Class #3 with the High School Classes header. I'm thinking I might be able to accomplish this with headers and id, but until I can get NVDA to at least associate the values in column two with the headers in column 1, I have tackled the bigger problem yet.
>
> I also found it weird that NVDA reads the value of the first table header (College) when it gets down to the empty cells on column 1, rows 5 and 6.
>
> Any advice greatly appreciated. This doesn't seem like it should be that tough. Maybe I don't know how to use NVDA, though I had no problem here: https://webaim.org/articles/nvda/tables.htm
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > >

From: Birkir R. Gunnarsson
Date: Wed, Sep 27 2017 7:24PM
Subject: Re: help with complex table
← Previous message | Next message →

The primary problem is the high school header.
It has to be coded as a <th> cell with scope="rowgroup" and
rowspan="3" (because it is the row header for 3 rows.
The following rows you only insert the <tr> and <td> tags.
My guess is that NVDA is looking for something to read for the <td>
cells in column one (there is nothing there). It finds a header cell
at the top (and decides that it is a column header even if it has
scope="row") and reads it.

How are you inspecting the table with NVDA?
Screen readers only read the header cells that change.
If you use ctrl-alt-right awwor to move from the first column to the
second, it won't read the row header, but if you use ctrl-alt-arrows
up and down to navigate through the second column it should read the
row headers along with the values (because the row headers are
changing).



On 9/27/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello, my co-worker and I are trying to build a complex table (the content
> will be database driven). Here is my sample
> page<https://www.sbctc.edu/_testing/complex-table.html>.
> It will become more complex that what is currently here, but first things
> first.
>
> I only have NVDA to test with. Although the table headers are marked
> scope="row", NVDA is not reading the adding the column name when it reads
> the value in the second column which are table cells.
>
> My next question is how to associate Class #2 and Class #3 with the High
> School Classes header. I'm thinking I might be able to accomplish this with
> headers and id, but until I can get NVDA to at least associate the values in
> column two with the headers in column 1, I have tackled the bigger problem
> yet.
>
> I also found it weird that NVDA reads the value of the first table header
> (College) when it gets down to the empty cells on column 1, rows 5 and 6.
>
> Any advice greatly appreciated. This doesn't seem like it should be that
> tough. Maybe I don't know how to use NVDA, though I had no problem here:
> https://webaim.org/articles/nvda/tables.htm
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >


--
Work hard. Have fun. Make history.

From: Angela French
Date: Thu, Sep 28 2017 10:13AM
Subject: Re: help with complex table
← Previous message | Next message →

Thanks for the help. I've got the first part of the table working nicely. Now I'm struggling with the next part. https://www.sbctc.edu/_testing/complex-table.html
Each College course now needs to have a number of credits associated with it in the table. I've done this by adding a third column just in the College Courses data. The colgroup is working nicely, but how do I associate the Credits column with the College course column? My new examples have two ways we thought of handling this, neither of which seems to read correctly (or maybe I just don't know how to use NVDA well enough)

Angela French (Greg's co-worker)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, September 27, 2017 6:24 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

The primary problem is the high school header.
It has to be coded as a <th> cell with scope="rowgroup" and rowspan="3" (because it is the row header for 3 rows.
The following rows you only insert the <tr> and <td> tags.
My guess is that NVDA is looking for something to read for the <td> cells in column one (there is nothing there). It finds a header cell at the top (and decides that it is a column header even if it has
scope="row") and reads it.

How are you inspecting the table with NVDA?
Screen readers only read the header cells that change.
If you use ctrl-alt-right awwor to move from the first column to the second, it won't read the row header, but if you use ctrl-alt-arrows up and down to navigate through the second column it should read the row headers along with the values (because the row headers are changing).



On 9/27/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello, my co-worker and I are trying to build a complex table (the
> content will be database driven). Here is my sample
> page<https://www.sbctc.edu/_testing/complex-table.html>.
> It will become more complex that what is currently here, but first
> things first.
>
> I only have NVDA to test with. Although the table headers are marked
> scope="row", NVDA is not reading the adding the column name when it
> reads the value in the second column which are table cells.
>
> My next question is how to associate Class #2 and Class #3 with the
> High School Classes header. I'm thinking I might be able to accomplish
> this with headers and id, but until I can get NVDA to at least
> associate the values in column two with the headers in column 1, I
> have tackled the bigger problem yet.
>
> I also found it weird that NVDA reads the value of the first table
> header
> (College) when it gets down to the empty cells on column 1, rows 5 and 6.
>
> Any advice greatly appreciated. This doesn't seem like it should be
> that tough. Maybe I don't know how to use NVDA, though I had no problem here:
> https://webaim.org/articles/nvda/tables.htm
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Beranek, Nicholas
Date: Thu, Sep 28 2017 10:24AM
Subject: Re: help with complex table
← Previous message | Next message →

Have you considered having the College Courses in a separate 2-way data table? "College Course" and "Credits" can be column headers in that case with each of the courses as row headers.

Another option I've considered is including what I just mentioned in the same table. Here is example code:

<tr>
<th scope="col">College Course</th>
<th scope="col">Credits</th>
</tr>
<tr>
<th scope="row">ACCT 110</th>
<td>5</td>
</tr>

The beauty of this technique is that is does not require the "headers" attribute or unique IDs for each header. Try it out!

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, September 28, 2017 12:14 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

Thanks for the help. I've got the first part of the table working nicely. Now I'm struggling with the next part. https://www.sbctc.edu/_testing/complex-table.html
Each College course now needs to have a number of credits associated with it in the table. I've done this by adding a third column just in the College Courses data. The colgroup is working nicely, but how do I associate the Credits column with the College course column? My new examples have two ways we thought of handling this, neither of which seems to read correctly (or maybe I just don't know how to use NVDA well enough)

Angela French (Greg's co-worker)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, September 27, 2017 6:24 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

The primary problem is the high school header.
It has to be coded as a <th> cell with scope="rowgroup" and rowspan="3" (because it is the row header for 3 rows.
The following rows you only insert the <tr> and <td> tags.
My guess is that NVDA is looking for something to read for the <td> cells in column one (there is nothing there). It finds a header cell at the top (and decides that it is a column header even if it has
scope="row") and reads it.

How are you inspecting the table with NVDA?
Screen readers only read the header cells that change.
If you use ctrl-alt-right awwor to move from the first column to the second, it won't read the row header, but if you use ctrl-alt-arrows up and down to navigate through the second column it should read the row headers along with the values (because the row headers are changing).



On 9/27/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello, my co-worker and I are trying to build a complex table (the
> content will be database driven). Here is my sample
> page<https://www.sbctc.edu/_testing/complex-table.html>.
> It will become more complex that what is currently here, but first
> things first.
>
> I only have NVDA to test with. Although the table headers are marked
> scope="row", NVDA is not reading the adding the column name when it
> reads the value in the second column which are table cells.
>
> My next question is how to associate Class #2 and Class #3 with the
> High School Classes header. I'm thinking I might be able to accomplish
> this with headers and id, but until I can get NVDA to at least
> associate the values in column two with the headers in column 1, I
> have tackled the bigger problem yet.
>
> I also found it weird that NVDA reads the value of the first table
> header
> (College) when it gets down to the empty cells on column 1, rows 5 and 6.
>
> Any advice greatly appreciated. This doesn't seem like it should be
> that tough. Maybe I don't know how to use NVDA, though I had no problem here:
> https://webaim.org/articles/nvda/tables.htm
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Angela French
Date: Thu, Sep 28 2017 10:47AM
Subject: Re: help with complex table
← Previous message | Next message →

I don't believe I've seen a two-way table before. Do you know of any examples on line? All I could find was articles referencing Excel.

Angela French

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Thursday, September 28, 2017 9:24 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

Have you considered having the College Courses in a separate 2-way data table? "College Course" and "Credits" can be column headers in that case with each of the courses as row headers.

Another option I've considered is including what I just mentioned in the same table. Here is example code:

<tr>
<th scope="col">College Course</th>
<th scope="col">Credits</th>
</tr>
<tr>
<th scope="row">ACCT 110</th>
<td>5</td>
</tr>

The beauty of this technique is that is does not require the "headers" attribute or unique IDs for each header. Try it out!

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, September 28, 2017 12:14 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

Thanks for the help. I've got the first part of the table working nicely. Now I'm struggling with the next part. https://www.sbctc.edu/_testing/complex-table.html
Each College course now needs to have a number of credits associated with it in the table. I've done this by adding a third column just in the College Courses data. The colgroup is working nicely, but how do I associate the Credits column with the College course column? My new examples have two ways we thought of handling this, neither of which seems to read correctly (or maybe I just don't know how to use NVDA well enough)

Angela French (Greg's co-worker)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, September 27, 2017 6:24 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

The primary problem is the high school header.
It has to be coded as a <th> cell with scope="rowgroup" and rowspan="3" (because it is the row header for 3 rows.
The following rows you only insert the <tr> and <td> tags.
My guess is that NVDA is looking for something to read for the <td> cells in column one (there is nothing there). It finds a header cell at the top (and decides that it is a column header even if it has
scope="row") and reads it.

How are you inspecting the table with NVDA?
Screen readers only read the header cells that change.
If you use ctrl-alt-right awwor to move from the first column to the second, it won't read the row header, but if you use ctrl-alt-arrows up and down to navigate through the second column it should read the row headers along with the values (because the row headers are changing).



On 9/27/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello, my co-worker and I are trying to build a complex table (the
> content will be database driven). Here is my sample
> page<https://www.sbctc.edu/_testing/complex-table.html>.
> It will become more complex that what is currently here, but first
> things first.
>
> I only have NVDA to test with. Although the table headers are marked
> scope="row", NVDA is not reading the adding the column name when it
> reads the value in the second column which are table cells.
>
> My next question is how to associate Class #2 and Class #3 with the
> High School Classes header. I'm thinking I might be able to accomplish
> this with headers and id, but until I can get NVDA to at least
> associate the values in column two with the headers in column 1, I
> have tackled the bigger problem yet.
>
> I also found it weird that NVDA reads the value of the first table
> header
> (College) when it gets down to the empty cells on column 1, rows 5 and 6.
>
> Any advice greatly appreciated. This doesn't seem like it should be
> that tough. Maybe I don't know how to use NVDA, though I had no problem here:
> https://webaim.org/articles/nvda/tables.htm
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Beranek, Nicholas
Date: Thu, Sep 28 2017 10:50AM
Subject: Re: help with complex table
← Previous message | Next message →

I apologize but maybe "two-way table" wasn't the right term... I mean a table that has both column and row headers.

-----Original Message-----
From: Angela French [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, September 28, 2017 12:48 PM
To: Beranek, Nicholas < = EMAIL ADDRESS REMOVED = >; WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: RE: [WebAIM] help with complex table

I don't believe I've seen a two-way table before. Do you know of any examples on line? All I could find was articles referencing Excel.

Angela French

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Thursday, September 28, 2017 9:24 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

Have you considered having the College Courses in a separate 2-way data table? "College Course" and "Credits" can be column headers in that case with each of the courses as row headers.

Another option I've considered is including what I just mentioned in the same table. Here is example code:

<tr>
<th scope="col">College Course</th>
<th scope="col">Credits</th>
</tr>
<tr>
<th scope="row">ACCT 110</th>
<td>5</td>
</tr>

The beauty of this technique is that is does not require the "headers" attribute or unique IDs for each header. Try it out!

Nick Beranek
Capital One

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Angela French
Date: Thu, Sep 28 2017 4:09PM
Subject: Re: help with complex table
← Previous message | Next message →

Could anyone test the latest rendition of my complex table using Jaws? I can't get it to announce according to my expectations when using NVDA with either IE, Firefox, or Chrome. This may be user error?
https://www.sbctc.edu/_testing/complex-table.html

AngelA French

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Thursday, September 28, 2017 9:24 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

Have you considered having the College Courses in a separate 2-way data table? "College Course" and "Credits" can be column headers in that case with each of the courses as row headers.

Another option I've considered is including what I just mentioned in the same table. Here is example code:

<tr>
<th scope="col">College Course</th>
<th scope="col">Credits</th>
</tr>
<tr>
<th scope="row">ACCT 110</th>
<td>5</td>
</tr>

The beauty of this technique is that is does not require the "headers" attribute or unique IDs for each header. Try it out!

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, September 28, 2017 12:14 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

Thanks for the help. I've got the first part of the table working nicely. Now I'm struggling with the next part. https://www.sbctc.edu/_testing/complex-table.html
Each College course now needs to have a number of credits associated with it in the table. I've done this by adding a third column just in the College Courses data. The colgroup is working nicely, but how do I associate the Credits column with the College course column? My new examples have two ways we thought of handling this, neither of which seems to read correctly (or maybe I just don't know how to use NVDA well enough)

Angela French (Greg's co-worker)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, September 27, 2017 6:24 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with complex table

The primary problem is the high school header.
It has to be coded as a <th> cell with scope="rowgroup" and rowspan="3" (because it is the row header for 3 rows.
The following rows you only insert the <tr> and <td> tags.
My guess is that NVDA is looking for something to read for the <td> cells in column one (there is nothing there). It finds a header cell at the top (and decides that it is a column header even if it has
scope="row") and reads it.

How are you inspecting the table with NVDA?
Screen readers only read the header cells that change.
If you use ctrl-alt-right awwor to move from the first column to the second, it won't read the row header, but if you use ctrl-alt-arrows up and down to navigate through the second column it should read the row headers along with the values (because the row headers are changing).



On 9/27/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello, my co-worker and I are trying to build a complex table (the
> content will be database driven). Here is my sample
> page<https://www.sbctc.edu/_testing/complex-table.html>.
> It will become more complex that what is currently here, but first
> things first.
>
> I only have NVDA to test with. Although the table headers are marked
> scope="row", NVDA is not reading the adding the column name when it
> reads the value in the second column which are table cells.
>
> My next question is how to associate Class #2 and Class #3 with the
> High School Classes header. I'm thinking I might be able to accomplish
> this with headers and id, but until I can get NVDA to at least
> associate the values in column two with the headers in column 1, I
> have tackled the bigger problem yet.
>
> I also found it weird that NVDA reads the value of the first table
> header
> (College) when it gets down to the empty cells on column 1, rows 5 and 6.
>
> Any advice greatly appreciated. This doesn't seem like it should be
> that tough. Maybe I don't know how to use NVDA, though I had no problem here:
> https://webaim.org/articles/nvda/tables.htm
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Bourne, Sarah (MASSIT)
Date: Fri, Sep 29 2017 6:21AM
Subject: Re: help with complex table
← Previous message | Next message →

The SCOPE method won't work reliably with a tables that don't have a strict horizontal or vertical association. By setting the SCOPE to col(umn), it should actually be reading it in front of the cells above it, too, which would not be desirable. The first thing I would try is making it two separate tables, or some other simplification approach. Otherwise, you'll need to use the HEADER/ID method, where each TH is assigned a unique ID, and each TD has a HEADERS attribute with the correct IDs as values.

sb
Sarah E. Bourne
Director of IT Accessibility
1 Ashburton Place, 8th Floor, Boston, MA 02108
Office: (617) 626-4502
= EMAIL ADDRESS REMOVED = | www.mass.gov/eotss
Executive Office of Technology Services and Security (EOTSS)
EOTSS provides secure and quality digital information, services, and tools
to constituents and service providers when and where they need them.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Thursday, September 28, 2017 6:09 PM
To: Beranek, Nicholas; WebAIM Discussion List
Subject: Re: [WebAIM] help with complex table

Could anyone test the latest rendition of my complex table using Jaws? I can't get it to announce according to my expectations when using NVDA with either IE, Firefox, or Chrome. This may be user error?

https://urldefense.proofpoint.com/v2/url?u=https-3A__www.sbctc.edu_-5Ftesting_complex-2Dtable.html&d=DwIGaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=rhLenV33VPpmkT7iP0-OkUlRYw9YWn3HMLHZVP2q9y8&moJAJCRkOEnJ2y269pDm0uU8VtfplAReXO8B2czShJo&s=QHSuO3dXX2DJudDszWivHFq328_5la7e7gnh3P0pOd0&e


AngelA French



-----Original Message-----

From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum

Sent: Thursday, September 28, 2017 9:24 AM

To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >

Subject: Re: [WebAIM] help with complex table



Have you considered having the College Courses in a separate 2-way data table? "College Course" and "Credits" can be column headers in that case with each of the courses as row headers.



Another option I've considered is including what I just mentioned in the same table. Here is example code:



<tr>

<th scope="col">College Course</th>

<th scope="col">Credits</th>

</tr>

<tr>

<th scope="row">ACCT 110</th>

<td>5</td>

</tr>



The beauty of this technique is that is does not require the "headers" attribute or unique IDs for each header. Try it out!



Nick Beranek

Capital One



-----Original Message-----

From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French

Sent: Thursday, September 28, 2017 12:14 PM

To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >

Subject: Re: [WebAIM] help with complex table



Thanks for the help. I've got the first part of the table working nicely. Now I'm struggling with the next part. https://urldefense.proofpoint.com/v2/url?u=https-3A__www.sbctc.edu_-5Ftesting_complex-2Dtable.html&d=DwIGaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=rhLenV33VPpmkT7iP0-OkUlRYw9YWn3HMLHZVP2q9y8&moJAJCRkOEnJ2y269pDm0uU8VtfplAReXO8B2czShJo&s=QHSuO3dXX2DJudDszWivHFq328_5la7e7gnh3P0pOd0&e
Each College course now needs to have a number of credits associated with it in the table. I've done this by adding a third column just in the College Courses data. The colgroup is working nicely, but how do I associate the Credits column with the College course column? My new examples have two ways we thought of handling this, neither of which seems to read correctly (or maybe I just don't know how to use NVDA well enough)



Angela French (Greg's co-worker)



-----Original Message-----

From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson

Sent: Wednesday, September 27, 2017 6:24 PM

To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >

Subject: Re: [WebAIM] help with complex table



The primary problem is the high school header.

It has to be coded as a <th> cell with scope="rowgroup" and rowspan="3" (because it is the row header for 3 rows.

The following rows you only insert the <tr> and <td> tags.

My guess is that NVDA is looking for something to read for the <td> cells in column one (there is nothing there). It finds a header cell at the top (and decides that it is a column header even if it has

scope="row") and reads it.



How are you inspecting the table with NVDA?

Screen readers only read the header cells that change.

If you use ctrl-alt-right awwor to move from the first column to the second, it won't read the row header, but if you use ctrl-alt-arrows up and down to navigate through the second column it should read the row headers along with the values (because the row headers are changing).







On 9/27/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

> Hello, my co-worker and I are trying to build a complex table (the

> content will be database driven). Here is my sample

> page<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.sbctc.edu_-5Ftesting_complex-2Dtable.html&d=DwIGaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=rhLenV33VPpmkT7iP0-OkUlRYw9YWn3HMLHZVP2q9y8&moJAJCRkOEnJ2y269pDm0uU8VtfplAReXO8B2czShJo&s=QHSuO3dXX2DJudDszWivHFq328_5la7e7gnh3P0pOd0&e= >.

> It will become more complex that what is currently here, but first

> things first.

>

> I only have NVDA to test with. Although the table headers are marked

> scope="row", NVDA is not reading the adding the column name when it

> reads the value in the second column which are table cells.

>

> My next question is how to associate Class #2 and Class #3 with the

> High School Classes header. I'm thinking I might be able to accomplish

> this with headers and id, but until I can get NVDA to at least

> associate the values in column two with the headers in column 1, I

> have tackled the bigger problem yet.

>

> I also found it weird that NVDA reads the value of the first table

> header

> (College) when it gets down to the empty cells on column 1, rows 5 and 6.

>

> Any advice greatly appreciated. This doesn't seem like it should be

> that tough. Maybe I don't know how to use NVDA, though I had no problem here:

> https://urldefense.proofpoint.com/v2/url?u=https-3A__webaim.org_articles_nvda_tables.htm&d=DwIGaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=rhLenV33VPpmkT7iP0-OkUlRYw9YWn3HMLHZVP2q9y8&moJAJCRkOEnJ2y269pDm0uU8VtfplAReXO8B2czShJo&s=rDyrvfTfb9LTi2qjBBf3vdn3efGvlEbXulgKgywKRvg&e
>

> Angela French

> Internet/Intranet Specialist

> Washington State Board for Community and Technical Colleges

> 360-704-4316

> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

> www.sbctc.edu<;https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbctc.edu_&d=DwIGaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=rhLenV33VPpmkT7iP0-OkUlRYw9YWn3HMLHZVP2q9y8&moJAJCRkOEnJ2y269pDm0uU8VtfplAReXO8B2czShJo&s=UpL8p_2X21bMrMsqNPeQtI-nIy2m0eI7oSte23lqhXI&e= >




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Beranek, Nicholas
Date: Fri, Sep 29 2017 7:38AM
Subject: Re: help with complex table
← Previous message | Next message →

I cannot reproduce your experience. In NVDA 2017.3 and FF 55, your column/row headers are reading as intended. Keep in mind that NVDA will only announce the column or row header once after you enter a new column or row using the table navigation shortcuts (Control + Alt + Arrow keys). The idea is that once I'm in a column, I won't need to hear the header more than once because I already know which column I am in.

If you still feel like it doesn't work to your liking, then try the separate table or the headers/id approach.

Nick Beranek
Capital One

-----Original Message-----
From: Angela French [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, September 28, 2017 6:09 PM
To: Beranek, Nicholas < = EMAIL ADDRESS REMOVED = >; WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: RE: [WebAIM] help with complex table

Could anyone test the latest rendition of my complex table using Jaws? I can't get it to announce according to my expectations when using NVDA with either IE, Firefox, or Chrome. This may be user error?
https://www.sbctc.edu/_testing/complex-table.html

AngelA French

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Birkir R. Gunnarsson
Date: Sun, Oct 01 2017 9:04AM
Subject: Re: help with complex table
← Previous message | No next message

Angela

I think you are trying to do too much with this table basically.
There may be some benefits in flipping the table around (use column
headers instead of row headers), and have some column headers span
multiple columns, but if you don't know in advance how many columns
each header spans or if different headers span different number of
columns, it is very hard to create a consistent table out of it and a
better solution would be to split the table in two.

And, as already said, you can use the headers/id method to force the
header association for individual cells (make sure to use the HTML5
definition, you can only associate with <th> cells).


On 9/29/17, Beranek, Nicholas via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
> I cannot reproduce your experience. In NVDA 2017.3 and FF 55, your
> column/row headers are reading as intended. Keep in mind that NVDA will only
> announce the column or row header once after you enter a new column or row
> using the table navigation shortcuts (Control + Alt + Arrow keys). The idea
> is that once I'm in a column, I won't need to hear the header more than once
> because I already know which column I am in.
>
> If you still feel like it doesn't work to your liking, then try the separate
> table or the headers/id approach.
>
> Nick Beranek
> Capital One
>
> -----Original Message-----
> From: Angela French [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Thursday, September 28, 2017 6:09 PM
> To: Beranek, Nicholas < = EMAIL ADDRESS REMOVED = >; WebAIM Discussion
> List < = EMAIL ADDRESS REMOVED = >
> Subject: RE: [WebAIM] help with complex table
>
> Could anyone test the latest rendition of my complex table using Jaws? I
> can't get it to announce according to my expectations when using NVDA with
> either IE, Firefox, or Chrome. This may be user error?
> https://www.sbctc.edu/_testing/complex-table.html
>
> AngelA French
> >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >


--
Work hard. Have fun. Make history.