Contrib.social

[table] CKeditor5 table head scope

Open on Drupal.org →
Created on 11 March 2024, 10 months ago
Updated 18 September 2024, 3 months ago

Problem/Motivation

When creating a table inside CKeditor5 the tables head doesn't get a scope. This is neccessary to make the table fully accessible.
When creating a simple table I get this HTML:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Head 3</th>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
  </tbody>
</table>

Where it should be:

<table>
  <thead>
    <tr>
      <td>&nbsp;</td>
      <th scope="col">Head 1</th>
      <th scope="col">Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Head 3</th>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
  </tbody>
</table>

Is there a setting I've missed? Hope this can be fixed. This did work in CK4

✨ Feature request
Status

Active

Version

11.0 🔥

Component
CKEditor 5  →

Last updated 2 days ago

Created by

🇳🇱Netherlands zebda

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @zebda
  • Status changed to Postponed: needs info 10 months ago
  • Comment 10 months ago →
    🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    AFAICT this is a duplicate/subset of 🐛 [upstream] [Table] CKEditor 5 changes and keeps only a single , which impedes screen reader accessibility of HTML tables Postponed ? 😊

    Could you please confirm? 🙏

  • Comment 10 months ago →
    🇳🇱Netherlands zebda

    I don't have the feeling this is the same. The issue you are referring to is about pasted in code been scrambled. My issue is about code CKEditor delivers that is not accessible.

    I create the table using the CKEditors interface not using code. I can add the scope attribute manually but I don't want to bother my users with this. This should work by default.

  • Comment 10 months ago →
    🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    The "pasting" part is not crucial for the steps to reproduce. It's just included in the steps to reproduce to make it easy to reproduce. See the linked upstream issue 😊

  • Comment 10 months ago →
    🇳🇱Netherlands zebda

    Okay but still complete issue and the upstream issue is about code being scrambled. Mine is about CKEditor not outputing the right accessible code in the first place. Its not scrambling the code it is just not present. I found one mention on the upstream issue about this but I don't know if this is highlighted enough or will be fixed when the upstream issue is fixed.

  • Status changed to Active 8 months ago
  • Comment 8 months ago →
    🇨🇦Canada andrew.wang

    I second that this issue might be unrelated to #3384400, which is about CKEditor 5 mangling an existing table that might already have the scope attribute in the markup.

    On the other hand, this issue is an accessibility issue and can be reproduced from scratch, without any existing markup. CKEditor should automatically add the scope attribute to <th> elements for accessibility reasons when defining a row or column as header using the toolbar. This used to work in CKEditor 4, but is absent in CKEditor 5. Although we can go to source mode and add scope attribute to <th> elements manually, tables with header rows and/or header columns created using only WYSIWYG are by default inaccessible.

    In addition to the GitHub comment mentioned in #5, there’s a separate upstream issue about this accessibility issue on GitHub: https://github.com/ckeditor/ckeditor5/issues/3175

  • Comment 7 months ago →
    🇺🇸United States xjm
  • Comment 3 months ago →
    🇳🇱Netherlands watergate

    We stumbled upon this problem and created a text filter plugin. So, it is not a direct solution to get this scope attribute to be applied correctly by CKEditor, but it might be a helpful workaround (with the additional benefit that it isn't restricted to only CKEditor). See Table Header Scope Attribute

    At this moment, it uses a basic/simple strategy to set scope="col" and scope="row" to <th> elements. It covers our use cases, but there is room for improvement.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024