Easy Way to Add scope="col" and scope="row" in Tables?

[Mishou6779]

Hi Flare Community!

I am a lone writer with a now 1,900+ file HTML5 help project. Many of the files contain simple two-column tables for field and button definitions, where the left column contains the field or button names and the right column contains the definitions of each.

I have been told that I have to add scope="col" and scope="row" on every table, to make it Section 508 compliant. Even after checking the W3C I am still not entirely clear as to how to add that to my tables in order to make them compliant.

Looking for suggestions on how to solve this problem. (Even if it means just ditching the tables and using a different method.)

Thank you!
Michelle

[doc_guy]

Short answer is that Flare doens't have this functionality by default.

We haven't addressed this issue specifically in our project, but we will need to, eventually.

Remember that there is a difference between 508, the US Government requirement that products procured for the Government must be accessible for people with disabilities, and the WAG criteria, which are the standards most organizations use to determine if they are in compliance with the section 508 requirement. The distinction is that 508 doesn't get specific enough to tell you what you need to do to comply. So, for those who create web content, we follow the WAG criteria.

The WAG criteria has three levels of compliance, A, AA, and AAA. The more As the more compliant you are with the spec.

In this case, we're looking at this site: https://www.w3.org/WAI/WCAG21/Techniques/html/H63.html to show us what is required for tables.

We get around it currently because we use simple tables that are defined with the <thead> element. From the linked page:

NOTE: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.

If we ever get dinged for having tables that are too complex, we'll have to take two approaches:

1. For new content, use a snippet with a table in it, and when you insert the snippet, break the link to the snippet. That table will already have the proper scopes in the code. This isn't great because you need a scope for each row and each column, so if you need more rows or columns than are in the snippet, then you still have to manually add the scope.

2. We're looking at the feasibility of using a jQuery script that will look for the first row in a table and add the correct scope, and then looking for the first column in each <tr> element and adding the appropriate scope. This would happen in the browser when the page loads, so it would take care of the hundreds of tables already in our content. For all I know there may be a jQuery plugin that already does this.

Finally, please log this as a bug with MadCap (or as a feature request; I'm sure they'll see it as a feature request, not a bug--but that's a subjective judgement). The more people we get asking for accessibility enhancements, the better chance of getting them in the product, which would render these types of workarounds moot.

[Mishou6779]

Wow, I can totally see why you are Propellus Maximus! What a brilliant and thorough answer! Thank you, so very much.

I am ashamed to say that I didn't even know about WAG, so thank you! I've been on the W3C website so often I was worried they'd put a restraining order out on me.

In between the day when I wrote my original post and today, I've devised a way that I think will work. It's not 100 percent easy, but it's a livable halfway point. My approach is as follows:

1. The column headings are unique to themselves (hope that makes sense) and consistent. So I can use find/replace to add scope="col" for column headings. I've tested this and it worked well. Have not yet done this on the entire project.
2. The rows fix is more manual labor. I select all of the rows in the leftmost column and then apply the th style.

I haven't dug in yet to see where that fits in the WAG criteria. Hopefully at least an A. I will aim for AAA later.

Now my new fun today is that Flare won't let me type in the fields in the CSS. Honestly. Beginning to feel like I'm totally over it.

Also, I will definitely submit a bug report. No trouble at all being noisy!

Thanks again for the knowledgeable reply, and just for replying in general. It's nice to know I'm not the only one working hard to make online help better for those of us who must use assistive technology.

[trent the thief]

@mishu6779,

You might consider using a good text editor that has a search and replace in files. Everything you'll need to change is only text, so it's way easier than opening files in Flare.

I've used TextPad to good effect when confronted with a similar issue.

[Mishou6779]

@trent the thief,

Thank you for the reply! I have tried to use Notepad ++ to edit files outside of Flare (while Flare was closed), but an error displayed the next time I opened Flare. I was editing the CSS though, not text in files, so maybe that was why Flare was unhappy? My project is bound with SVN, so that could also be why it was unhappy.

I'm pretty much self-taught with HTML, so am not confident I edit the code correctly. I did check the W3C but am not sure I am putting the scope="col" in the right place. So, is it correct to add the scope=col right after the "th" on the table row in the HTML? Like this:

[th scope="col" class="TableStyle-BlueHeader-HeadE-Column1-Header1"]Field[/th]

I have not done the scope="col" yet with find/replace, I am still doing it manually.

Also, I'm having another problem now with my published output where it's bloated to seven times its normal size. This occurred after the following changes:

1. I added scope="col" to several tables in several files
2. I added one new help page with several new images
3. I had a support call with MadCap and they moved my project one layer deeper on my C: drive

I don't think adding scope="col" would cause such a published output size expansion though, would it?