WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: data or layout table

for

From: Sailesh Panchang
Date: Sep 2, 2011 1:15PM

Generally, I am not in favor of adding a row , say off-screen, that
contains column headers for a data table that has no visible column
headers.
1. If a table makes sense when read row-wise, then consider marking
cells in col#1 as TH or using scope=row in col#2 (if col#2 serves as a
better row header).
Else add a brief summary: "Read this table row by row" for a table
with image, link, some info in each row- type of table.
2. And lastly if the logical reading order is to read down col#1 then
col#2 etc. then the design needs to be altered:
Use an outer a layout-table with 1 row and 3 cells to contain a table
in each cell.
A DIV can also be used as a container instead of the layout table if
one chooses.
I also recommend this when I see a 4-col table in which cells in
col#1 and 3 serve as labels for cells in col2 and 4 respectively. Here
use two 2-col data tables in a outer div or layout table.
Sailesh Panchang


On 9/2/11, John Foliot < <EMAIL REMOVED> > wrote:
> 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
>
>
>