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 ?
hreflang
language
lang
Comment pouvez-vous modifier le système d’écriture sur votre site web ?
dir
<link>
direction
Ressources
- Articles et tutoriels sur l'internationalisation du W3C
- Le Guide compulsif de Frank sur les adresses postales fournit des liens utiles et des conseils détaillés sur les formats d'adresse dans plus de 200 pays.
- DataHub.io est un outil permettant de télécharger les codes pays et les noms.