0

I need to create 508-compliant code and am running into an issue with a table that does not have headers. Each row simply contains a category name in the left column, and value in the right column. So I guess my initial question is - is this a data table? Should it be represented in a different way instead, like a list? If it is a valid data table, must I invent a header name for each column? The information is in a particular format that has never had column headers, so I'm not even sure the client will want these, but I'm wondering if I need to tell them they must be there in order to be strictly 508-compliant? Finally, is there a way that I could make these headers accessible to those using, say, a screen reader, but invisible to normal viewers?

Levi Wallach
  • 369
  • 5
  • 17
  • Sounds like if it's a table, your "header" is actually your left column--not sure how to get that visual with standard markup for a table with a header, though. I thought you might try a definition list, but that doesn't feel quite right for what you're describing, either. – Brian Warshaw May 04 '12 at 18:58
  • @Brian, ah, I'd not thought of either. No, it's not really a definition list, but yeah, if I could style the headers to be only on the first column all the way down, that would solve it. But I've never heard of that being done, although it seems like it should be an option... – Levi Wallach May 04 '12 at 19:33
  • 1
    Have you thought of perhaps using some unobtrusive javascript to sniff out the screen reader and do some DOM replacement? For the sight-impaired user, it might make sense to remove the existing table and replace it with one that has a header with the values from the left column. Not gorgeous, but it would be semantically correct for the screen reader, while still visually correct for your other users. – Brian Warshaw May 04 '12 at 19:36
  • Thanks, I guess that's an option if the client does not want to view the headers... – Levi Wallach May 04 '12 at 19:45
  • Sure, no problem. And actually, if you *do* go with that solution, do it the opposite way from what I said before--send the table with header to the browser, and then manipulate it for viewing--it's more likely that your JAWS user has scripts disabled than it is that your other users do. – Brian Warshaw May 04 '12 at 19:52

2 Answers2

2

Yes, it is a data table—of very simple structure, but still. Representing it as a dl is a possibility, but would raise various formatting issues and could be less accessible (since browsing tools may have special support for HTML tables, hardly for dl).

Clause (g) in 508 rules says: “Row and column headers shall be identified for data tables.” The strict interpretation is that every row and every column must have a header. In your case, this is not a problem for rows, since the cell in the first column is logically a row header here, so you just use <td scope=row> for them. But you would need to add a row of column headers.

It is not crystal clear whether this is needed for compliance; the rule does not have the word “all”, and the explanatory prose says “The first row of each table should include column headings.” So it uses “should”, not “shall” or “must”.

If the column headers are required by the rule, and I would say they are, it would not be acceptable to add them with client-side scripting, for example (since then they would not exist when scripting is disabled). Neither would it be acceptable to have them in some browsing modes only; the rules are general (and headers can really be useful even when browsing “normally”).

Consider how the page behaves when read aloud to someone who does not see it. If the content of the table just starts with no warning or explanation, it can be confusing. Even in graphic browsing, the user may get puzzled, partly depending on cognitive difficulties. Explanations in the text before the table (in a heading or in a text paragraph), a caption of the table, and a row of column headers may all help here. The content of the column headers should be planned as part of this; they might be rather concise, if the situation is made clear with the other texts.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
0

While it may be unclear as to whether table headings are required, most automated 508 checkers will fail a table that does not include table headings as either the first row or the first column.

In general, column headings are generally preferred, as shown in the W3C tutorial.

In your example, adding column headings should be relatively simple. Just add "Category" as the TH for the first column and "Value" (or something more descriptive) as the TH for the second column.

Row headers are generally considered optional but recommended. Again, some testing tools will fail tables without both column and row headings, depending on the WCAG compliance level being tested.

Also note that is no longer valid. Scope can only be applied to TH's.

Marc L
  • 11
  • 1