Optimizing Accessibility of HTML Table Elements

Optimizing Accessibility of HTML Table Elements - What counts with optimizing the accessibility of html table elements? What is meant by optimizing the accessibility of html table elements is optimizing the use of attributes that should exist in html tables such as caption, row, column etc. to clearly define table elements to the user.

For example, most users might use screen reader technology when accessing your web page, if the table elements do not have accessibility attributes as I meant above, then screen readers cannot define or voice tables of data well to the user so that it seems confusing.

I have noticed many websites that do not care about the accessibility of their website, even though sometimes a small portion of website visitors are people with special needs.

Therefore, now in this article I will explain how it should create an html table so that it has good accessibility because this is very useful for all users.

Mandatory HTML Table Property

The <table> html element must contain a caption and vealue that defines the contents of the data table
The <th> element must have a scope attribute
All <th> elements and elements with role = "columnheader" or role = "rowheader" must have an associated data cell or value.

Best practice

The <th> element cannot use the header attribute
The <th> element should only be used when there is one row and one column header
The <th> element in the teble or thead header must have the scope = "col" attribute
The <th> element in the tbody table body must have the scope = "row" attribute

Consider the following example;

From the html structure above the table will look like this;

<table class="data">
<caption>Greensprings Running Club Personal Bests</caption>
<thead>
<tr><th scope="col">Name</th><th scope="col">1 mile</th><th scope="col">5 km</th><th scope="col">10 km</th></tr>
</thead>
<tbody>
<tr><th scope="row">Mary</th><td>8:32</td><td>28:04</td><td> </td></tr>
<tr><th scope="row">Betsy</th><td>7:43</td><td>26:47</td><td> </td></tr>
<tr><th scope="row">Matt</th><td>7:55</td><td>27:29</td><td> </td></tr>
<tr><th scope="row">Todd</th><td>7:01</td><td>24:21</td><td> </td></tr>
</tbody>
</table>

The structure of the table elements follows the accessibility tree criteria and the actual html table data structure requirements, but I created a small error there, if there is no data attached, the element should contain values for example; no data or empty as follows;

<table class="data">
<caption>Teks Table Caption Disini </caption>

<thead>
<tr><th scope="col">Name</th><th scope="col">1 mile</th><th scope="col">5 km</th><th scope="col">10 km</th></tr>
</thead>
<tbody>
<tr><th scope="row">Mary</th><td>8:32</td><td>28:04</td><td>empty</td></tr>
<tr><th scope="row">Betsy</th><td>7:43</td><td>26:47</td><td>empty</td></tr>
<tr><th scope="row">Matt</th><td>7:55</td><td>27:29</td><td>no data</td></tr>
<tr><th scope="row">Todd</th><td>7:01</td><td>24:21</td><td>empty</td></tr>
</tbody>
</table>

Thus the article about accessibility trees, namely "Optimization of Accessibility of HTML Table Elements, There are many factors that affect website accessibility trees.