ATAG - Feature - Tables creator

[DannyLancaster]

Accessibility by default or built-in support for accessible content creation.

Tables are used online to show content in a structured way, just as in documents. Many authoring tools provide special functionality for creating tables to support the web author.

For visually impaired users with screen readers, the accessibility of tables is what makes them possible to understand, as it provides the structure of headings, columns etc. If a table is not created in a correct way, the assistive technology will read the content from left to right, without providing any clue as to how the content is supposed to be understood. For everyone else, the design of the table is important to make it easily readable and understandable.

An explicit connection between headings and cells will allow screen readers to read content in a logical order. The attribute scope on the th-element presents which data cells the headings belong to. Approved values are row, col, rowgroup and colgroup. The element colgroup will mark the column groups, as tbody will mark grouped rows. One option in expressing the relationship between cells is using the id-attribute on the th-element and the attribute headers on the td-element. Headers can consist of one or several identities on cell headings

Web interface: the end user view

Code of the end user view

<h1>Contact us</h1>
<p>You are welcome to contact us during our opening hours.</p>
<table>
<caption>Opening hours</caption>
<tbody>
<tr>
<td></td>
<thscope="col">Monday-Wednesday</th>
<thscope="col">Thursday-Friday</th>
<thscope="col">Saturday</th>
<thscope="col">Sunday</th>
</tr>
<tr>
<thscope="row">08:00-12:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<thscope="row">12:00-13:00</th>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<thscope="row">13:00-16:00</th>
<td>Open</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
</tr>
<tr>
<thscope="row">16:00-18:00</th>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
</tbody>
</table>

Explanation of the code example

1. Caption element - Defines a table caption (created with the <caption> element)
2. Header cell elements - contains header information (created with the <th> element)
3. Scope - Specifies whether a header cell is a header for a column, row, or group of columns or rows
4. Data cell elements - contains data (created with the <td> element)

Video documentation

https://youtu.be/cFdWqMkj9FM

Recommendations for implementation

To make sure the implementation of the features is not causing accessibility problems for web authors with disabilities:

• avoid drag-and-drop for choosing template, and/or always have a keyboard alternative;
• always provide one pointer alternative without specific gestures;
• always support keyboard navigation;
• consider keyboard shortcuts;
• do not rely on sensory characteristics as the sole indicator for understanding and operating content;
• do not indicate important information using colour alone;
• make sure there is enough contrast between text objects and its background colour.

[RachBreeze]

It should be noted that the TinyMCE does not provide accessible tables (even v6 https://www.tiny.cloud/docs/tinymce/6/advtable/ https://gyazo.com/bd04cd775749be2ad93ae0e77b758a7a)

[tiffy74]

It should be noted that the TinyMCE does not provide accessible tables (even v6 https://www.tiny.cloud/docs/tinymce/6/advtable/ https://gyazo.com/bd04cd775749be2ad93ae0e77b758a7a)

Don't they? I think the advanced tables may conflict with accessibility because they add in extra functionality -- but I think the basic TinyMCE provides accessible tables configured with a scope - or am I totally missing something?

[tiffy74]

(bear in mind I seem to have come down with a bit of a head cold so may not be thinking straight :D )

[RachBreeze]

They don't define table header scope and in complex tables there isn't an option for adding ids to columns and rows, to enable the column/ row name to be read out in the correct order by screen reader users

[tiffy74]

Aah ok thanks for clarifying! Makes sense. ☺️

[tiffy74]

They don't define table header scope and in complex tables there isn't an option for adding ids to columns and rows, to enable the column/ row name to be read out in the correct order by screen reader users

I actually ended up double-checking this by looking at how my editors were inserting tables - They were inserting tables using TinyMCE and then retrospectively editing the code to include the header row. I had always assumed that TinyMCE was doing this (which is why I questioned it).

After lecturing Niels about making assumptions... turns out I should practise what I preach! /egg on face 🥚 😄