Best Practices for Accessible Tables and Graphs in Ebooks

Tables and graphs are an inherent part of many publications, such as research papers, textbooks or reports. They contain condensed information and enable readers to gather and analyse data quickly. However, they are a challenge for blind and visually impaired individuals – unless they are prepared correctly. In this article, we will explain why tables and graphs are so important and tell you how to make them accessible for screen reader users.

The Role of Tables and Graphs

Tables and graphs are key to presenting, analysing and comparing data. Blind individuals use these tools too, for example:

• Education

• Professional work

• Everyday life

The inability to access these resources means that blind individuals have fewer opportunities to learn or make conscious decisions.

However, better structured data would be beneficial for other groups of users as well:

• People with dyslexia – clearly marked headings and logical table structure make it easier to understand the data an ebook contains.

• People who use assistive technologies e.g. enlarging tools – people who have poor eyesight, and a growing number of people whose eyesight is worsening, who use enlarging tools will be able to gather information quicker and more effectively if it is marked correctly.

• People with cognitive distortions – correctly described graphs and tables will help them to think and analyze content more effectively

• People who use mobile devices (a large group of readers) – responsive and accessible tablesmake it easier to browse data on small screens, as it is no longer necessary to browse horizontally.

Table Structure

In order to make a table accessible, you have to mark it correctly in HTML code. In order to do so, you need to use correct markers and attributes which will help screen readers analyse a table’s structure.

It is important to remember to:

• Use the <table> marker to mark a table.

• Mark column and row headings using <th>, not <td>.

• Use the scope attribute to indicate whether a heading refers to a row (row) or a column <col>.

Example of an accessible table:

<table><tr><th>Product</th><th>Price</th><th>Availability</th></tr><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></table>

<table><tr><th>Product</th><th>Price</th><th>Availability</th></tr><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></table>

<table><tr><th>Product</th><th>Price</th><th>Availability</th></tr><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></table>

<table><tr><th>Product</th><th>Price</th><th>Availability</th></tr><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></table>

If a table’s structure permits it, it is good to use <thead> and <tbody> markers, which facilitate separating headings from table content.

Example of an accessible table:

<table><thead><tr><th scope="col">Product</th><th scope="col">Price</th><th scope="col">Availability</th></tr></thead><tbody><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></tbody></table>

<table><thead><tr><th scope="col">Product</th><th scope="col">Price</th><th scope="col">Availability</th></tr></thead><tbody><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></tbody></table>

<table><thead><tr><th scope="col">Product</th><th scope="col">Price</th><th scope="col">Availability</th></tr></thead><tbody><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></tbody></table>

<table><thead><tr><th scope="col">Product</th><th scope="col">Price</th><th scope="col">Availability</th></tr></thead><tbody><tr><td>Apples</td><td>5 zł/kg</td><td>Available</td></tr><tr><td>Oranges</td><td>6 zł/kg</td><td>Unavailable</td></tr></tbody></table>

Depending on how complicated the table is you may not need to use thead and tbody. It is most important to keep the structure clear and logical, which makes data easier to navigate.

Alternative Text and Detailed Descripions

People who use screen readers will also need:

• Alternative text (alt) – it should state what type of graph it is and what it portrays.

• A longer description (longdesc or included in text content) – a detailed summary of data, trends and conclusions.

Graph Description - Example:

“A line chart showing temperature changes in Warsaw throughout the year. The lowest temperature was -5°C in January, and the highest – 30°C in July. In spring and autumn temperatures are between 10-20°C.

This way, a blind individuals can access information, as it is not necessary to interpret a picture.

Tables Accessible for Everyone

As we have already mentioned, in order to make tables and graphs accessible for everyone, they have to be correctly marked and accompanied by text descriptions. Thanks to correct HTML markers, attributes and descriptions, blind individuals are able to use ebooks and other digital publications.

The examples described in this article highlight what we often say – that digital availability is not only imposed by law, it also helps you create ebooks more accessible and useful for all users.

Sources:

https://dostepnosc.pwr.edu.pl

https://docs.uci.pb.edu.pl/dostepnosc/dostepnosc.html

https://utilitia.pl/baza-wiedzy/tworzenie-dostepnych-dokumentow-elektronicznych-w-microsoft-excel/

https://bon.uew.pl/wp-content/uploads/sites/38/2024/07/04.-WCAG-Tabele-wykresy-i-wzory-matematyczne.pdf

The article was created in close collaboration between the Polish Foundation for the Blind and Visually Impaired "Trakt” and Have a Book.

Translated by Aleksandra Kallas