Making Tables Accessible

[cyberRobot]

I'm currently reading a book on web accessability and I have a few questions about making tables accessable.

According to the book, in order to make a simple table accessable you need to use the th tag or the scope attribute. Why wouldn't you use both? Is the scope attribute supported by all screen readers?

For Example --

<table>
   <tr>
      <td></td>
      <th scope="col">Apples</th>
      <th scope="col">Oranges</th>
   </tr>
   <tr>
      <th scope="row">Mike</th>
      <td>5</td>
      <td>8</td>
   </tr>
   ...
</table>

Thanks for your help!

[Webnauts]

I would suggest you to have a look here:

http://www.webaim.org/tutorials/tables

http://diveintoaccessibility.org/day...ent_first.html

http://www.mcu.org.uk/articles/tables.html

http://diveintoaccessibility.org/day...e_headers.html

A great tool:
Accessible Table Builder: http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp

If you then still have questions, please feel free to post them.

[cyberRobot]

None of those links really helped.

Do the majority of the screen readers/speaking browsers support <th> tag and the scope attribute? If some don't support the scope attribute then the tables should always have a <th> tag. (And vice-versa) So if that's the case, shouldn't we always use both the <th> tag and the scope attribute?

Note: I know very little about screen readers/speaking browsers, so I have no idea what code the majority of them support.

[ScottNorton]

If you have a very simple table and mark your row and column headings with <th>, you don't need the scope attributes. In your sample table, the <th>'s will do their job just fine and as the user navigates through the table, JAWS will read the row or column heading (whichever one changes).

Scope is useful in two cases:

1. Complex tables, where an interior <th> could be a row or a column heading
2. <td> headings.

A <td> heading sounds like a contradiction in terms, but is really useful and sensible. The W3C accessibility pages use an example sort of like this:

Drink    Senators    Representatives
-------    ----------    -----------------
Coffee      23           95
Water       18           27
Tea            5            18

In that table, the drink names are data and should be marked with a <td> tag, but they are also the heading for the row, so that if you went down the Senators column, your would want the browser to read "Senators. Coffee, 23. Water, 18. Tea, 5." <td scope="col"> makes that happen.

[cyberRobot]

Originally Posted by ScottNorton

A <td> heading sounds like a contradiction in terms, but is really useful and sensible. The W3C accessibility pages use an example sort of like this:

Drink    Senators    Representatives
-------    ----------    -----------------
Coffee      23           95
Water       18           27
Tea            5            18

In that table, the drink names are data and should be marked with a <td> tag, but they are also the heading for the row, so that if you went down the Senators column, your would want the browser to read "Senators. Coffee, 23. Water, 18. Tea, 5." <td scope="col"> makes that happen.

Thanks, that was very helpful. Let me just make sure I'm getting this. Would the code for the example you gave look something like this:

...
   <tr>
      <th>Drink</th>
      <th>Senators</th>
      <th>Representatives</th>
   </tr>
   <tr>
      <td scope="row">Coffee</td>
      <td>23</td>
      <td>95</td>
   </tr>
...

[luvdavy]

While we're talking tables, I was trying to use some kind of html verifyer the other day and it keeps demanding me to do a table "summary". What in the world is that?

Jan

[cyberRobot]

Originally Posted by luvdavy

While we're talking tables, I was trying to use some kind of html verifyer the other day and it keeps demanding me to do a table "summary". What in the world is that?

Jan

The summary attribute allows you to describe the table's purpose.

<table summary="Table contains the calendar for September 2003">

If the table is used for layout purposes, it's good to keep the summary short. (We use "Layout Table")

[luvdavy]

Now why would I want to explain what a table was for?
Who would see it? A search engine spider supposedly skips all the html. I don't get it.

Jan

[cyberRobot]

Originally Posted by luvdavy

Now why would I want to explain what a table was for?
Who would see it? A search engine spider supposedly skips all the html. I don't get it.

Jan

What scanner were you using? Were you scanning for web accessibility? The summary attribute is used to help people, who use screen readers, understand your table better.

From what I understand, the summary attribute is optional to be HTML compliant.

[luvdavy]

It was an HTML verifyer called HTML Kit. I didn't think about it being there for readers and such.

I've never seen a table on a webpage that had something like that summary attribute in it. Oh well.

Jan

[Webnauts]

Originally Posted by luvdavy

It was an HTML verifyer called HTML Kit. I didn't think about it being there for readers and such.

I've never seen a table on a webpage that had something like that summary attribute in it. Oh well.

Jan

I use the summary attribute on my web site!

[cyberRobot]

Originally Posted by luvdavy

It was an HTML verifyer called HTML Kit. I didn't think about it being there for readers and such.

I've never seen a table on a webpage that had something like that summary attribute in it. Oh well.

Jan

In order to see the summary text, you'll need to go into the source code for a website. Of couse, not all websites use the summary attribute. (Most of them probably don't)

[luvdavy]

[quote="cyberRobot
In order to see the summary text, you'll need to go into the source code for a website. Of couse, not all websites use the summary attribute. (Most of them probably don't)[/quote]

Before I finally memorized and learned to make my tables, I viewed the source & copied and pasted others all the time. I honestly never saw that summary thing anywhere. I also don't think that Webmonkey mentioned it either. Maybe it's something they just started doing in the last year or so....

