Internationalisation et localisation

Si vous lisez ceci, vous utilisez le World Wide Web. Vos formulaires peuvent être utilisés par des personnes parlant des langues différentes, par des personnes de différents pays ou par des personnes d'origines culturelles différentes. Découvrez comment préparer un formulaire pour l'internationalisation et la localisation.

Vérifier que votre formulaire fonctionne dans plusieurs langues

Voyons comment vous assurer que votre formulaire fonctionne avec différentes langues.

Pour que votre site soit prêt à être localisé, la première étape consiste à définir l'attribut de langue lang dans l'élément <html>. Cet attribut permet aux lecteurs d'écran d'invoquer la bonne prononciation et permet aux navigateurs de 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 pouvez-vous 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 pour décrire 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 faire en sorte que les outils de traduction le traduisent pour vous.

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

S'assurer que le formulaire fonctionne avec différents systèmes d'écriture

Les systèmes d'écriture et les jeux de caractères varient selon les langues. Certains scripts sont écrits de gauche à droite et d'autres de droite à gauche.

Rendre l'espacement indépendant du système d'écriture

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

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

La bordure épaisse se trouve maintenant sur le côté droit. C'est parce que nous avons défini la bordure à l'aide d'une propriété logique.

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

Apprenez-en plus sur les propriétés logiques.

S'assurer que votre formulaire peut gérer différents formats de nom

Supposons que vous ayez un formulaire dans lequel l'utilisateur devrait remplir 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. Alors, comment doivent-elles remplir le champ "Nom de famille" ?

Pour faciliter et accélérer la saisie des noms, et pour vous assurer que tout le monde peut le faire, quel que soit le format, 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, il est possible que votre nom soit signalé comme invalid dans certains formulaires. Lorsque vous créez des formulaires, veillez à autoriser tous les caractères possibles. Ne partez pas du principe qu'un nom ne contient que des caractères latins.

Autoriser différents formats d'adresses

Le siège social de Google se trouve 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. Le format d'adresse peut varier complètement selon votre pays. Comment pouvez-vous vous assurer que tous les utilisateurs peuvent saisir leur adresse dans votre formulaire ?

Vous pouvez utiliser des entrées génériques.

Découvrez d'autres façons de travailler avec les champs d'adresses internationaux.

Testez vos connaissances

Testez vos connaissances sur l'internationalisation et la localisation

Comment invoquer 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 de rédaction de votre site Web ?

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

Ressources