7.13 Making HTML Tables Accessible
Many people have to use screen readers to access the internet. For these people, reading a table created using HTML could be difficult. It is our responsibility to make this easier for them by using some tips and tricks to make the table more accessible. In Preethi Ranjit’s blog post titled How to Improve HTML Table Accessibility with Markup, he discusses how to make it easier for screen readers to interpret tables for people with disabilities.
The first tip he gives is to use the scope attribute for simple tables as it will help us associate the data cells with their corresponding header cells. It is used as follows:
<table><tr><th scope="col">Employee Name</th><th scope="col">Employee Code</th><th scope="col">Project Code</th><th scope="col">Employee Designation</th></tr> |
Please note that the scope attribute can have any one of these four values; col, row, rowgroup, or colgroup
The second tip that Ranjit gives is for more complex tables than the first one. This tip also involves the use of the scope attribute. In the below markup we have added scope to cells that contain heading information about the data cells of the more complicated table.
<table><col><colgroup span="2"></colgroup><colgroup span="2"></colgroup><colgroup span="2"></colgroup><tr><th rowspan="2" scope="col">Student Name</th><th colspan="2" scope="colgroup">Biology</th><th colspan="2" scope="colgroup">Chemistry</th><th colspan="2" scope="colgroup">Physics</th></tr><tr><th scope="col">Practical</th><th scope="col">Theory</th><th scope="col">Practical</th><th scope="col">Theory</th><th scope="col">Practical</th><th scope="col">Theory</th></tr> |
This ensures that the data from each cell displaying a grade in the table is associated with three different pieces of information
- Which student does this grade belong to?
- Which subject does this grade belong to?
- Is this grade for the Practical or Theory section?
The next thing he talks about is how some headings are to be associated with a group of two columns each and adding colspan=”2″ does not create column groups, it only indicates that a particular cell is to occupy two cells worth of space. To create column groups you must use colgroup and then add add the span attribute to it indicating how many columns that column group includes. The <th rowspan="2" scope="col">Student Name</th> markup with scope="col" helps the assistive technology identify that the cells that follow in the same column are names of students.
Finally, if you switch row and column headers, you have to use <thead>, <tbody> and <tfooter> elements because there is no rowgroup element. A single HTML <table> element can have one <thead>, one <tfoot> and multiple <tbody>. If we use multiple tbody in our table to create the row groups, and add the respective scope to header cells containing the heading information about those two rows.
All this will help the screen readers be able to distinguish the elements of a table more easily.
This chapter is a revised version of a blog post titled, “Making HTML Tables Accessable,” on Lianne Learns Publishing.
