Problem/Motivation

The WYSIWYG editor has a useful ARIA "application" landmark role, but the label supplied for it includes an unfriendly machine name deriving from the Field API machine name. This is potentially confusing for users who rely on (or otherwise make use of) the ARIA landmarks.

The following code sample appears inside the text editor for the Body field on the default article content type at node/add/article, nested inside div.edit-body-wrapper. The human-readable label is provided by use of an 'aria-labelledby' attribute. The label reads "Rich Text Editor, edit-body-0-value".

<div lang="en" aria-labelledby="cke_edit-body-0-value_arialbl" role="application" dir="ltr" class="cke_1 cke cke_reset cke_chrome cke_editor_edit-body-0-value cke_ltr cke_browser_gecko" id="cke_edit-body-0-value">

<span class="cke_voice_label" id="cke_edit-body-0-value_arialbl">Rich Text Editor, edit-body-0-value</span>

Proposed resolution

Change this label to use the human-readable field name, e.g. "Rich Text Editor, Body field."

We'll need to investigate how this label can be assigned programmatically by Drupal.

Files: 
CommentFileSizeAuthor
#24 2292035-24-aria-label-voice-over-fixed.patch856 bytesmgifford
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,766 pass(es). View
#22 2292035-22-aria-label-voice-over-fixed.patch855 bytesDimitriV
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2292035-22-aria-label-voice-over-fixed.patch. Unable to apply patch. See the log in the details link for more information. View
#20 2292035-20-aria-label-voice-over-fixed.patch858 bytesDimitriV
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 27,908 pass(es), 10,626 fail(s), and 1,609 exception(s). View
#18 2292035-18-aria-label-voice-over-fixed.patch845 bytesDimitriV
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,765 pass(es). View
#16 2292035-16-aria-label-voice-over-fixed.patch676 bytesDimitriV
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,763 pass(es). View
#7 2292035-lmlabel.png75.6 KBdavidhernandez
#6 Screen Shot 2014-07-12 at 11.13.55 PM.png216.15 KBmgifford
#3 wysiwyg-aria-2292035-3.patch4.62 KBmgifford
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Setup environment: Test cancelled by admin prior to completion. View
#1 body-field-application-landmark.png113.65 KBandrewmacpherson

Comments

andrewmacpherson’s picture

Screenshot to illustrate the Application landmark on a node edit screen.

I'm coming at this as a sighted keyboard user, using the Landmarks Firefox add-on to navigate regions. The screenshot shows the GUI interface provided by this Firefox add-on. Various screen-readers provide comparable means of navigating by landmark.

The landmark for the Body field wysiwyg is identified as "application: Rich Text Editor, edit-body-0-value".

andrewmacpherson’s picture

Issue summary: View changes
mgifford’s picture

FileSize
4.62 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Setup environment: Test cancelled by admin prior to completion. View

This is a tricky one, but I can't see where else it would be. I haven't tried this in a new install, but..

mgifford’s picture

Status: Active » Needs work

Nope.. that doesn't fix it..

davidhernandez’s picture

So this is grabbing the form element's ID, which isn't going to be changed, right? Combined with the fact that it is coming from a vendor asset, is there really anything that can be done? Wouldn't this have to be a fix requested in the CKEditor project?

mgifford’s picture

I just checked it out in the CKEditor demo and it's the same issue there.

http://ckeditor.com/demo

Before marking an accessibility bug here http://dev.ckeditor.com/query?status=!closed&component=Accessibility

What do we want CKEditor to do?

There may be multiple machine names.

Rather than saying:
<span id="cke_editor1_arialbl" class="cke_voice_label">Rich Text Editor, editor1</span>

Would it be better to:

  • Define which Rich Text Editor
  • Pull a name from the label for the input field rather than just the ID
  • Include different information if there were more than one Rich Text Field available

What else?

davidhernandez’s picture

FileSize
75.6 KB

From a user standpoint, using "Rich Text Editor" I think is better than "CKEditor" which a user won't understand.

Pulling it from the label would probably be ideal, as it is already there.

<label for="edit-body-0-value">Body</label>

If there is more than one, it already increments, though in reverse order? 3, 2, 1 ...

Wim Leers’s picture

Title: WYSIWYG editor has unfriendly machine_name in ARIA label. » CKEditor uses the automatically generated ID attribute for the body field in the ARIA label
Assigned: Unassigned » Wim Leers
Issue tags: +CKEditor in core, +Spark

