Internazionalizzazione e localizzazione

Se stai leggendo questo articolo, stai utilizzando il World Wide Web. I tuoi moduli possono essere utilizzati da persone che parlano lingue diverse persone di diversi paesi e persone con background culturali diversi. Scopri come preparare il modulo per l'internazionalizzazione e la localizzazione.

Assicurati che il modulo funzioni in lingue diverse

Vediamo come puoi assicurarti che il modulo funzioni con lingue diverse.

Il primo passaggio per preparare il tuo sito per la localizzazione è definire l'attributo lingua lang nell'elemento <html>. Questo attributo consente agli screen reader di richiamare la pronuncia corretta, e consente ai browser di offrire una traduzione della pagina se la lingua definita non è quella predefinita.

<html lang="en-us">

Scopri di più sull'attributo lang.

Supponiamo che tu abbia tradotto un modulo in tedesco. Come puoi assicurarti che motori di ricerca e browser conoscano la versione tradotta? Puoi aggiungere elementi <link> nelle <head> del sito per descrivere le versioni alternative.

<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">

Aiuta gli utenti che parlano un'altra lingua a utilizzare il modulo

Non puoi tradurre un modulo in tutte le lingue ma puoi fare in modo che gli strumenti di traduzione siano in grado di tradurre per te.

Per assicurarti che gli strumenti di traduzione traducano tutto il testo del modulo: assicurati che tutto il testo sia definito in HTML e sia visibile. Alcuni strumenti funzionano anche con i contenuti definiti in JavaScript, ma per migliorare la compatibilità, cerca di includere più testo possibile nel codice HTML.

Assicurati che il modulo funzioni con diversi sistemi di scrittura

Lingue diverse utilizzano sistemi di scrittura e set di caratteri differenti. Alcuni script sono scritti da sinistra a destra e altri da destra a sinistra.

Rendi la spaziatura indipendente dai sistemi di scrittura

Per assicurarti che il modulo funzioni con diversi sistemi di scrittura, puoi utilizzare le proprietà logiche CSS.

L'input ha uno spessore del bordo di 1px su tutti i lati, tranne sul lato sinistro, dove il bordo è spesso 4px. Ora modifica la CodePen e cambia il sistema di scrittura da destra a sinistra aggiungendo dir="rtl" all'elemento <main>

Il bordo spesso si trova ora sul lato destro. Questo perché abbiamo definito il bordo utilizzando una proprietà logica.

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

Scopri di più sulle proprietà logiche.

Assicurati che il modulo possa gestire diversi formati dei nomi

Supponiamo che tu abbia un modulo in cui l'utente deve inserire il proprio nome. Come aggiungeresti il campo al modulo?

Puoi aggiungere un campo per il nome e uno per il cognome. Tuttavia, i nomi sono diversi in giro per il mondo: ad esempio, alcune persone non hanno un cognome, quindi come dovrebbero compilare il Cognome?

Per rendere l'inserimento dei nomi facile e veloce e garantire che tutti possano inserire il proprio nome, a prescindere utilizza un singolo campo del modulo per i nomi, se possibile.

Scopri di più sui nomi personali.

Se il tuo nome contiene caratteri non latini, potresti aver riscontrato il problema secondo cui il tuo nome viene segnalato come invalid in alcuni moduli. Quando generare moduli, assicurarsi di consentire tutti i caratteri possibili e non dare per scontato che un nome sia solo costituito di caratteri latini.

Consenti diversi formati di indirizzi

La sede centrale di Google si trova a 1600 Amphitheatre Parkway, Mountain View, CA 94043, Stati Uniti.

Questo indirizzo include numero civico, via, città, stato, codice postale e paese. Nel tuo paese, il formato dell'indirizzo potrebbe essere completamente diverso. Come fai ad assicurarti che tutti possano inserire il proprio indirizzo nel modulo?

Un modo è utilizzare input generici.

Scopri di più su altri modi di lavorare con campi degli indirizzi internazionali:

Verifica le tue conoscenze

Verifica le tue conoscenze di internazionalizzazione e localizzazione

Come si richiama la pronuncia corretta per gli screen reader?

Con l'attributo lang.
🎉
Con l'attributo hreflang.
Riprova.
Aggiungere una descrizione con la lingua utilizzata.
Riprova.
Con l'attributo language.
Riprova.

Come puoi cambiare il sistema di scrittura sul tuo sito web?

Con l'attributo direction.
Riprova.
Con l'attributo dir.
🎉
Utilizzo di proprietà logiche CSS.
Riprova.
Utilizzo dell'elemento <link>.
Riprova.

Risorse