Search code examples
htmlinternationalizationaccessibilitymarkup

Set the language of an HTML input

I am currently developing an app that handles translations. In the prototype, the app can handle translations from English to German.

Currently, I have <textarea> elements surrounded by <label> elements:

<label className="m-translation-card__native-field-label" 
       aria-label="Original (English)">
    English

    <textarea className="m-translation-card__native-field-input"
              placeholder="English translation"
              onChange="..." 
              value="..."
    />
</label>

<label className="m-translation-card__translated-field-label"
       aria-label="Translation (Deutsch)">
    Deutsch

    <textarea className="m-translation-card__translated-field-input"
              placeholder="German translation"
              onChange="..."
              value="..."                            
    />
</label>

When one navigates to the "English translation" textarea via keyboard, the screen reader will read aloud the textarea value attribute content in English. This makes sense - the lang attribute of the <html> tag is set to "en" - and is the intended functionality.

But, when one navigates to the "German translation" textarea, the screen reader again pronounces the textarea value attribute content in English - a pronunciation that is often far different to the correct German pronunciation. Ideally, the pronunciation would be in German.

I would like to add an attribute so that the screen reader is aware that the content of the second textarea is German. I have tried to use the lang="de" attribute, but it did not effect the pronunciation.

Is there a way to achieve this?

Solution

  • Screen readers do not guess or automatically detect the language of a string but need HTML's lang attribute in order to use the appropriate speech synthesis engine or Braille table (or both). (I have never seen screen reader support for XHTML's xml:lang attribute that is mentioned in one of the other answers.) The lang attribute can be used on any element, including form elements and their labels.

    For example, you can use the following code in a document where lang="en" is already set on an ancestor element such as html:

     <label className="m-translation-card__native-field-label" for="english-translation">English </label>
 <textarea id="english-translation" className="m-translation-card__native-field-input"></textarea>

 <label className="m-translation-card__native-field-label" for="german-translation">German </label>
 <textarea id="german-translation" className="m-translation-card__native-field-input" lang="de"></textarea>

    A few other comments:

    • You don't need aria-label on label elements; a label element labels a form element and does not need a label for itself.
    • You can wrap the label around a form element, but using it as a sibling element should give you more control about placement (e.g. next or above the textarea) by means of CSS.
    • JAWS appears to "provide language switching with any supported speech synthesizer" (see Languages with JAWS and MAGic on the Internet). This has not always been the case; there was a time when automatic language switching only worked between speech synthesis engines from the same brand (and not every brand).
    • In NVDA, automatic language switching should work with Vocalizer for NVDA and with a version of Eloquence that supports language switching.
    • Many screen reader users are used to listening to foreign language texts spoken by a speech synthesizer for their native language.
    • Language switching does not only affect speech synthesis but also the Braille table that is loaded for the Braille display. Since Braille codes for punctuation vary between languages, automatic language switching is not necessarily an advantage for Braille display users.