Heading rows and columns might be missing markup in the view.

[jodator]

The heading rows and heading columns cells should have "scope" attribute set for accessibility reasons:

Screenreaders will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.

Example proper markup of a table with one heading

<table>
	<thead>
		<tr>
			<th scope="col">a</th>
			<th scope="col">b</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">c</th>
			<td>d</td>
		</tr>
	</tbody>
</table>

[Reinmar]

I'm not adding it to iteration 18 as this is not crucial for MVP. But it's something to be added rather ASAP :D

[dtwist]

Since you're discussing markup: I posted these styles in ckeditor/ckeditor5#3161 earlier as an exploration of @oleq's default table design: https://codepen.io/david-twist/pen/wjyGpo

In addition to scope attributes on cells, to get the vertical rule between the last column <th> elements, you also need <colgroup> elements with a class to differentiate between data and header columns [note: lone <col> elements have quirky support for classes, so instead always use <colgroup>, which are implied by a <col> anyhow ]:

<table class="ck-table">
  <caption>Single Column and Row Headers</caption>
  <colgroup class="ck-table_head-col"></colgroup>
  <colgroup class="ck-table_data-col" span="2"></colgroup>
  <thead>
    <tr>
      <td>&nbsp;</td>
      <th scope="col">Hot</th>
      <th scope="col">Cold</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Fire</th>
      <td>Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row">Ice</th>
      <td>&nbsp;</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

I mention this because it is tangentially related, but—irrespective of using them as styling hooks—colgroups are important for A11y. See WAI docs here: https://www.w3.org/WAI/tutorials/tables/

You also want to take care to create multiple <colgroup>s and set scope="colgroup" when you have any cells with colspan > 1:

<table class="ck-table">
  <colgroup class="ck-table_head-col"></colgroup>
  <colgroup class="ck-table_data-col" span="2"></colgroup>
  <colgroup class="ck-table_data-col" span="2"></colgroup>
  <thead>
    <tr>
      <td rowspan="2"></td>
      <th colspan="2" scope="colgroup">Mars</th>
      <th colspan="2" scope="colgroup">Venus</th>
    </tr>
    <tr>
      <th scope="col">Produced</th>
      <th scope="col">Sold</th>
      <th scope="col">Produced</th>
      <th scope="col">Sold</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Teddy Bears</th>
      <td>50,000</td>
      <td>30,000</td>
      <td>100,000</td>
      <td>80,000</td>
    </tr>
    <tr>
      <th scope="row">Board Games</th>
      <td>10,000</td>
      <td>5,000</td>
      <td>12,000</td>
      <td>9,000</td>
    </tr>
  </tbody>
</table>

[baerkins]

Any update on the status of this? Or another way for a content author to easily add the scope attribute?

Thanks!

[madhaze]

scope="col" and scope="row" are accessibility issues and get flagged by accessibility scans. It seems like this should be tagged with accessibility.

Example from Level Access scan

HTML Element:

Mixtape Description

One or more th elements that is in a table in which other elements contain scope attributes set to non-null values, excluding those elements with a rowspan or colspan attribute set to a value of '0'; or '2' or more, without an ARIA-assigned role, not intentionally hidden in the DOM and available to assistive technologies, does not have a scope attribute set to a text value of 'row' or 'col'.

Why it matters

Without an appropriate scope attribute on table header cells, header and data cells will not be properly associated as the correct header will not be clear. When data cells are not properly associated with header cells, users of assistive technology may not be able to reliably identify headers and navigate data tables.

What to do

Set the scope attribute to either scope=col (column headers) or scope=row (row headers). Tables that use scope to associate data and header cells need to use this scope approach to associate all data and header cells and must not mix use of scope and use of id and header attributes to associate header and data cells.

[jonnyhocks]

Hi all, dropping in here to see if there is any update on this or if anyone has a solution for getting these attributes added?

Thanks in advance 👍

[Witoso]

From our side, we haven't done it yet, but with General HTML Support enabled those attributes are preserved.

[jonnyhocks]

Thanks for the quick response; I noticed there was a 'yet'! Would that mean there is a roadmap for it?

[Witoso]

There's always some roadmap :) This most likely would be a part of some larger initiative around the table enhacements but we don't have timeline for it right now.

[chrisrhymes]

Sorry if I misunderstand, but it seems that CK Editor 4 had this scope functionality added to tables previously. https://github.com/ckeditor/ckeditor4/issues/5084

Is it possible to get this added to CK Editor 5 using a similar method? Thanks.

[Witoso]

CKEditor 5 is an entirely different editor with a different engine implementation. Unfortunately, we cannot port this feature quickly.

[nathanv]

@Witoso If you could give us some hint on how your team intended on tackling this, I could take a stab at implementing this!