{"id":23771,"date":"2019-05-03T21:38:18","date_gmt":"2019-05-03T13:38:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23771"},"modified":"2019-04-30T18:21:33","modified_gmt":"2019-04-30T10:21:33","slug":"html-table-accessibility","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html-table-accessibility\/","title":{"rendered":"How to Improve HTML Table Accessibility with Markup"},"content":{"rendered":"

Web accessibility refers to designing web applications in a way that it can be used with ease by people with visual disabilities. Some of these users rely on screen readers<\/strong> to read out the content in the web pages. The screen readers interpret the code present on the page<\/strong> and read out its content to the user<\/strong>.<\/p>\n

<table><\/code> is a widely used HTML element to display data in a structured fashion in webpages. Its design ranges from simple ones to complex ones, complete with row headers, merged headers etc.<\/p>\n

If a table is not designed with accessibility in mind, it will be difficult for the screen readers to translate the data in complex tables meaningfully for the users. Hence, to make complex HTML tables more easily understandable, for accessibility, we must ensure that the headers, column groups, row groups, etc. are clearly defined<\/strong>. We\u2019ll see below how this is achieved in markup<\/strong>.<\/p>\n

The Scope Attribute<\/h2>\n

Even for a simple table with <th><\/code> tag that clearly defines the headers, you can improve its accessibility with the scope<\/code> attribute and not give way to any confusion that may arise from similar types of data in the cells.<\/p>\n

\"Table<\/figure>\n
<table>\r\n    <tr>\r\n        <th scope=\"col\">Employee Name<\/th>\r\n        <th scope=\"col\">Employee Code<\/th>\r\n        <th scope=\"col\">Project Code<\/th>\r\n        <th scope=\"col\">Employee Designation<\/th>\r\n    <\/tr>\r\n    <tr>\r\n        <td>John Doe<\/td>\r\n        <td>32456<\/td>\r\n        <td>456789<\/td>\r\n        <td>Director<\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <td>Miriam Luther<\/td>\r\n        <td>78902<\/td>\r\n        <td>456789<\/td>\r\n        <td>Deputy Director<\/td>\r\n    <\/tr>\r\n<\/table>\r\n<\/pre>\n
What does scope attribute do? According to W3C<\/a>:<\/p>\n
Note:<\/strong> This attribute specifies the set of data cells for which the current header cell provides header information.<\/p>\n
In other words it helps us associate the data cells with their corresponding header cells.<\/p>\n
Please note that in the above example you can switch <th><\/code> for <td><\/code>. As long as its scope<\/code> has the value col<\/code>, it will be interpreted as the corresponding column\u2019s header.<\/p>\n
The scope<\/code> attribute can have any one of these four values; col<\/code>, row<\/code>, rowgroup<\/code>, colgroup<\/code> to refer to a column\u2019s header, a row\u2019s header, a group of columns\u2019 header and a group of rows\u2019 header respectively.<\/p>\n
Complex Tables<\/h2>\n
Now let us move on to a more complex table.<\/p>\n
\"Table<\/figure>\n
Above is a table that lists students in a class and their grades in practical and theory for three subjects.<\/p>\n
Here is the HTML code for it. The table has used rowspan<\/code> and colspan<\/code> to create merged headers for the data cells.<\/p>\n
<table>\r\n    <tr>\r\n        <th rowspan=\"2\">Student Name<\/th>\r\n        <th colspan=\"2\">Biology<\/th>\r\n        <th colspan=\"2\">Chemistry<\/th>\r\n        <th colspan=\"2\">Physics<\/th>\r\n    <\/tr>\r\n    <tr>\r\n        <th>Practical<\/th>\r\n        <th>Theory<\/th>\r\n        <th>Practical<\/th>\r\n        <th>Theory<\/th>\r\n        <th>Practical<\/th>\r\n        <th>Theory<\/th>\r\n    <\/tr>\r\n    <tr>\r\n        <th>John Doe<\/th>\r\n        <td>A<\/td>\r\n        <td>A+<\/td>\r\n        <td>B<\/td>\r\n        <td>A<\/td>\r\n        <td>A<\/td>\r\n        <td>A-<\/td>\r\n    <\/tr>\r\n    <tr>\r\n        <th>Miriam Luther<\/th>\r\n        <td>A<\/td>\r\n        <td>A<\/td>\r\n        <td>C<\/td>\r\n        <td>C+<\/td>\r\n        <td>A<\/td>\r\n        <td>A-<\/td>\r\n    <\/tr>\r\n<\/table>\r\n<\/pre>\n
In the above table, each data cell, that is each of the table cells displaying the grade<\/strong>, is associated with three pieces of information:<\/p>\n