This post is base on HTML table advanced features and accessibility on MDN.
<td>to make a cell take extra spaces on rows or cols.
<col>to specify the same styles for every
<td>in the same column of a table, put
<colgroup>just below the opening
<caption>to provide the summary of the table. Put
<caption>just below the opening
<table>tag, the caption is meant to contain a description of the table’s content, this is useful for readers wishing to get a quick idea of whether the table is useful to them as they scan the page, especially for blind users, rather tha have the screenreader read out the whole contents of the tables with many cells, it can just read the caption for them to decide.
You can add structure to your table with
As your tables get complex in structure, it is useful to give them more structural definition. We can use
<tbody> to do this, which allow you to mark up a header, footer, and body section of the table.
These elements don’t make the table any more accessible to the screenreader users, also don’t result in any visual enhancement on their own. They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table. A good example is when you have a very long table, you could make the table header and footer repeat on every printed page, then make the table body display on a single page and have the contents available by scrolling up and down.
More details about these three attributes:
<tfoot>is not required to be put at the end in the
<table>element, you can also put it after the
<thead>element, the browser will also render it at the bottom of the table.
- In fact,
<tbody>is always included in every table, if you don’t add
<tbody>yourself, browsers will add it for you.
Simply put another complete
<table> inside another
<th>, for example:
|Heading 1||Heading 2|
|Data 1||Data 2|
There are around 253 million people living with visual impairment according to WHO data in 2017
Tabular data reprensted in table make it easy for us to find the information we want, but unlike plain text, it’s not easy for visually impaired users to get information quickly from a table, nevertheless, with proper markup, we can replace these visual associations by programmatic ones.
Techniques to make the table as accessible as possible are talked below.
With columns and rows headers created with
<th>, screenreader users can interpret the table based on these two coordinates similarly to how a sighted user does.
scope attribute can be added to the
<th> element to tell screenreaders is the
<th> a header for the row it is in, or the column.
scope can be set to
rowgroup, look at the example below:
An alternative to using the
scope attribute is to use the
headers attribute, you can a unique
id to each
<th>, then for each
<td>, you add a
headers attribute consisting a list of
id seperated with space to specify its coordinates.
This method creates a very precise associations between headers (
<th>) and data cells (
<td>), but it use a lot more markup, the
scope attribute is
usually enough for most tables.
If there are headers creates with
headers attribute of
<td>s may have more than 2 words.