E-mail List Archives
Thread: help with complex table
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)
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
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
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.
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
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.
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
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
>
>