Since I do all my own html coding, I probably miss things that people who used editors know about, I guess.

Jan

[Webnauts]

Use "SUMMARY" attribute for your tables.

When a table is more complicated, Web authors are encouraged to use the summary attribute of the TABLE element. This, like the longdesc attribute for images, is not represented visually. It is rendered from the HTML code by assistive technology like screen readers and talking browsers.

The summary attribute should contain, as its name suggests, a summary of what the table presents.

With a summary, a blind person using a screen reader (which supports the summary attribute) will have an overview of the table before he starts to read it.

[cyberRobot]

Originally Posted by Webnauts

Use "SUMMARY" attribute for your tables.

That seems a bit demanding, but I would also recommend using the summary attribute. One question for whoever knows the answer. Does providing a summary for every layout table get annoying for people using screen readers. ("Layout Table, Layout Table, Layout Table...")

I noticed that www.webaim.org doesn't use the summary attribute for all their tables. (They do use it for some, which are not layout tables.)

Originally Posted by Webnauts

When a table is more complicated, Web authors are encouraged to use the summary attribute of the TABLE element. This, like the longdesc attribute for images, is not represented visually. It is rendered from the HTML code by assistive technology like screen readers and talking browsers.

The summary attribute should contain, as its name suggests, a summary of what the table presents.

With a summary, a blind person using a screen reader (which supports the summary attribute) will have an overview of the table before he starts to read it.

According to the book I'm reading "Constructing Accessessible Web Sites", they highly recommend using the summary attribute, but they also mention that they are "not sufficiently supported by major assistive technology manufacturers to warrent recommendation".

Note: The reason why they say this is so web developers don't use the summary attribute as an alternative to making their tables complient. (Using the th tag and scope/headers attributes)

So maybe that has an effect on why web developers don't use the summary tag. (Lack of support?)

[cyberRobot]

I'm beginning to think that my question got lost does anyone know if my code is correct (for accessibility) for ScottNorton's example?

Originally Posted by ScottNorton

Drink Senators Representatives
------- -------- ---------------
Coffee 23 95
Water 18 27
Tea 5 18

Originally Posted by cyberRobot

...
   <tr>
      <th>Drink</th>
      <th>Senators</th>
      <th>Representatives</th>
   </tr>
   <tr>
      <td scope="row">Coffee</td>
      <td>23</td>
      <td>95</td>
   </tr>
...

[Webnauts]

Originally Posted by cyberRobot

I'm beginning to think that my question got lost does anyone know if my code is correct (for accessibility) for ScottNorton's example?

I agree with CyberRobot!

[zbatia]

luvdavy wrote:
I've never seen a table on a webpage that had something like that summary attribute in it ...
========================================
luvdavy,
I use SUMMARY="table name that is another keyword for search engine"
In fact, my summary parameter helps me to manage the complicated nested tables.
Example:

<table width="785px" cellpading="0" cellspacing="0" border="0" summary="EXTERNAL BORDER TABLE CERTIFICATION COURSES">
...........................
</table>
(which indicates the end of this table)
There are 1000 opinions about how search engines work, but I am sure that the only search engine developers really know how. Therefore, along with the table name for manageabilty I use some of the keywords. So, SUMMARY parameter is very useful.

I use the cseHTML Professional Validator that is "must have" for serious web designer.

[Webnauts]

Originally Posted by zbatia

luvdavy wrote:
I've never seen a table on a webpage that had something like that summary attribute in it ...
========================================
luvdavy,
I use SUMMARY="table name that is another keyword for search engine"
In fact, my summary parameter helps me to manage the complicated nested tables.
Example:

<table width="785px" cellpading="0" cellspacing="0" border="0" summary="EXTERNAL BORDER TABLE CERTIFICATION COURSES">
...........................
</table>
(which indicates the end of this table)
There are 1000 opinions about how search engines work, but I am sure that the only search engine developers really know how. Therefore, along with the table name for manageabilty I use some of the keywords. So, SUMMARY parameter is very useful.

I use the cseHTML Professional Validator that is "must have" for serious web designer.

Great post. Besides I use and resell myself the CSE HTML Validator.

[ScottNorton]

Originally Posted by cyberRobot

I'm beginning to think that my question got lost does anyone know if my code is correct (for accessibility) for ScottNorton's example?

Oops. I'd stopped watching this thread.

Yes, your code is correct.

[ScottNorton]

Originally Posted by zbatia

I use SUMMARY="table name that is another keyword for search engine"
In fact, my summary parameter helps me to manage the complicated nested tables.
Example:

<table width="785px" cellpading="0" cellspacing="0" border="0" summary="EXTERNAL BORDER TABLE CERTIFICATION COURSES">
...........................
</table>

(which indicates the end of this table)
There are 1000 opinions about how search engines work, but I am sure that the only search engine developers really know how. Therefore, along with the table name for manageabilty I use some of the keywords. So, SUMMARY parameter is very useful.

I use the cseHTML Professional Validator that is "must have" for serious web designer.

While its good to realize that the table summary is part of your page's content, and so might contribute to its indexing, the primary purpose of the summary attribute is to summarize the table so that someone using assistive technology can be oriented to the table's purpose before decending into the individual cell