WebAIM - Web Accessibility In Mind

E-mail List Archives

Fwd: Table captions using span and css class wb-invisible from the template

for

From: Rabab Gomaa
Date: Apr 22, 2013 8:32AM

Hi Jared,

Sometimes the table is the only content under a heading tag. Adding a
caption would repeat the heading tag content.

Removing the caption and have no summary (in HTML 5), would that fail
WCAG 2.0 1.3.1 Info and Relationship?

May be setting invisible caption is not the best approach. Do you think
the use of ARIA role="heading" level="2" would be acceptable in this
case?
—
For example

Original table
<h1>Non-compliant products in Canada</h1>
<p>All products listed below are found non-compliant.</p>
<h2>Quebec </h2>
<table>
<tr>
<th>Brand</th>
<th>Product description</th>
<th>date of disposition</th>
</tr>
<tr>
<td>Abc Ltd.</td>
<td>Frozen chicken</td>
<td>2013-04-22</td>
</tr>
</table>

Approach 1: Use ARIA role="heading" level="2"
—--
<h1>Non-compliant products in Canada</h1>
<p>All products listed below are found non-compliant.</p>
<table>
<caption role="heading" level="2">Quebec</caption>
<tr>
<th>Brand</th>
<th>Product description</th>
<th>date of dispositon</th>
</tr>
<tr>
<td>Abc Ltd.</td>
<td>Frozen chicken</td>
<td>2013-04-22</td>
</tr>
</table>

—--
Approach 2: Use no caption

<h1>Non-compliant products in Canada</h1>
<p>All products listed below are found non-compliant</p>
<h2>Quebec </h2>
<table>
<tr>
<th>Brand</th>
<th>Product description</th>
<th>date of dispositon</th>
</tr>
<tr>
<td>Abc Ltd.</td>
<td>Frozen chicken</td>
<td>2013-04-22'étd"
</tr>
</table>


>>> Jared Smith < <EMAIL REMOVED> > 2/8/2013 2:10 pm >>>
I can think of no reason why one would want to present such a caption
only to screen reader users. If it's useful content, why not show it
to everyone? If it's not useful content, why force it on just screen
reader users? Either show it or remove it altogether - there's no
complex accessibility issues with that.

From a technical standpoint, it may be that NVDA and Firefox is being
used to test the page. For some reason it is currently (or at least
was a couple months ago) ignoring all content in Firefox that is given
overflow:auto styles. This is certainly a bug that needs to be
addressed.

Jared