Open DannyLancaster opened 2 years ago
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)
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?
(bear in mind I seem to have come down with a bit of a head cold so may not be thinking straight :D )
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
Aah ok thanks for clarifying! Makes sense. ☺️
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 🥚 😄
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
Explanation of the code example
<caption>
element)<th>
element)<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: