Internazionalizzazione e localizzazione

Se leggi questo articolo, significa che stai utilizzando il World Wide Web. I moduli possono essere utilizzati da persone che parlano lingue diverse, persone di paesi diversi e persone con background culturali differenti. Scopri come preparare il tuo 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 alla localizzazione è definire l'attributo della lingua lang nell'elemento <html>. Questo attributo consente agli screen reader di richiamare la pronuncia corretta e ai browser di fornire una traduzione della pagina se la lingua definita non è quella predefinita del browser.

<html lang="en-us">

Scopri di più sull'attributo lang.

Supponiamo che tu abbia tradotto un modulo in tedesco. Come puoi assicurarti che i motori di ricerca e i browser sappiano della versione tradotta? Puoi aggiungere elementi <link> in <head> del tuo 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 tuo modulo

Non puoi tradurre il modulo in tutte le lingue, ma puoi assicurarti che gli strumenti di traduzione lo trasformino per te.

Per fare in modo che gli strumenti di traduzione traducano tutto il testo del modulo, assicurati che tutto il testo sia definito in HTML e visibile. Alcuni strumenti funzionano anche con contenuti definiti in JavaScript, ma per migliorare la compatibilità, prova a includere più testo possibile in HTML.

Assicurati che il modulo funzioni con sistemi di scrittura diversi

Lingue diverse utilizzano set di caratteri e sistemi di scrittura 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 per diversi sistemi di scrittura, puoi utilizzare le proprietà logiche CSS.

L'input ha uno spessore del bordo pari a 1px su tutti i lati, tranne sul lato sinistro, dove lo spessore del bordo è 4px. Ora modifica CodePen e 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 di avere un modulo in cui l'utente deve compilare il proprio nome. Come aggiungeresti il campo al modulo?

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

Per semplificare e velocizzare l'inserimento dei nomi e assicurarti che tutti possano inserirne i nomi, indipendentemente dal formato, utilizza, se possibile, un unico campo del modulo per i nomi.

Scopri di più sui nomi personali.

Se il tuo nome contiene caratteri non latini, in alcuni formati potrebbe essersi verificato il problema che indica che il nome è invalid. Quando crei moduli, assicurati di consentire tutti i caratteri possibili e non dare per scontato che un nome sia composto solo da caratteri latini.

Consenti diversi formati di indirizzi

Google ha sede all'indirizzo 1600 Amphitheatre Parkway, Mountain View, CA 94043, Stati Uniti.

che include il numero civico, la via, la città, la provincia, il codice postale e il paese. Nel tuo paese, il formato dell'indirizzo può essere completamente diverso. Come puoi assicurarti che tutti possano inserire il proprio indirizzo nel modulo?

Un modo è utilizzare input generici.

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

Verifica la tua comprensione

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 si cambia il sistema di scrittura di un sito web?

Con l'attributo direction.
Riprova.
Con l'attributo dir.
🎉
Utilizzare le proprietà logiche CSS.
Riprova.
Utilizzare l'elemento <link>.
Riprova.

Risorse