WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Use of the scope attribute with TH elements

for

Number of posts in this thread: 5 (In chronological order)

From: Liko, Todd
Date: Mon, Jan 27 2014 6:02AM
Subject: Use of the scope attribute with TH elements
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
telephone / téléphone: (613) 949-9425 | fax / télécopieur: (613) 949-2386
Government of Canada | Gouvernement du Canada

From: Olaf Drümmer
Date: Mon, Jan 27 2014 6:22AM
Subject: Re: Use of the scope attribute with TH elements
← Previous message | Next message →

Hi Todd
On 27 Jan 2014, at 14:02, "Liko, Todd" < = EMAIL ADDRESS REMOVED = > wrote:

> My question is about the use of the scope attribute with the TH elements.

here is my take (which I actually consider supported by HTML 4, HTML 5 and WCAG 2):

- keep simple tables simple; if simple tables either have only one row of column headers in their top row, or one column of row headers in their first column, it is almost impossible to interpret this structure in the wrong fashion; Scope attributes could not add any information; the same would also apply where there are two or even three top levels of header cells at the top or left.

- there is a class of still relatively simple tables, that have headers in the first column and in the first row; some of these have the upper left corner cell unused (i.e. it is not a TH cell), but others do use it as a TH cell, to serve as a header in the horizontal or vertical direction; in that case - and only in that case - the Scope attribute is valuable, as it can indicate what the scope of that TH cell is; as far as I can tell that is the only instance where the Scope attribute can be really useful

- finally there are those tables that are not so simple - they have nested use of TH cells in vertical and horizontal direction, they have TH cells not only at the beginning of the table rows or columns, but rather somewhere in the middle; in almost all such cases the Headers attribute will have to be used, for all cells that have a header cell associated with them, to indicate which header cells to associate with a given cell.


Note: where I am using words like top or left, this is based on tables in the Western writing mode (left to right, top to bottom).


Olaf

From: Liko, Todd
Date: Tue, Jan 28 2014 5:17AM
Subject: Re: Use of the scope attribute with TH elements
← Previous message | Next message →

Hi Olaf.

Thank you for your reply.

When you say 'it is almost impossible to interpret this structure in the wrong fashion; scope attributes could not add any information' you are referring to assistive technologies such as screen readers. I realize we should not be coding for assistive technologies, they should be conforming with the standards. I tend to err on the side of caution and given that the scope attribute has defined purpose and does not hinder the reading of a table when used, that is why I have continued to use it.

In addition, as previously noted, most of the information out there, including the revamped WebAim website, still say to use the scope attribute for simple tables.

Once again, I appreciate your reply.

Todd.

From: Paul Bohman
Date: Tue, Feb 04 2014 9:59AM
Subject: Re: Use of the scope attribute with TH elements
← Previous message | Next message →

Using only <th> for cells across the top (column headers) works pretty
universally without scope, but I still recommend using scope, to make the
purpose of the th unambiguous.

Using <th> for cells in the left column (row headers) is not as universally
supported without scope, so always include the scope for row headers.

The headers + id method for complex tables with spanned cells works great
in JAWS and NVDA and does not work at all in VoiceOver. The VoiceOver
implementation is quite broken. VoiceOver requires simple table structure,
or else you have to essentially create the table from scratch using ARIA
grid structure, which is no fun, and works only in the OSX and not in
mobile iOS. I don't know of a solution for iPhones/iPads. Only simple table
structures work on Mac mobile platforms, as far as I know.


Paul Bohman, PhD
Director of Training
Deque Systems, Inc
www.deque.com
703-225-0380, ext.121


On Tue, Jan 28, 2014 at 7:17 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Olaf.
>
> Thank you for your reply.
>
> When you say 'it is almost impossible to interpret this structure in the
> wrong fashion; scope attributes could not add any information' you are
> referring to assistive technologies such as screen readers. I realize we
> should not be coding for assistive technologies, they should be conforming
> with the standards. I tend to err on the side of caution and given that the
> scope attribute has defined purpose and does not hinder the reading of a
> table when used, that is why I have continued to use it.
>
> In addition, as previously noted, most of the information out there,
> including the revamped WebAim website, still say to use the scope attribute
> for simple tables.
>
> Once again, I appreciate your reply.
>
> Todd.
>
>

From: Sailesh Panchang
Date: Tue, Feb 04 2014 11:48AM
Subject: Re: Use of the scope attribute with TH elements
← Previous message | No next message

Todd,
That note about not using scope for simple tables with headings across
the first row and down the first column then was motivated by the
absence of support for scope in Window-Eyes ... it would fail to read
headings if a cell had TH with scope. It is based on the principle of
coding in a manner that will ensure the widest possible support while
being standards-compliant.
I agree with the need to use of scope so that the heading logic is
very explicit and not subject to different interpretation by AT /
browsers.
Now At (JAWS/NVDA) support TH in tables with more than 1 row of column
headers. So using scope helps. And one can avoid using headers-id
except in really complex tables.
And finally HTML4 recognized a reality and allowed use of scope with
TD cells too with the note:
"Note that it's not always possible to make a clean division of cells
into headers or data. You should use the TD element for such cells
together with the id or scope attributes as appropriate." [1]
Surely one will use TH to mark up header cells but when there are
constraints the above note comes handy.
It is extremely unfortunate that HTML5 ignores this reality and does
not allow use of scope on a TD cell.

[1] Section 11.4.1 of http://www.w3.org/TR/REC-html40/struct/tables.html

Regards,
Sailesh


On 2/4/14, Paul Bohman < = EMAIL ADDRESS REMOVED = > wrote:
> Using only <th> for cells across the top (column headers) works pretty
> universally without scope, but I still recommend using scope, to make the
> purpose of the th unambiguous.
>
> Using <th> for cells in the left column (row headers) is not as universally
> supported without scope, so always include the scope for row headers.
>
> The headers + id method for complex tables with spanned cells works great
> in JAWS and NVDA and does not work at all in VoiceOver. The VoiceOver
> implementation is quite broken. VoiceOver requires simple table structure,
> or else you have to essentially create the table from scratch using ARIA
> grid structure, which is no fun, and works only in the OSX and not in
> mobile iOS. I don't know of a solution for iPhones/iPads. Only simple table
> structures work on Mac mobile platforms, as far as I know.
>
>
> Paul Bohman, PhD
> Director of Training
> Deque Systems, Inc
> www.deque.com
> 703-225-0380, ext.121
>
>
> On Tue, Jan 28, 2014 at 7:17 AM, Liko, Todd < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi Olaf.
>>
>> Thank you for your reply.
>>
>> When you say 'it is almost impossible to interpret this structure in the
>> wrong fashion; scope attributes could not add any information' you are
>> referring to assistive technologies such as screen readers. I realize we
>> should not be coding for assistive technologies, they should be conforming
>> with the standards. I tend to err on the side of caution and given that
>> the
>> scope attribute has defined purpose and does not hinder the reading of a
>> table when used, that is why I have continued to use it.
>>
>> In addition, as previously noted, most of the information out there,
>> including the revamped WebAim website, still say to use the scope
>> attribute
>> for simple tables.
>>
>> Once again, I appreciate your reply.
>>
>> Todd.
>>
>>