Suggerimento rapido utilizza l'attributo lang per una migliore accessibilità

Il Lang l'attributo è uno degli attributi HTML globali che gli sviluppatori possono applicare a qualsiasi elemento HTML e può davvero aiutare con l'accessibilità. Ti permette di specificare la lingua di un elemento e tutti i suoi elementi figli usando un "sottotag" di lingua: un codice di 2 o 3 caratteri definito da un organismo di standard internazionale.

A11y Dall'inizio

Questo suggerimento rapido fa parte dell'accessibilità Web: la Guida completa all'apprendimento, in cui abbiamo raccolto una serie di tutorial, articoli, corsi e ebook, per aiutarti a capire l'accessibilità del web fin dall'inizio.

Uso di base

Lang è più comunemente trovato sul html elemento, in cui la dichiarazione può propagarsi a tutto il contenuto della pagina. Ad esempio, una dichiarazione di  dice al browser che tutto il contenuto della pagina è l'inglese. 

Lang i sottotag possono anche avere uno script o un designatore di regione, che consente di specificare il sistema di scrittura della lingua o la regione geografica. Ad esempio, una dichiarazione di  specifica l'inglese del Regno Unito (colore e colore, centro e centro, ecc.).

È possibile sovrascrivere un esistente Lang dichiarazione con un più specifico Lang dichiarazione per identificare a livello di codice il contenuto che utilizza una lingua diversa dal resto della pagina. Una sezione scritta in spagnolo su una pagina inglese sarebbe simile a questa:

 ...      

Quindi, perché dovremmo farlo? Un paio di motivi: 

1. Traduzione e interoperabilità

L'identificazione delle lingue del contenuto consente a servizi di traduzione come Google Chrome di funzionare in modo più accurato. Dal momento che stai parlando ad una macchina usando il codice, sei in grado di dire direttamente agli algoritmi di identificazione della lingua straniera che dovrebbe attivare un prompt di traduzione. 

Google Chrome richiede all'utente di tradurre una pagina.

La presenza di un valido Lang la dichiarazione degli attributi aiuta anche altri servizi automatici che importano e ricontestualizzano i contenuti del sito. Inoltre, può servire come un gancio per lo styling per cose come i CSS ' citazioni proprietà.

2. Lettori di schermo

Alcuni software che leggono il contenuto dello schermo a voce alta possono anche analizzare il file Lang attributo, che influisce sul modo in cui pronuncia il contenuto della pagina. Questo software non è solo limitato alla tecnologia assistiva. Assistenti vocali come Alexa, modalità di lettura del browser specializzate, app di navigazione come Google Maps, sistemi di indirizzo pubblico, ecc. Possono avere tutte queste funzionalità.

Per lo meno, l'uso corretto del Lang l'attributo può aggiungere quello extra je ne sais quoi all'esperienza, dicendo al software di leggere i contenuti ad alta voce come farebbe una persona.

Nel migliore dei casi, aiuta a comprendere il tuo contenuto. Le interfacce basate sulla voce mancano di un sacco di vantaggi che diamo per scontato con un'interfaccia utente visiva, quindi è importante che rappresentino il contenuto nel modo più accurato possibile.

Ecco un esempio di come il popolare screen reader JAWS tratta contenuti che hanno a Lang attributo correttamente applicato ad esso. Ci saranno due esempi letti ad alta voce: uno senza, e uno con il Lang attributo correttamente applicato alla parte francese della frase, "In francese, la frase" Posso usare il bagno? "è,"Puis-je utiliser votre salle de bain?'”

Conclusione

La descrizione semantica dei tuoi contenuti è una di quelle piccole cose che puoi fare come sviluppatore per migliorare notevolmente l'esperienza delle persone e dei servizi che utilizzano i tuoi siti Web e le tue app web.