Archived

508 Table Help

December 22, 2017 12:00 AM

I have a client that wants these tables in the course (see sample attached).

I have added the top and the left columns as Headers, but they are saving the data cells need to be associated with the two sets of heads and to do that I will need to add Scope Code for both columns and rows. Here is the link they sent me https://webaim.org/techniques/tables/data

I have been using Lectora for many, many years, but am relatively new to 508 and not sure about this.

Could someone offer me a “Christmas Miracle” and explain this to me?

Thanks!

Chris

undefined

Discussion (9)

@jasonadal December 26, 2017 12:00 AM

It looks like an issue with the Lectora HTML5 output for the table from what I can see. I looked at the source for the table cells and it's not adding the th scope tag to the table, which defines the columns and rows. Without the "scope" attribute, it's only going to read the text as "column # - value".

I found a jquery solution that perhaps @timk or @klaatu or @mnottermans could help with more, but at the most basic level, the attribute has to be added to the table. Lectora's output looks like this:

Wish I had a full solution, though hopefully this gets you going in the right direction.

@Chris Paxton Author December 29, 2017 12:00 AM

Thank you Jason! Next questions...how do I go about adding this into Lectora? I'm not sure how to see the code side (except in debug) and that won't let me edit.

@Chris Paxton Author January 3, 2018 12:00 AM

Any more ideas? I added the jquery and this is what the "Trusted Tester" is getting in Chrome & IE. They said it looks like there is another table that is displaying behind and to the upper left of the original table.

@timk January 4, 2018 12:00 AM

My knowledge about 508 compliance is small. I hope I understood correctly what Jason suggests:

I've added an action to the textfield with the table on page 2 "Stakeholder Roles within the Procurement Process". It uses jQuery to add scope=undefined to the first cell in each row apart from the first row.

Hm, is this what is supposed to happen?

@Chris Paxton Author January 4, 2018 12:00 AM

Wow...we (as it is more you guys than me) are so close!!!! It is now showing a second set of header, but it is showing the horizontal column, rather than the vertical column. The light grey information is what should be the 2nd header...so how would I adjust the current code AND WHERE do I learn about jQuery????

@timk January 5, 2018 12:00 AM

Here's another version that should allocate the attributes correctly, and a screenshot of the html code of the published table.

@Chris Paxton Author January 5, 2018 12:00 AM

THANK YOU, THANK YOU, THANK YOU!!! @timk I sooo owe you a beer or two (or dinner!) at the next LUC!!! This looks like it works! When I copied and checked in on my end, I started the happy dance (which always makes my hubby laugh as I get so excited)!!! I definitely need to learn jQuery!!!!

@Chris Paxton Author January 5, 2018 12:00 AM

Just an update...here is how the table needs to look from a 508 perspective. The client made adjusts into the html file. Is there at way to make these adjustments in Lectora?

@timk January 8, 2018 12:00 AM

You're welcome. I've been collection beer invitations for a while. I'll come to the LUC when the list is long enough ... ;-)

Discussions have been disabled for this post

508 Table Help

Discussion (9)

Chris Paxton McMillin

More From Chris

508 Table Help

Discussion (9)

Chris Paxton McMillin

More From Chris

Join The Discussion