Accessibility considerations for tables

Tweet

As we create tables, we must also deal with the accessibility of tables. The problem with table is that, we can see and differentiate between the rows and columns by our eyes, but it is difficult to differentiate for our ears linearly. And this makes an inaccessibility for blind. Here, in this post we will deal with this problem.

Using Summaries

Any table needs to answer the question, what this is all about, and it can be answered using the summary attribute in HTML.

<table summary="A brief overview of students marks according to their subjects">
     <caption>Student's Marks</caption>

     ...
     ...<!-- some codes missing -->
     ...

</table>

The value of summary won't be displayed, but it will be recognized and read out by screen readers. This brief description of what's going on can make table contents much easier and quicker to understand.

Using scope attribute

Though summary attribute can give the user to get an idea of what to expect, there is still much problem of describing the cells. Though, there are features like rowspan, colspan and grouping rows and columns, its still a problem to be read out along with the data itself.

Now, by the scope attribute, you can define what a header is for and can even denote the rowgroup(thead, tfoot and tbody), or colgroup. The value of this attribute can be row, col, rowgroup or colgroup.

<table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone#</th>
    <th scope="col">Fax#</th>
    <th scope="col">City</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

As you can see from the above code, the scope attribute tries to differentiate between the row and column headers. But, these actions can't be seen on a user screen.

Using headers attribute

The headers attribute is useful for the accessibility and can be used within a td or th tag to specify which cells should be regarded as headers for it. The value can be a single id name or a list of ids separated by spaces.

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
</table>

You can see from the above code and picture, how the headers carry the IDs and headers from the first to the last row. This clearly defines what values are under what headers.