Caseflow: Table used for layout in case timeline

[alisan16]

A layout table is used to indicate if a specific task has been completed. This table is used to visually stylize information and should not be coded as a table for assistive technology users. (New: 08/21/2019)

Suggested fix: Make sure layout table doesn't have data table markup: https://webaim.org/techniques/tables/

[yoomlam]

@alisan16
I'm trying to identify the problem using http://www.caseflowdemo.com/queue/appeals/0a5e7042-537c-4f68-949c-7a855cde302e.

I see no caption or th markups for the Case Timeline as instructed here:

it's vital that data table markup, such as <caption>, <th>, etc. are NEVER used within layout tables

Not sure what other "data table markup" to look for. The td markups are necessary for separating table cells.

VoiceOver reads the table contents in the correct order.

[alisan16]

@carodew Can you follow up with Section 508 about this issue? If the contents of the Case Timeline section are being read in the wrong order by JAWS, we may need to remove the < table > markup and use a different styling technique, but according to @yoomlam above, the contents are being read in the correct order with VoiceOver.

[carodew]

I suspect that this is primarily a semantic HTML thing, in that table mark up is used for non-tabular information, but I'm happy to double check.

[yoomlam]

@carodew Some background to help make our case: The WebAIM and https://accessibility.umn.edu/tutorials/data-vs-layout-tables state that it is okay to use table markups as long as ATs can navigate and read/interpret/convey the content. In this case, VoiceOver is reading the table contents in sensible order.

We could probably do better but I'm going for low-hanging fruit and taking the least-resistance path.

[carodew]

Yeah, I think they tested with JAWS, so there might be a difference. I can ask the Section 508 office is they can provide us both with JAWS on any GFE (as far as I'm aware only LP has one) and/or JAWS training.

[carodew]

@yoomlam @alisan16 – we can open a support ticket to have someone help us figure out how to navigate this table with JAWS, I just added general instructions on how to do that here: https://github.com/department-of-veterans-affairs/appeals-team/blob/master/caseflow-team/0-how-we-work/accessibility.md#resources-and-support

@yoomlam if you want, we can find a time to submit the ticket together since I have more detailed notes on how to do this, but they're kind of all over the place and I would need to step through the process anyway to clean up those notes.

[yoomlam]

@carodew Sure, we can submit the ticket together. Want to create a Google calendar event for this?

@yoomlam if you want, we can find a time to submit the ticket together since I have more detailed notes on how to do this, but they're kind of all over the place and I would need to step through the process anyway to clean up those notes.

[carodew]

Update – @yoomlam and I discovered that we have access to JAWS via Citrix Gateway, so we tested the case timeline on the remote desktop in caseflow demo. In our test, JAWS read the content in the correct order and didn't announce that it was a table. Aka, we were not able to reproduce the defect. I'll follow up with the Section 508 office and make the case that this should not be considered a defect and if they disagree, we'll ask for more clarification.

[carodew]

The Section 508 office sent me the specific WCAG criterion related to this issue: https://www.w3.org/TR/WCAG20-TECHS/F46.html

Reading this, I think we can consider this not a defect. I recommend we close this issue and if the Section 508 Office disagrees we can always reinvestigate.

[yoomlam]

I agree. There is no th, summary, or caption elements for the table in question.

a failure that occurs when a table used only for layout includes either th elements, a summary attribute, or a caption element. This is a failure because it uses structural (or semantic) markup only for presentation.

[alisan16]

Closing issue per conversation above

[araposo-tistatech]

Re-opening as the latest audit has found this issue is not resolved:

"Note 1, Defect 1: Information, structure and relationships conveyed through presentation cannot be understood.

• The following occur when viewing a case:
  
  
  
  • A layout table is used to indicate if a specific task has been completed. This table is used to visually stylize information and should not be coded as a table for assistive technology users. (Not Resolved: 12/13/2019) Items are still listed in a table, if you have a table there has to be a header listed. (Not Resolved 3/26/2020)"
  
  

[hschallhorn]

@jimruggiero and @chandracarney we specifically recieved the following from the 508 office

The Section 508 office sent me the specific WCAG criterion related to this issue: https://www.w3.org/TR/WCAG20-TECHS/F46.html

The objective of this technique is to describe a failure that occurs when a table used only for layout includes either th elements, a summary attribute, or a caption element. This is a failure because it uses structural (or semantic) markup only for presentation. The intent of the HTML and XHTML table elements is to present data.

Although not commonly used in a layout table, the following structural markup would also be failures of Success Criterion 1.3.1 if used in a layout table:

• headers attributes

This (tables should not have headers if the table is only used for layout) directly conflicts with the response from the audit ("Items are still listed in a table, if you have a table there has to be a header listed")

I'm unsure how to proceed here. If we add a header, we will get pinged with F46 as a defect.

[jimruggiero]

@hschallhorn Thank you for raising this. I just sent a note to Linsey in the 508 office asking for clarification and next steps guidance on this one. I'll let you know when I hear back!

[chandracarney]

Hey @hschallhorn we got a long response from Linsey, I'll pull some quotes. I think it boils down to what we're trying to accomplish with the table: layout vs. data table.

There are two types of table, a “layout table” and a “data table”. If you use a “layout table” you cannot use headers as in the success criterial F26... So if you use a “layout table” you cannot use headers and scope.

If you are using a layout table you must have a summary attribute that contains “layout table” <table summary="layout table">. That tells JAWS, hey this is not a real table it is just for layout purposes and it will not read as a table.

If I remember right JAWS was still saying “table” so [we'd be] looking for header, if JAWS is reading it as a table then the table summary=layout table might not be set. JAWS should not read a layout table as a table if it is coded correctly, so if I hear “table” and you meant it to be a layout table with no headers then it is not coded as a layout table.

[hschallhorn]

Perfect, thank you so much for the insight!