WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: SCOPE

for

From: Sailesh Panchang
Date: Oct 22, 2024 11:15AM

Here is an example of a complex data table with multiple rows of column
headers (including use of colspan) that uses only TH and works fine to
expose the column headers.
Yet the row headers use the scope attribute with the TH in order to
explicitly define the row header relationship. Notice the table uses
rowspan so again in effect there are multiple columns of row headers
thatneed to be related with the data cells.
http://mars.dequecloud.com/demo/Table-multi-colWithRowspan.htm

This was authored over ten years ago and the behavior is the same even with
an HTML5 doctype statement.
So the scope attribute needs to be used in order to expose the header cell
- data cell relationship unambiguously in such complex data tables.
Financial or statistical tables can often have non-simple structures.
So my recommendation is:
- use only TH;
- If that is not sufficient, check if adding scope helps to expose the
relationships as intended;
- And if this still does not work, using headers-id method may be the only
option.
Thanks,
Sailesh Panchang | +1 (571) 344-1765
Technical Solutions Architect

Email: <EMAIL REMOVED>
Deque Systems Inc | - Accessibility for Good | www.deque.com














On Tue, Oct 22, 2024 at 5:56 AM Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Any <th> cell in the first row in a table has an implicit scope of "col".
> (i.e. column header)
> Any <th> cell in the first column in a table (not counting the first row)
> has an implicit scope of "row".
> Adding a scope attribute to those cells typically does not change
> accessibility support, in my experience.
> (I have not yet looked at the latest experiments from the mighty WebAIM
> team)
>
>
> You do need a scope attribute for
> * Any <th> cell that is not in the first row or first column in the table,
> (scope="col" for a column header, scope="row" for a row header)
> * Any <th> cell that spans multiple columns or rows,
> * use the scope attribute with values of colgroup or rowgroup respectively
> and use the colspan or rowspan attributes to indicate number of columns or
> rows spanned
> * <th scope="colgroup" colspan="3">I am a column header cell spanning 3
> columns</th>
> * <th scope="rowgroup" rowspan="3">I am a header cell spanning 3 rows</th>
> You need to do this regardless of the location of the <th> cell in the
> table.
>
> I disagree that a table with only column or row headers fails WCAG 1.3.1,
> it all depends on
> I) Whether a cell is visually emphasized
> II) If the table has a natural candidate
>
> A table needs either column or row header cells, usually it needs column
> header cells, but it does not necessarily need both.
>
> Since screen readers read header cells in context, you don't want those
> cells to be too wordy.
>
> Imagine that you have a table of transactions. The first column is a
> 30-digit transaction ID, Then you have the columns date, amount, from
> account and to account.
> The transaction number doesn't tell you anything, and you don't want to be
> forced to hear it every time you navigate between rows, so it's a terrible
> candidate for a row header.
> Any one or more of the amount, date, or from account columns would be
> acceptable row header candidates, though they don't tell the whole story,
> probably date and amount would work together as row headers
>
> I would personally prefer not having a row header in that table.
>
> Actually what I do want is for screen reader users to set their own row
> header cells, but that would be a screen reader functionality.
> > > > >