WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: using 'hidden' for data table

for

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

From: Maren Child
Date: Wed, Sep 15 2004 2:09AM
Subject: using 'hidden' for data table
No previous message | Next message →

I'm putting headers in data tables, where the first cell of the table is
blank. That's how it is in the print version of the document, and that's how
it has to appear on screen. To make it accessible, that cell really needs to
have some text in it and have an id so the headers in the table cells can
refer to it.
Can I put the text in, but use the 'hidden' class to make it offscreen?
Thanks
Maren

From: lisa goostrey
Date: Wed, Sep 15 2004 5:01AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →

I didnt think it needed text in it necessarily to be accessible,
however, it does need an id of some sort. You could call it "empty" or
something. The id wont effect its appearance.

-Lisa Goostrey


On Wed, 15 Sep 2004 18:16:58 +1000, maren wrote:
>
> I'm putting headers in data tables, where the first cell of the table is
> blank. That's how it is in the print version of the document, and that's how
> it has to appear on screen. To make it accessible, that cell really needs to
> have some text in it and have an id so the headers in the table cells can
> refer to it.
> Can I put the text in, but use the 'hidden' class to make it offscreen?
> Thanks
> Maren
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>
>

From: Chris Heilmann
Date: Wed, Sep 15 2004 5:13AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →


I had the same issue with some designs. IMHO it is rather useless to keep
a header empty and then give it an ID. Just give it a text that describes
what the column is and hide it for the visual browsers via an accessible
hiding technique like off-left.

Depending on the structure of the table, you might also need no ID, but
use the scope attribute instead.


>
> I didnt think it needed text in it necessarily to be accessible,
> however, it does need an id of some sort. You could call it "empty" or
> something. The id wont effect its appearance.
>
> -Lisa Goostrey
>
>
> On Wed, 15 Sep 2004 18:16:58 +1000, maren wrote:
>>
>> I'm putting headers in data tables, where the first cell of the table is
>> blank. That's how it is in the print version of the document, and that's
>> how
>> it has to appear on screen. To make it accessible, that cell really
>> needs to
>> have some text in it and have an id so the headers in the table cells
>> can
>> refer to it.
>> Can I put the text in, but use the 'hidden' class to make it offscreen?
>> Thanks
>> Maren
>>
>> ----
>> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>>
>>
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>


--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: julian.rickards@ndm.gov.on.ca
Date: Wed, Sep 15 2004 9:00AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →

Print and web are two different media and therefore, they should be treated
as such. Just because a printed document does not have any header cells does
not necessarily mean that the web document shouldn't either. Just because a
web page uses tables for layout does not mean that the printed document
should too.

The purpose of the accessible table components (, scope, id/headers) is
to allow a person with a screen reader to "click" within a data cell and
learn (through the features of the screen reader) what header cells apply to
it. In a situation where there is a table with the days of the week across
the top and times down the left, moving the cursor to the "Staff Meeting"
cell, then prompting the screen reader to read out the headers will identify
to the person that the Staff Meeting is Tuesday at 10:30. Without contents
within the header cells (i.e., Tuesday and 10:30), there is nothing for the
screen reader to read.

As lists38 stated, you don't always need ids/headers, it depends on the
complexity of the table. I create accessible tables as such:

(1) One set of headers in one direction (i.e., at the top or at the left but
not both), is needed and scope helps.

(2) One set of headers in each direction (i.e., one at the top and one at
the left but no more than one level in each direction), is needed and
scope is needed.

(3) More than one set of headers in one direction, such as days of the week,
and then spanned cells grouping them into Weekday and Weekend and both at
the top or both at the left. In other words, multiple levels in the same
direction. is needed and id/headers to relate the Staff Meeting to both
Tuesday and Weekday.

HTH,

Jules

-----------------------------------------------
Julian Rickards
A/Digital Publications Distribution Coordinator
Publication Services Section,
Ministry of Northern Development and Mines,
Vox: 705-670-5608 / Fax: 705-670-5960


