WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: data or layout table

for

From: John Foliot
Date: Sep 2, 2011 12:48PM

Jared Smith wrote:
>
> On Fri, Sep 2, 2011 at 9:20 AM, Duff Johnson wrote:
>
> > Accordingly the need for table headers in HTML (and elsewhere), it
> seems to me, is a function of whether or not headers are logically
> present in the table, period.
>
> I agree that this is almost always the case. But sometimes data is
> presented in a table in a way that makes sense visually, but when
> accessed by a screen reader could be very confusing. In such cases,
> adding headers (even perhaps keeping them hidden) might be best for
> accessibility.

+1

>
> Consider Deborah's example of images, links, and a bit of information
> presented in a table. It would make sense to a screen reader reader
> user if the information is read left to right through rows as...
> Image, link, info.
> Image, link, info.
> etc...
>
> This would be little different than presenting them without a table
> layout. Adding headers would just add overhead that is not necessary.
>
> However, if the logical reading order is...
> Image, image, image.
> Link, link, link.
> info, info, info.
> etc...
>
> ... this would quickly become very difficult to comprehend linearly in
> a screen reader, yet would still make perfect sense visually. The
> presentation of each column visually (e.g., a column of image
> thumbnails of quilt squares) presents information that a screen reader
> user would not easily get. In this case, the addition of a column
> header would greatly improve accessibility.
>
> Hopefully that makes sense.

It does to me Jared, but I will re-state it slightly differently to be
sure I understood you <grin>

If each cell in any row contains an image, info and link:

<td><a href="3b_info.html"><img alt="quilt square 3b"
longdesc="[if required/desired]"></a></td>

...then likely the addition of a header row(s) is likely not going to add
a lot of value.
However, if we had 3 cells:

<td><img></td> <td><a href></a></td> <td>info</td> - especially
if they are in subsequent rows

...then adding TH's would be critical for comprehension.

***********

Deborah, given that this is a quilt (and Mom does quilting, so I actually
know more about quilting than I should admit), it strikes me that what you
are really after is an actual grid construct (which table will give you).
The tricky part becomes how much association each adjacent cell (quilt
block) has to surrounding cells (other quilt blocks) - in my pseudo code
above you will notice that I added as alt text a "name" of the block
(quilt square 3b) which hints at which cell it likely is: I will assume
that there will also be surrounding/related text (instructions) that could
also help clarify this to end users, as well as the linked text about that
quilt block itself.

I really think that this is a case where "figuring out accessibility"
requires some thinking "outside of the box", and not just an instant
response to what a validator would suggest: through good use of language
we can also help build the visual model that a quilt comprises - a series
of individual blocks, stitched together to create a larger whole. I
suspect that if you did something like what I have suggested, then you
actually could consider your table a layout table, and could add the ARIA
role="presentation" to the <table> - although I would want to test this
with screen readers before rolling it out. <=== !important

JF's $0.02 worth