Définir la langue d'une entrée HTML

L'utilisation de l'attribut lang (et xml: lang en XHTML) est la bonne manière.

Cependant, tous les lecteurs d'écran ne prennent pas en charge lang , et pour ceux qui le prennent en charge, toutes les langues ne sont pas nécessairement prises en charge.

Si le lecteur d'écran prétend le prendre en charge, mais que cela ne fonctionne toujours pas, vous pouvez essayer d'ajouter un conteneur div avec l'attribut lang (en prenant simplement un supposition sauvage ici, peut-être que le lecteur d'écran a des problèmes lorsqu'il n'est spécifié que sur l'élément textarea ).

(Notez que le placeholder de la textarea allemande doit également être en allemand.)

Vous le faites correctement, mais à moins que vous n'ayez installé différentes langues avec votre lecteur d'écran, vous n'entendrez peut-être pas de différence. Vous n'avez pas mentionné le lecteur d'écran que vous utilisez.

Avec VoiceOver, du moins sur iOS, je pense que vous obtenez la plupart des langues par défaut. Je ne suis pas sûr de VoiceOver sur Mac. Avec NVDA et JAWS , je suis presque sûr que vous devez installer des modules linguistiques.

Les éléments suivants changent tous automatiquement de langue. Il fonctionnait avec VoiceOver sur iOS.

<div lang="fr">
  <label for="frinput">c'est en français</label>
  <textarea id="frinput"></textarea><br>
</div>

Notez que l'attribut lang se trouve sur et non sur le car c'est la zone de texte qui reçoit le focus. Il y a cependant quelques nuances avec VoiceOver. Si j'utilise le geste normal de balayage vers la droite pour naviguer dans les champs, le focus se déplace d'un champ à l'autre et j'entends le changement de langue. Mais si je tape directement sur l'étiquette et que je mets le focus dessus, alors l'étiquette elle-même est lue en anglais, car le n'a pas d'attribut lang . p>

Dans votre cas, vous avez le comme conteneur, donc si la langue est sur le conteneur, alors tout ce qu'il contient aura aussi la langue. Donc, ce qui suit fonctionne aussi:

<label for="frinput" lang="fr">c'est en français
  <textarea id="frinput"></textarea><br>
</label>

Lorsque le focus se déplace vers le champ, il est lu en français. Si je tape intentionnellement sur l'étiquette elle-même, elle est également lue en français.

Si je voulais que mon premier exemple de code fonctionne, avoir le et le en tant que frères et sœurs, alors je pourrais avoir un conteneur

<label for="eninput">this is in english</label>
<textarea id="eninput"></textarea><br>

<label for="deinput">das ist in deutsch</label>
<textarea id="deinput" lang="de"></textarea><br>

<label for="frinput">c'est en français</label>
<textarea id="frinput" lang="fr"></textarea><br>

<label for="ruinput">это по-французски</label>
<textarea id="ruinput" lang="ru"></textarea><br>

Les lecteurs d'écran ne devinent pas ou ne détectent pas automatiquement la langue d'une chaîne, mais ont besoin de l'attribut HTML lang afin d'utiliser le moteur de synthèse vocale approprié ou la table Braille (ou les deux). (Je n'ai jamais vu la prise en charge du lecteur d'écran pour l'attribut xml: lang de XHTML qui est mentionné dans l'une des autres réponses.) Le L'attribut lang peut être utilisé sur n'importe quel élément, y compris les éléments de formulaire et leurs étiquettes.

Par exemple, vous pouvez utiliser le code suivant dans un document où lang = "en" est déjà défini sur un élément ancêtre tel que 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>

Quelques autres commentaires:

• Vous n'avez pas besoin de aria-label sur les éléments label ; un élément label étiquette un élément de formulaire et n'a pas besoin d'étiquette pour lui-même.
• Vous pouvez envelopper l'étiquette autour d'un élément de formulaire, mais son utilisation comme élément frère devrait vous donner plus de contrôle sur le placement (par exemple, à côté ou au-dessus de la zone de texte) au moyen de CSS.
• JAWS semble "permettre le changement de langue avec tout synthétiseur vocal pris en charge" (voir Langues avec JAWS et MAGic sur Internet ). Ça n'a pas toujours été le cas; il fut un temps où le changement automatique de langue fonctionnait uniquement entre les moteurs de synthèse vocale de la même marque (et non de toutes les marques).
• Dans NVDA, le changement automatique de langue doit fonctionner avec Vocalizer pour NVDA et avec une version d'Eloquence prenant en charge le changement de langue . li>
• De nombreux utilisateurs de lecteurs d'écran sont habitués à écouter des textes en langue étrangère prononcés par un synthétiseur vocal dans leur langue maternelle.
• Le changement de langue n'affecte pas seulement la synthèse vocale, mais également la table Braille chargée pour l'affichage Braille. Étant donné que les codes de ponctuation en braille varient d'une langue à l'autre, le changement automatique de langue n'est pas nécessairement un avantage pour les utilisateurs de l'afficheur braille.