Thursday, February 6, 2014

Drupal - Accessibility: ways of adding language attributes to parts of your text that differ from the main page language

 One of the accessibility rules, especially targeted to screen readers, is that text parts written in a language different  from  the main page and navigation language should  be tagged (or more correctly 'attributed') with this other language, so the screen readers know when to use what language.

I remember the fun we had on the Institute for Plasmaphysics Rijnhuizen (Nieuwegein, the Netherlands) making the first Macs with screenreaders   read out  a Dutch text. As the reader was only able to read english texts a perfectly readable Dutch text came out as Jibberish spoken by someone who's been drinking Jenever (dutch booze) all day while eating a tuna-sandwich.....

Here I show two ways how to achieve this, (that is adding the attributes to the tags, not the tuna-sandwich part).
Case 1 in Drupal 6 wysiwyg with Tinymce, and Case 2 in Drupal 7 with CKEditor.  Goal is to select a part of the html,  and add a language attribute. Or to the containing tag or to add a span tag...

        <tag>Lorem ipsum and so forth</tag>

should become

      <tag lang="en">Lorem ipsum and so forth</tag>

CASE 1      Drupal 6                                                

D6 site, with the WYSIWYG module using tinymce
1. Add html attributes button to your RTE
1.1 Go to Administer > Site configuration > wysiwyg profiles
1.2 edit any of the profiles where you want the users to be able to add the language attribute
1.3 Open 'Buttons and plugins'
1.4 Check 'HTML attributes'
1.5 Save

Result: How to add a language identifier
In your browser you can now find a new button

a. Select part of a text and click this button
This opens up a popup screen where you can add attributes

b. Behind language add the language identifier for the language usedf.i. en (english), nl (dutch) etc.
See also
c. Click insert
And the language identifier is added to the tag containing the textpart.
If you add an identifier to a part where a mother tag already contains the same language identifier, the identifier is not added. This seems logical because there is no need for this identifier at all.

Problem: adding lang attribute to inline tags
You cannot add attributes to inline tags like <span>
This is really annoying cause you have lots of cases where the other language words or sentences are inline with the other text. Like when I tell you the Dutch word for annoying is irritant.

Solution: use <em>
But a solution is to use the <em> tag and css. The html attributes will be added to the <em> tag.
a. First make the text part italic!
b. Then select part of the inside italic text, not all, and add the language identifier.
c. Save

If you select the whole italic part (including the em tags), the system will find the nearest containing tag and add the language identifier to that one.
d. To avoid the other language being shown as italic, you can target this em element with the language selector in the css.

So like when you main language identifier is english

          em:lang(nl),em:lang(fr), em:lang(ge)


Adding the em:lang(en) in the above css would change all em to normal, because the language selector simply looks for any language identification, may it be in the tag itselve, or in the header of the document like <html lang="en" dir="ltr" xml:lang="en" xmlns="">

<em lang="zh-Hant">希望對您有所助益<em>

There is a major problem in Drupal concerning these attributes. From the accessiblity viewpoint, it should be very simple to add a language attribute to every element. But I have to figure out yet how to add a language attribute to a field like the title. (Or the resulting display of this in a nodereference rendering)
There are two language layers here you have to consider: The field language, which simply identifies in which languagepart of the site you want this field to show up, so in case of content translation this is the context language of the container entities, in case of field translation it is the [lang] part of the field.
For instamce, Being Dutch have nodes with partly Dutch and English titles: "Presentatie resultaten onderzoek 'Designed to Last' op 8 oktober 2014".
Trying to convince my governmental organisations to change the titles of their reports to solid Dutch does not work, so I have to deal with this. The result should be

<h1>Presentatie resultaten onderzoek <span lang="en" xml:lang="en">'Designed to Last'</span> op 8 oktober 2014</h1>

I solved it using a jquery on the specific nodes with these kinds of titles, but thats rather an unsatisfying solution.

CASE II : Drupal 7                                                   

So, I figured out how to do this in Drupal 7 with CKEditor.  There is a CKEditor plugin you can install and download
Of course, because why should  life be easy, there are some irritating bugs or features or whatever....

0. Plugin
You can download the plugin from here

In the example hereunder my module path  is
and I've installed the ckeditor itself in

1. Now make a folder 'languages' in 

2. put plugin.js and icon.png in this folder

3. open ckeditor.config.js in the root of your module and add these lines

= 'languages';
    // The languages you want to support (code:name).
    config.language_list = [ 'de:German''fr:French', 'es:Spanish', 'it:Italian', 'en:English' ];

NB! This is different from the installation instructions on GIThub.

4. Clear your Drupal cache AND clear your browser cache
(the ckeditor does not clear its javascript files on the normal Drupal cache clear)

5. Go to your CKEditor settings and add the languages button to your editor
(In an older version the visual UI did not work, but the manual did. Now this seems ok)

6. Content filters
You'd probably might have to change you content filters to allow for these attributes, but apart from that it should work. I had to add

     p h1 h2 h3 h4 em span [*]

under the extra allowed content in the ckeditor setting for my filtered and full html
For more infor on this see!/guide/dev_allowed_content_rules

7. Rejoice in many languages
And yes, ganz lustig,  it works

    And yes, <span dir="ltr" lang="de" xml:lang="de">ganz lustig</span>, it works

No comments:

Post a Comment