508 Table Help

Chris Paxton
Chris Paxton Community Member Posts: 108 ☆ Superstar ☆
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

 
Chris Paxton McMillin, D3 Training Solutions
[email protected]
www.d3trainingsolutions.com

Comments

  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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>

    </th>
    Wish I had a full solution, though hopefully this gets you going in the right direction.
  • Chris Paxton
    Chris Paxton Community Member Posts: 108 ☆ Superstar ☆
    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 McMillin, D3 Training Solutions
    [email protected]
    www.d3trainingsolutions.com
  • Chris Paxton
    Chris Paxton Community Member Posts: 108 ☆ Superstar ☆
    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.
    Chris Paxton McMillin, D3 Training Solutions
    [email protected]
    www.d3trainingsolutions.com
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    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?
  • Chris Paxton
    Chris Paxton Community Member Posts: 108 ☆ Superstar ☆
    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????
    Chris Paxton McMillin, D3 Training Solutions
    [email protected]
    www.d3trainingsolutions.com
  • Chris Paxton
    Chris Paxton Community Member Posts: 108 ☆ Superstar ☆
    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?
    Chris Paxton McMillin, D3 Training Solutions
    [email protected]
    www.d3trainingsolutions.com
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    Here's another version that should allocate the attributes correctly, and a screenshot of the html code of the published table.
  • Chris Paxton
    Chris Paxton Community Member Posts: 108 ☆ Superstar ☆
    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 McMillin, D3 Training Solutions
    [email protected]
    www.d3trainingsolutions.com
  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    You're welcome. I've been collection beer invitations for a while. I'll come to the LUC when the list is long enough ... ;-)