WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: help with complex table

for

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

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/>;
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.