December 22, 2017 at 3:52 pm #380699
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?
- This topic was modified 1 year, 10 months ago by Chrisanna (Chris) Paxton McMillin.
Attachments:December 26, 2017 at 9:58 am #380744
Jason DalrympleMember45 pts@JasonADal
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:
<th style=”width:136px;height:59px; border-style:solid;border-left-color:#a3bae0;border-left-width:1px;border-right-color:#a3bae0;border-right-width:1px;border-top-color:#a3bae0; border-top-width:1px;border-bottom-color:#a3bae0; border-bottom-width:1px;padding-left:6px;padding-right:6px;padding-bottom:0px;padding-top:0px;background-color:#000000;vertical-align:middle;”>
<p leglh=”1.127″ style=”margin-left:0px;text-indent:0px;line-height:1.080;margin-top:0px;margin-bottom:0px;text-align:center;”>
<span class=”text255606Font2″>Contracting Officer’s Representative</span></p>
Wish I had a full solution, though hopefully this gets you going in the right direction.This post has received 1 vote up.December 29, 2017 at 11:22 am #380946
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.January 3, 2018 at 3:19 pm #381395
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.
Attachments:January 4, 2018 at 5:56 am #381450
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="col"to each cell in the first row. It also adds
scope="row"to the first cell in each row apart from the first row.
Hm, is this what is supposed to happen?This post has received 1 vote up.
Attachments:January 4, 2018 at 11:38 am #381490
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????
Attachments:January 5, 2018 at 12:17 pm #381611
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?
Attachments:January 5, 2018 at 3:36 pm #381640
Here’s another version that should allocate the attributes correctly, and a screenshot of the html code of the published table.
Attachments:January 5, 2018 at 5:19 pm #381647
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!!!!January 8, 2018 at 2:59 pm #381759
You’re welcome. I’ve been collection beer invitations for a while. I’ll come to the LUC when the list is long enough … 😉
You must be logged in to reply to this topic.