-----Original Message-----
From: maren [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, September 15, 2004 4:17 AM
To: WebAIM Discussion List
Subject: [WebAIM] using 'hidden' for data table



I'm putting headers in data tables, where the first cell of the table is
blank. That's how it is in the print version of the document, and that's how
it has to appear on screen. To make it accessible, that cell really needs to
have some text in it and have an id so the headers in the table cells can
refer to it.
Can I put the text in, but use the 'hidden' class to make it offscreen?
Thanks
Maren

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

From: RC
Date: Wed, Sep 15 2004 9:00AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →





Hi,
Please provide the code to show us all how "hidden" is accomplished?

Thank you,

RC

From: Jim Thatcher
Date: Wed, Sep 15 2004 9:00AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →

Maren,

I need more information about the situation you describe. If you mean the
cell at column 1 row 1 is blank that is no problem. No need for id or text.
Please provide more information.

Jim

Accessibility Consulting: http://jimthatcher.com/
512-306-0931

-----Original Message-----
From: maren [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, September 15, 2004 3:17 AM
To: WebAIM Discussion List
Subject: [WebAIM] using 'hidden' for data table


I'm putting headers in data tables, where the first cell of the table is
blank. That's how it is in the print version of the document, and that's how
it has to appear on screen. To make it accessible, that cell really needs to
have some text in it and have an id so the headers in the table cells can
refer to it.
Can I put the text in, but use the 'hidden' class to make it offscreen?
Thanks
Maren

----
To subscribe or unsubscribe, visit http://www.webaim.org/discussion/

From: Randy Pearson
Date: Wed, Sep 15 2004 9:26AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →

Apologies for thread creep, but this topic so similar to the current:

We have some web-based tables of numbers, wherein a healthy percentage of
the
cells' value is 0. To draw visual attention to the non-0 cells, some have
suggested blanking out the 0's, so those cells are empty. Is there an
accessibility argument against doing this? It would seem so, as the concept
of "blank meaning 0" may not be obvious via screen reading or other
alternative
types of access.

Any opinions welcome!

-- Randy

> I need more information about the situation you describe. If
> you mean the cell at column 1 row 1 is blank that is no problem. No need
> for id or text. Please provide more information.

From: Chris Heilmann
Date: Wed, Sep 15 2004 9:36AM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →



Well, 0 is a value, and not "nothing". If you really want to get rid of
the zeros, you could either apply a class to each of those cells and move
them out via (accessible) CSS, or use DOM to make them "pretty", something
like:

window.onload=function()
{
for(var i=0;i<document.getElementsByTagName('td').length;i++)
{
if(parseInt(document.getElementsByTagName('td')[i].innerHTML)==0)
{
document.getElementsByTagName('td')[i].innerHTML=' ';
}
}
}

Which IMHO is overkill.


> Apologies for thread creep, but this topic so similar to the current:
>
> We have some web-based tables of numbers, wherein a healthy percentage of
> the
> cells' value is 0. To draw visual attention to the non-0 cells, some have
> suggested blanking out the 0's, so those cells are empty. Is there an
> accessibility argument against doing this? It would seem so, as the
> concept
> of "blank meaning 0" may not be obvious via screen reading or other
> alternative
> types of access.
>
> Any opinions welcome!
>
> -- Randy
>
>> I need more information about the situation you describe. If
>> you mean the cell at column 1 row 1 is blank that is no problem. No need
>> for id or text. Please provide more information.
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>


--
Chris Heilmann
The mighty pen: http://icant.co.uk/
Learn to let go! http://ltlg.icant.co.uk
Binaries: http://www.onlinetools.org/

From: Jukka K. Korpela
Date: Wed, Sep 15 2004 2:07PM
Subject: Re: using 'hidden' for data table
← Previous message | Next message →

On Wed, 15 Sep 2004, randyp wrote:

> Apologies for thread creep, but this topic so similar to the current:
>
> We have some web-based tables of numbers, wherein a healthy percentage of
> the
> cells' value is 0. To draw visual attention to the non-0 cells, some have
> suggested blanking out the 0's, so those cells are empty.

As a side note: this raises the problem that browsers may treat completely
empty cells differently in visual rendering, e.g. not drawing borders or
not using a background color that has been specified. Usually a space
counts as completely empty, no-break space ( ) doesn't.

> Is there an
> accessibility argument against doing this? It would seem so, as the concept
> of "blank meaning 0" may not be obvious via screen reading or other
> alternative types of access.

Indeed. It might not be evident in "normal" types of access either.
The user's first question might be "why have they left out some
information here?".

There are various practices of indicating different types of "emptyness"
in statistical tables, e.g. so that ".." means 'data not available',
"-" means an exact value of zero, and "0.0" means that the value is zero
when rounded to the precision used. Naturally such notations should
normally be explained e.g. in a legend on the right of the table (and
using floating in CSS you could arrange things so that the legend appears
before the table in HTML markup, hence gets read first by a speech browser
that directly reads the HTML source).

For some more notes on empty cells (mostly related to visual
presentation), see
http://www.cs.tut.fi/~jkorpela/html/emptycells.html

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

From: Maren Child
Date: Wed, Sep 15 2004 10:01PM
Subject: using 'hidden' for data table
← Previous message | Next message →


Here's an example of the kind of table I'm talking about - table 1 on
http://www.aec.gov.au/_content/what/publications/corporate/annual_report/200
3/html/outcome1.htm

It seems to need something in the first header cell for the rest of the
first column cells to refer to. Visually, you can probably infer it, but I
imagine a screen reader would have trouble with it.


I would use the method from www.webaim.org/techniques/articles/hiddentext to
hide the content of the header cell:
..hidden
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
This text is hidden.


Maren

From: Maren Child
Date: Thu, Sep 16 2004 6:43PM
Subject: using 'hidden' for data table
← Previous message | No next message

Thanks for the reply, David. It seems that it's better to try to change the
table so that it can be marked up properly, rather than trying to do
workarounds for a badly constructed table.
Maren