The root cause for this is that CKEditor generates Rich Text Editor, <editor's name attribute> as the label. And the editor's name is http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-name, which in turns is retrieved/generated as follows:

Note: It will be originated from the ID or name attribute of the element, otherwise a name pattern of 'editor{n}' will be used.

I'm talking to the CKEditor developers to figure out the correct way to solve this.

Wim Leers’s picture

Status: Needs work » Postponed
Issue tags: +Needs upstream bugfix

Most likely, we've found a bug in CKEditor. The ARIA label should use the editor's "title", which is configurable, but it turns out it's using the editor's "name", which we cannot configure. I filed a CKEditor ticket: https://dev.ckeditor.com/ticket/12204, where you can find more details.

(Changing the name attribute in Drupal is not an option, because the label may contain characters that are invalid for the name attribute.)

Marking as postponed because this is blocked on an upstream issue.

Reinmar’s picture

The bug in CKEditor has been fixed. It will be included in next week's CKEditor 4.4.4.

Wim Leers’s picture

Lovely! I'll roll a patch here once 4.4.4 is released, but I'll first need to update Drupal 8's CKEditor to 4.4.4 then :)

mgifford’s picture

@Wim Leers - is there an existing issue for that? Would be great to ensure that D8 gets released with 4.4.4.

Wim Leers’s picture

Wim Leers’s picture

Status: Postponed » Active
Issue tags: -Needs upstream bugfix

#2271051: Update CKEditor library to 4.4.4 landed, so now this is unblocked! :)

DimitriV’s picture

Status: Active » Needs review
Issue tags: +Amsterdam2014
FileSize
6.82 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,856 pass(es). View

Changed the title of the editor to next format: Rich Text Editor, {label of attached field} field

DimitriV’s picture

FileSize
676 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,763 pass(es). View

Forgot patch#15, attached the new version!

Wim Leers’s picture

Assigned: Wim Leers » Unassigned
Status: Needs review » Needs work
+++ b/core/modules/ckeditor/js/ckeditor.js
@@ -11,6 +11,9 @@
+      var label = $('label[for=' + element.getAttribute('id') + ']').text();
+      format.editorSettings.title = Drupal.t("Rich Text Editor, !label field", {'!label': label});

Looks great!

But let's add a comment to explain that this is the label used by screenreaders.

Perhaps something like Set a title on the CKEditor instance that includes the text field's label, so that screen readers say something that is understandable for end users.
?

DimitriV’s picture

Status: Needs work » Needs review
FileSize
845 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,765 pass(es). View

Added the comment to the patch.

Wim Leers’s picture

Status: Needs review » Needs work

Just one more nitpick round…

+++ b/core/modules/ckeditor/js/ckeditor.js
@@ -11,6 +11,11 @@
+      //Set a title on the CKEditor instance that includes the text field's label,
+      //so that screen readers say something that is understandable for end users.

Please change to one leading space and wrap at 80 cols.

DimitriV’s picture

FileSize
858 bytes
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] 27,908 pass(es), 10,626 fail(s), and 1,609 exception(s). View

Changed the comments layout

Wim Leers’s picture

+++ b/core/modules/ckeditor/js/ckeditor.js
@@ -11,6 +11,13 @@
+      // for end users.
+
+      var label = $('label[for=' + element.getAttribute('id') + ']').text();

You added this blank line, which sadly needs to be removed. Hopefully this is the last reroll!

DimitriV’s picture

Status: Needs work » Needs review
FileSize
855 bytes
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2292035-22-aria-label-voice-over-fixed.patch. Unable to apply patch. See the log in the details link for more information. View

No blank line anymore

Status: Needs review » Needs work

The last submitted patch, 22: 2292035-22-aria-label-voice-over-fixed.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review
FileSize
856 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 78,766 pass(es). View

just re-rolled #22.

Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +Quick fix

The last submitted patch, 20: 2292035-20-aria-label-voice-over-fixed.patch, failed testing.

The last submitted patch, 22: 2292035-22-aria-label-voice-over-fixed.patch, failed testing.

The last submitted patch, 20: 2292035-20-aria-label-voice-over-fixed.patch, failed testing.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 24: 2292035-24-aria-label-voice-over-fixed.patch, failed testing.

The last submitted patch, 3: wysiwyg-aria-2292035-3.patch, failed testing.

Status: Needs work » Needs review
Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community
alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 1e727b3 and pushed to 8.0.x. Thanks!

  • alexpott committed 1e727b3 on 8.0.x
    Issue #2292035 by DimitriV, mgifford | andrewmacpherson: Fixed CKEditor...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.