Make Editor title configurable again to fix accessibility issues

[jonbot]

📝 Provide a description of the new feature

For accessibility reasons, it would be great if CKEditor's voice-label <label> element could be configurable so that it could reflect the name of the field that CKEditor is replacing.

Screen readers read the "voice label" <label> value that is generated by CKEditor, which is always "Rich Text Editor."

For example, this instance:

has this <label>:

<label class="ck ck-label ck-voice-label" id="ck-editor__label_e94ba4e316f3b958963791e09f1ad2e78">Rich Text Editor</label>

For users who rely on screen readers, it would be much more helpful if the reader uttered "Comment," and not "Rich Text Editor." (See https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html, https://wcag.com/developers/3-3-2-labels-instructions.)

This value was made configurable in CKEditor4 with the config.title property: https://dev.ckeditor.com/ticket/12204.

After digging through CKEditor5 docs, I have not found a similar feature. I realize that the architecture of CKEditor 5 is vastly different than 4, but my proposal would be that the editor title/voice label be a configurable value -- if at all possible.

Additionally, the aria-label on <div class="ck-content" ...> should be removed. aria-label is only necessary if there is not an associated <label> tag. The effect of having both the <label> and the aria-label is that both are read by the screen reader -- which is confusing.

What is the expected behavior of the proposed feature? A developer could add a title config value to the editor's create() method, and the generated voice label element would contain that title.

Something like:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
    title: 'My Editor Title',
} )
...

would generate:

<label class="ck ck-label ck-voice-label" id="[some_id]">My Editor Title</label>

Additionally, the aria-label would be removed from the ck-content <div>:

[Edit: removed code example.]

Edit 10/20/23: After some further research, I see that the aria-label is important for multi-root editors. So, I've removed that part of this request.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[CharlesBelov]

I respectfully suggest this be a sitewide configuration setting, that the WYSIWYG would always use the visible field name as the label.

[wimleers]

This is also affecting Drupal, and we're working on adding a work-around until this is fixed: https://www.drupal.org/project/drupal/issues/3426798.

[wimleers]

Also, I would argue that type:feature is wrong here; it should be type:bug. 😅

[jannakha-copy-01]

+1 this issue fails WCAG 2.1 A: Success Criterion 4.1.2 - Name, Role, Value (label doesn't indicate the real name of the field)