WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Travel Live departures and tables (Andrew Brandwood)

for

From: Moore,Michael (Accessibility) (HHSC)
Date: May 13, 2016 1:55PM

Hi Birkir

Your example of using aria-labelledby got me to thinking so I experimented with the following code

<h1>Table labeling examples</h1>

<table>
<caption role="heading" aria-level="2">This is the first table</caption>
<tr>
<th>
Header Column 1
</th>
<th>
Header Column 2
</th>
<th>
Header Column 3
</th>
</tr>
<tr>
<th>
Header Row 1
</th>
<td>
Data R1 C2
</td>
<td>
Data R1 C3
</td>
</tr>
<tr>
<th>
Header Row 2
</th>
<td>
Data R2 C2
</td>
<td>
Data R2 C3
</td>
</tr>
</table>

In FireFox (Current Release) and IE 11 JAWS 16 and NVDA (Current Release) The <caption> could be found navigating by table or by heading. In JAWS the caption was listed in both the headings list and in the tables list. The caption was not repeated when reading by line or paragraph.

This appears to provide good, non-obtrusive coverage even though I have technically overridden the semantics of the caption. I suppose that I could have nested a span inside of the caption to hold the role and level attributes and been technically more correct.

I would be interested to see if this works across more browser/screen reader combinations. Particularly in the Apple arena.


Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)