Improve table semantics by adding scope or headers/id attributes to theme_table()

Adding scope="col" has got to be redundant when looking at a TD that's nicely wrapped in a THEAD.

Can we reliably add scope="row" to the first column of all of the TBODY rows? Not sure that is adding much either. Although it is used in the example - http://www.access-board.gov/sec508/guide/1194.22.htm

ARIA added as per:
http://www.w3.org/WAI/PF/aria/roles#columnheader

Not sure that the complex tables described in the Webaim article can be done without a customized theme_table().

I thought we'd discussed tying the TBODY cell to a header id but can't see a requirement for that now.

I noticed the patch in #1 wasn't included.

Like the changes you made for rows, tried to apply it to my local git repo and it failed. So I re-rolled it (with #1 included).

To add the following to the output:

<tr class="odd">
   <td  scope="col" role="columnheader">1</td>
   <td scope="row" role="rowheader" scope="col" role="columnheader">user1</td>
   <td  scope="col" role="columnheader">18</td>
   <td  scope="col" role="columnheader">Male</td>
</tr>

I also added the ARIA role "rowheader" - https://wiki.mozilla.org/Accessibility/TableHeaders & http://www.w3.org/TR/wai-aria/roles

Good question.. Less is almost always better, but I'll try to get some feedback on this.

I asked Paul Jackson and got the following:

"Are you looking for feedback on the use of WAI-ARIA on tables? If so, I agree with BarisW that we should avoid using ARIA to enforce existing semantics as it doesn't add anything and would make file sizes bigger (to the detriment of mobile). I only use WAI-ARIA to override the defaults for a semantic element or to add semantics where it doesn't already exist. In the case of a regulat table, I wouldn't use table WAI-ARIA but would if I'm trying to emulate a table using divs and CSS."

This approach makes sense to me. I'll re-roll the patch.

#13: semantic-tables-1645308-13.patch queued for re-testing.

There's been a lot of discussion in Views about table attributes #864006: Improve table semantics by adding scope or headers/id attributes.

In the end though I don't see how we can do much more than add the scope="col" attribute to the table element.

For validation for accessibility guidelines this is very useful.

The scope attribute is only valid for the TH attribute, so I've adjusted the HTML accordingly. I don't see any way to add <th scope="row"> in D7 or D8. You'd need to have some way of specifying which column includes header information as far as I see it.

Feedback on this simpler patch would be appreciated (and the Views table issue).

woops. forgot to attach the patch.

Hopefully this patch does it.

There's still a discussions about how to address the rows to add the scope. Paul Jackson suggested:
"Maybe a reasonable solution would be to have an option to make the first cell in each secondary row into a TH. It would be set at the table level to save the user time (so don't have to manually add for each row)."

However, I think that might be best to take on as a separate issue.

Ok, I got Paul's suggestion working, but it does look kinda silly. The TH is formatted like a header when most of the time we wouldn't want it to be.

I guess there could be some work arounds for this via css... Also digging into the table code I can see that you can really make more complicated tables here. However, not sure how many are used in core. Most in core are pretty simple, with the most complicated thing being some colspans here/there.

This will help meet Section 508 guidelines as well as WCAG 2.0AA.

Also, wanted to change the name to indicate that there are two recommended ways to associate the data cells with the appropriate headers as per http://webaim.org/techniques/tables/data/#id

It got depreciated in HTML5. The thread in Views got interesting about here:
https://drupal.org/node/864006#comment-6457058

With D7 one could still add a TD based scope attribute, but that's not an option for D8. At least not at this point.

Re-rolling the patch to keep up with Core.

I'm coming to conclude that something in simpletest doesn't like scope="col" being added to a header:

I went here:

    // Test the table header.
    $elements = $this->xpath('//div[@id="content"]//table/thead/tr/th');
    $this->assertEqual(count($elements), 4, 'Correct number of table header cells found.');

Looked at the results locally. Adjusted the number of columns based on the test from 3 to 4. This is still giving me grief.

What's the best way to count the headers if xpath is failing me?

Marking this as a duplicate of #864006: Improve table semantics by adding scope or headers/id attributes

adding relationship to another issue.

That issue ultimately was tied to just Views tables, so... Reopening this one looking at theme_table().

What happened to the function theme_table()? There are certainly still references in the comments.

Closest I could find was function template_preprocess_table().

This should follow the same approach as what we implemented in Views, so using Headers & ID's.

Another good one to sprint on over the weekend.

Wrong name...

Starting the update, but it still needs more work. Having to step away though.

theme_table() no longer exists in D8 so I am going to close this issue.