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

 

Here it is with the hidden row:

 

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.