Internationalisation et localisation

Si vous lisez ceci, vous utilisez le World Wide Web. Vos formulaires peuvent être utilisés par des personnes qui parlent des langues différentes, des personnes de différents pays et des personnes ayant des milieux culturels différents. Découvrez comment préparer votre formulaire pour l'internationalisation et la localisation.

Vérifier que votre formulaire fonctionne dans différentes langues

Voyons comment vérifier que votre formulaire est compatible avec différentes langues.

Pour que votre site soit prêt pour la localisation, la première étape consiste à définir l'attribut de langue lang sur l'élément <html>. Cet attribut permet aux lecteurs d'écran d'appeler la bonne prononciation, et aide les navigateurs à proposer une traduction de la page si la langue définie n'est pas la langue par défaut du navigateur.

<html lang="en-us">

En savoir plus sur l'attribut lang

Imaginons que vous ayez traduit un formulaire en allemand. Comment vous assurer que les moteurs de recherche et les navigateurs sont informés de la version traduite ? Vous pouvez ajouter des éléments <link> dans le fichier <head> de votre site décrivant les autres versions.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Aider les utilisateurs qui parlent une autre langue à utiliser votre formulaire

Vous ne pouvez pas traduire votre formulaire dans toutes les langues, mais vous pouvez vous assurer que les outils de traduction le traduisent pour vous.

Pour que les outils de traduction traduisent bien le texte de votre formulaire, assurez-vous que tout le texte est défini en HTML et qu'il est visible. Certains outils fonctionnent également avec du contenu défini en JavaScript, mais pour améliorer la compatibilité, essayez d'inclure autant de texte que possible en HTML.

Vérifiez que votre formulaire fonctionne avec différents systèmes d'écriture

Chaque langue utilise des systèmes d'écriture et des jeux de caractères différents. Certains scripts sont écrits de gauche à droite, et d'autres de droite à gauche.

Rendre l'espacement indépendant des systèmes d'écriture

Pour vous assurer que votre formulaire fonctionne avec différents systèmes d'écriture, vous pouvez utiliser les propriétés logiques CSS.

L'épaisseur de bordure de l'entrée est de 1px de tous les côtés, sauf sur le côté gauche, où la bordure a une épaisseur de 4px. Maintenant, modifiez le CodePen et changez le système d'écriture de droite à gauche. en ajoutant dir="rtl" à l'élément <main> ;

La bordure épaisse est maintenant sur le côté droit. En effet, nous avons défini la bordure à l'aide d'une propriété logique.

input {
  border-inline-start-width: 4px;
}

En savoir plus sur les propriétés logiques

Vérifier que votre formulaire peut gérer différents formats de nom

Imaginons que vous ayez un formulaire dans lequel l'utilisateur doit saisir son nom. Comment ajouteriez-vous le champ à votre formulaire ?

Vous pouvez ajouter un champ pour le prénom et un autre pour le nom de famille. Cependant, les noms sont différents dans le monde entier. Par exemple, certaines personnes n'ont pas de nom de famille. Comment doivent-elles remplir nom de famille ?

Pour faciliter et accélérer la saisie des noms, et pour que tout le monde puisse saisir son nom, quel que soit le utilisez un seul champ de formulaire pour les noms dans la mesure du possible.

En savoir plus sur les noms personnels

Si votre nom contient des caractères non latins, vous avez peut-être rencontré le problème que votre nom était signalé comme invalid dans certaines formes. Lorsque vous des formulaires, assurez-vous d'autoriser tous les caractères possibles et ne partez pas du principe qu'un nom se compose uniquement de caractères latins.

Autoriser différents formats d'adresses

Le siège social de Google est situé au 1600 Amphitheatre Parkway, Mountain View, CA 94043, États-Unis.

Cette adresse comprend le numéro de rue, la rue, la ville, l'État, le code postal et le pays. En fonction de votre pays, le format des adresses peut être totalement différent. Comment vous assurer que tout le monde peut saisir son adresse dans le formulaire ?

Une méthode consiste à utiliser des entrées génériques.

Découvrez d'autres façons de travailler avec champs d'adresse internationale.

Testez vos connaissances

Testez vos connaissances en matière d'internationalisation et de localisation

Comment appeler la bonne prononciation pour les lecteurs d'écran ?

Avec l'attribut lang
🎉
Avec l'attribut hreflang
Essayez encore.
Ajouter une description indiquant la langue utilisée.
Essayez encore.
Avec l'attribut language
Essayez encore.

Comment pouvez-vous modifier le système d’écriture sur votre site web ?

Avec l'attribut direction
Essayez encore.
Avec l'attribut dir
🎉
Utilisation de propriétés logiques CSS
Essayez encore.
Utiliser l'élément <link>
Essayez encore.

Ressources