WebAIM - Web Accessibility In Mind

E-mail List Archives

Use of the scope attribute with TH elements

for

From: Liko, Todd
Date: Jan 27, 2014 6:02AM

Hello all. First time poster, long time reader.

My question is about the use of the scope attribute with the TH elements. I am being told it is not required for simple tables. I was told that it is valid because of the algorithm, backward compatibility, defined in the HTML5 specification - 4.9.12.2 Forming relationships between data cells and header cell<http://www.w3.org/TR/html5/tabular-data.html#header-and-data-cell-semantics>;.

I replied that the WCAG 2.0 Sufficient Technique H63: Using the scope attribute to associate header cells and data cells in data tables<H63:%20Using%20the%20scope%20attribute%20to%20associate%20header%20cells%20and%20data%20cells%20in%20data%20tables> has a note that says for simple tables that have headers in the first row or column, it is sufficient to simply use the TH elements without scope. I question the validity of that note. Furthermore, the W3C seems to contradict itself, because it also says the following in its recommendation for tables<http://www.w3.org/TR/html401/struct/tables.html#adef-scope>;:


· scope = scope-name [CI]<http://www.w3.org/TR/html401/types.html#case-insensitive>;
This attribute specifies the set of data cells for which the current header cell provides header information. This attribute may be used in place of the headers attribute, particularly for simple tables. When specified, this attribute must have one of the following values:
· row: The current cell provides header information for the rest of the row that contains it.
· col: The current cell provides header information for the rest of the column that contains it.
In addition, the website WebAIM and many other reputable websites/organizations that focus on accessibility say the scope attribute must be used to associate column and row headers with content in each column and row. Also, marking up row header cells in the first column of a table with TH scope="row" ensures that the contents of that cell are not treated as column header for rows below. Screen readers require this information to properly read the table while associating data cells with the appropriate header cells.

The scope attribute for the TD element is deprecated in HTML5, however is retained for the TH element.

Regardless of how various screen readers may interpret the scope attribute, the purpose of the scope attribute is to identity whether a table cell header is a column header or a row header. While various browsers and screen readers may be able to correctly guess, assigning the scope attribute removes any ambiguity. Including the scope attribute does not harm, not including it cause user agents and screen readers to have difficulty.

I think it is great that use agents and screen readers are able to forgive improper coding, however, we should apply proper semantic and programmatically correct machine readable code. We need to implement good coding practices while doing our best to accommodate user agents and screen readers.

Any thought on this would be most appreciated.

_______
Todd Liko
Communications Advisor | Conseiller en communications
Web Services | Services Web
Communications and Marketing | Communications et Marketing
427 Avenue Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5
e-mail / courriel: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
telephone / téléphone: (613) 949-9425 | fax / télécopieur: (613) 949-2386
Government of Canada | Gouvernement du Canada