CKeditor5 table head scope

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? 🙏

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.

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 😊

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.

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

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.

As an accessibility expert, I am also disappointed that the scoping of tables somehow went away in CKEditor 5. I can confirm, however, that @watergate solution works to bridge this gap. This should be included in Core moving forward though.