Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

How to hide a row header
So that it is invisible but works for screen reader users

In the table below there is a table which appears to only have numbers. However, there is an offscreen header row, which can announce those headers as a screen reader user is moving through the table. Although it's best to design so that nothing has to be hidden offscreen, it occassionally is required, particularly for legacy applications. If that is the case, here is a way to accomplish that.

Here is the table without hiding the header

heading 1 heading 2 heading 3 heading 4
1 2 3 4
5 6 7 8
99 9 0 11

 

Here it is with the hidden row:

heading 1 heading 2 heading 3 heading 4
1 2 3 4
5 6 7 8
99 9 0 11

 

CSS Code

<style>
.hideme {
height: 1px; border: none }
.noborder{border: none}
.offscreen {
height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }
</style>

HTML Code

<table>
<thead>

<tr class="hideme">
<th scope="col" class="noborder" >
<span class="offscreen">heading 1</span></th>
<th scope="col" class="noborder">
<span class="offscreen">heading 2</span></th>
<th scope="col" class="noborder">
<span class="offscreen">heading 3</span></th>
<th scope="col" class="noborder">
<span class="offscreen">heading 4</span></th>
</tr></thead>
<tbody><tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr></body>
etc...

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.

 



CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help -at- can-adapt.com
(replace -at- with you know what)

PHONE

613-806-9005

SOCIAL MEDIA