WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: help with complex table

for

From: Angela French
Date: Sep 28, 2017 10:47AM

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 REMOVED> ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Thursday, September 28, 2017 9:24 AM
To: WebAIM Discussion List < <EMAIL 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 REMOVED> ] On Behalf Of Angela French
Sent: Thursday, September 28, 2017 12:14 PM
To: WebAIM Discussion List < <EMAIL 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 REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, September 27, 2017 6:24 PM
To: WebAIM Discussion List < <EMAIL 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 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 REMOVED> <mailto: <EMAIL 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.