WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: help with complex table

for

From: Bourne, Sarah (MASSIT)
Date: Sep 29, 2017 6:21AM

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 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 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 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://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 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://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 REMOVED> <mailto: <EMAIL 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.