Implement Language toolbar button to support WCAG 3.1.2 Language of Parts

[Anna Tomanek]

Reported on the ​community forum.

We are working on making Drupal 7 WCAG 2.0 compliant. The guidelines for accessibility (WCAG 2.0 AA) asks users to mark changes in languages in a text ( ​http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html). For that, users needs to be able to select a human language to set the language attribute. When CKEditor is used as WYSIWYG-editor, there is a need to make CKEditor WCAG compliant.

CKEditor aims to be WCAG compliant (​http://docs.cksource.com/CKEditor_3.x/Accessibility), and has a great user interface. However, a language switch button is not built in yet (as far as I know).

As a workaround there is the attribute-button to fill in a language code. That's for users difficult to find. Users need to know the ISO 639-1 code for the language, and in certain situations they need to set RTL/LTR settings.Administrators might not want to give users access over all attributes.

Some while ago for the FCKeditor there was a language button plugin: ​http://sourceforge.net/tracker/?func=detail&aid=1729490&group_id=75348&atid=737639

Is there already thought of making such a button in core? If so, what should be the preferred UI?

[Hanno Lans]

Hope we can make this a feature. More info on languages and text directions: ​http://www.w3.org/TR/html401/struct/dirlang.html)

About the UI: there are several options: to provide a button for each language, to provide a button with a popup of languages like the symbols button, or a dropdownbox. I would suggest to provide a dropdownbox like we have for the fonts. This makes it possible to have a list of languages with the full name of the language and not the code nor a flag.

[Frederico Caldeira Knabben]

For now, a way to workaround this is, considering that you can predict the languages a user would be willing to use, adding entries for the languages to the Styles combo.

[Hanno Lans]

@fredck assuming that there is a defined list of possible languages is a right assumption. Most websites might need to have only 2-3 quotation languages besides there basic language. How could we add it to a style combo? If it works, is it possible to duplicate the functionality of the style combo as a language button? Would it be possble to add this into core as this functionality is needed for WCAG and ATAG?

[BarisW]

Subscribing. Any news on this?

[Hanno Lans]

Could this issue get labeled under the component 'accessibility' for better tracking?

[Frederico Caldeira Knabben]

I've just published a plugin for that:
​http://cksource.com/forums/viewtopic.php?f=18&t=24902

It uses <span> elements exclusively, but it does the job in terms of accessibility needs.

Comments are welcome at the plugin page.

[Nathalie Sequeira]

Replying to fredck:

​http://cksource.com/forums/viewtopic.php?f=18&t=24902

While this looks very promising, it seems the plugin is no longer functional in the CK 4 generation. This may be partially due to the fact that it requires additional plugins that are no longer included (Plugin:button) or not even available to add in as extras from the plugins directory (Plugin:styles). I actually went ahead and tried to add these to my 4.0.2 install (extracting the styles plugin from the last available 3.6.2 package), but, perhaps unsurprisingly, this did not go down well at all.

Being able to markup the language of parts is of essential importance for understandable screen reader output, since they will apply the correct pronunciation only if they can recognize foreign terms.

Thus, it is a very important accessibility feature for CK to have, and IMHO should be included in the "standard" package - and the priority of this ticket should actually be bumped up.

That said, how complex is it to update the languages plugin to work in CK 4.1 for someone who is already CK-savvy? ( I tried to look at it myself but I am lost lost lost! ;)

While in an ideal world the lang- attribute would get added to pre-existing elements if their entire content were to be marked as a foreign language (thus avoiding the creation of extra markup by adding spans to, say, a whole paragraph), I do feel that the importance of this feature by far outweighs the slight code bloat caused by the plugin's (described) current behavior of adding a span tag in any case.

Mostly, it is just one word or a phrase that is foreign language anyways! For comparison: TinyMCE by default adds language attributes to the containing element tag, which leads to results that are just wrong - thus making the functionality completely useless more often than not. Thus, the existing languages plugin definitely goes in the right direction.

Adding the ability to recognize pre-existing markup that corresponds exactly to the text to be marked as foreign language would then be something for future enhancement that however is not required for immediate usefulness.

My rant in a nutshell: could this please be implemented as soon as possible?

Though I currently feel overwhelmed to do it myself, I would gladly help in whatever way I can!

[Nathalie Sequeira]

Replying to calliandra:

That said, how complex is it to update the languages plugin to work in CK 4.1 for someone who is already CK-savvy? ( I tried to look at it myself but I am lost lost lost! ;)

I just discovered that updating the languages plugin so it will work in CKE v4.x is as simple as removing the line requiring the additional plugins.

What also needs doing is adding the translation of the title on the button to other languages. Otherwise, this plugin is ready for basic use!

[Hanno Lans]

Thanks for testing calliandra. I agree this should be a core functionality for a wysiwyg-editor being WCAG2 AA compliant. I am interested to know if this plugin has a chance to move to the official ckeditor library? Or is testing and discussion about the implementation needed?

[Jakub Ś]

@hannolans, version is used to indicate when problem started. Please don't change version number to show us problem still exists in latest CKE. We are aware of that.

[Hanno Lans]

Ok, sorry, I assumed this was needed as this discussion headed to the implementation for CK 4.1.

[Mike Gifford]

Weird. I would have assumed that the start date "Opened 23 months ago" would have been what folks would have used as an indicator.

Anyways, would love to see some progress on this.

[Hanno Lans]

Now CKeditor becomes in Drupal 8 in core and we are working on websites and editors being WCAG2.0 compliant, this is becoming a must have. In the Netherlands websites fail accessibility tests because the lack of these language attributes in texts. Is this button integration on the roadmap or could we help in the Drupal community to make this happen? Just added a new task for Drupal core ​http://drupal.org/node/1993928

[Wiktor Walc]

@hannolans - the languages plugin is on a short list of plugins that should land in core. I see that you're trying to enhance it to make it even more usable, that's perfect.

The use case for this plugin is pretty much the same among all sites, so the improvements you'll make for Drupal core project may have a lot of sense for a generic plugin as well.

[Hanno Lans]

Great news! We are so happy that this is planned in the 4.2 release. Yes, you're totally right, best is to integrate improvements in ckeditor as this would be a general improvement. The description and use cases of Typo3 might be helpful: ​http://typo3.org/extension-manuals/rtehtmlarea_manual/2.1.1/view/3/4/

[Piotrek Koszuliński]

I haven't read entire thread, so sorry if my comment won't make sense, but I wanted to point few things.

1. Toolbar button should indicate which language is currently used.
2. Attribute should be applied for a new element (most likely a span), but it would be nice if it was also possible to apply it to existing elements. E.g. entire paragraph/blockquote if entire blockquote is selected. If language button will be opening dialog, then we can add an option for choosing to which exactly element in selection's path the attribute will be applied.

[Satya Minnekanti]

adding myself to cc

[Matti Järvinen]

cc

[Marek Lewandowski]

Plugin my be reviewed at ​t/7987.

[Olek Nowodziński]

cc

[Frederico Caldeira Knabben]

I've committed a few changes.

Still some thing are missing:

• HDPI icon missing (wrong).
• testOnly_items is to be removed. It'll break tests with release.
• Missing styling in contents.css (similar to the original plugin).
• We must have all tests green.

[Marek Lewandowski]

• ​git:32d0257
• tests:641424b

Merged into major.

[Hanno Lans]

This is so great news fo accessibility. Thank you! We hope we can integrate this feature in Drupal 8.

[Mike Gifford]

Any movement on this?

[Marek Lewandowski]

Replying to mgifford:

Any movement on this?

This feature has been merged some time ago, and it's available in CKEditor full preset since version 4.3.

You can see it in ​our demo.

[Anna Tomanek]

As a matter of fact, we have a dedicated SDK sample for this feature: ​http://sdk.ckeditor.com/samples/language.html, the "Setting Text Part Language" section.

Note that this plugin is included in the Full preset only (or can be added to your custom build).

[Mike Gifford]

Arg, I just saw the post in 31 and didn't skip up to 30 so I missed that it was fixed.

Thanks for these links!