Accessibilità e l'attributo lang: dichiarare la lingua del nostro sito per farci capire da tutti

2022-04-04 13:29:04

Nel video di oggi continuiamo ad esplorare il linguaggio HTML, che è lo strumento di base con cui inseriamo i contenuti nelle nostre pagine web.
In particolare ci occuperemo dell'attributo lang che ci permette di dichiarare la lingua in cui è scritto il contenuto e che ha una grande importanza per migliorare l'accessibilità del nostro sito per tutti.
Ad esempio chi ha problemi visivi e utilizza dei lettori vocali dello schermo ha bisogno che questi programmi possano facilmente capire la lingua in cui è scritta la nostra pagina in maniera da poter impostare correttamente la lingua della lettura.
Nell'articolo associato a questo video troverete delle indicazioni in più sulle conseguenze dell'impostazione non corretta dell'attributo lang.
Cliccando su vedi tutto potrete accedere a questo contenuto aggiuntivo che completa quanto detto nel video.
Buona visione e buona lettura!!
Condividendo si impara!

Un piccolo attributo per un sito, un grande balzo per l'esperienza utente

Dimenticare o impostare in maniera non corretta l'attributo html lang, di cui ho parlato nel video, potrebbe avere delle conseguenze concrete fastidiose per chi visita il nostro sito.

Qui di seguito ne spiego brevemente qualcuna che potrete trovare anche in inglese nel blog di Manuel Matuzovic da cui ho preso spunto per questo contenuto aggiuntivo.

Traduzione automatica

Google Translate può offrire ai suoi utenti la traduzione automatica di pagine web dalla lingua dichiarata nell'attributo a quella predefinita del browser.

Se, col browser in italiano, visito una pagina in polacco il cui elemento html avrà l'attributo lang correttamente impostato ecco che potrò comunque accedere a quelle informazioni tradotte, anche se dovrò fare attenzione a fidarmi al 100% della qualità della traduzione.

<html lang="pl">

Contenuto scritto in polacco

</html>

Dichiarare la lingua del sito ci permette quindi di essere accessibili e trasmettere il nostro messaggio anche a persone che parlano un'altra lingua ma che sono interessate a ciò che proponiamo.

Occhio però: se dichiariamo la lingua sbagliata, magari perché usiamo strumenti automatici di creazione di codice che pre-impostano la lingua ad esempio sull'inglese e ci dimentichiamo di correggerla, Google proporrà comunque la traduzione.

<html lang="en">

Contenuto scritto in tedesco

</html>

Nel caso del codice qui sopra abbiamo una pagina con contenuto in tedesco ma creata con uno strumento automatico che ha preimpostato la lingua inglese nell'attributo lang.

È esattamente ciò che è successo al sito giornalistico austriaco citato da Matuzovic nel suo post.

Questo ha causato una visualizzazione scorretta del contenuto da parte di tutti gli utenti che avevano attivo Google Translate poiché, in maniera automatica e senza richieste, veniva loro mostrata una traduzione dall'inglese al tedesco di una pagina che era già scritta in tedesco.

Così, ad esempio, il ventitreesimo distretto elettorale di Vienna, Liesing, per questi utenti veniva mostrato come Lügen, cioè Bugie in tedesco. In effetti il nome del distretto contiene la sequenza di lettere Lies che in inglese significa proprio Bugie.

All'utente però tutto questo appariva semplicemente come un sito scritto in tedesco con un evidente errore nel nome del distretto.

Una figura un po' barbina e, se ci pensiamo, errori di questo tipo possono causare risultati imprevedibili e farci dire cose di cui non abbiamo il controllo.

Lettori di schermo

I lettori di schermo sono dei programmi generalmente utilizzati dalle persone con problemi di vista, ipovedenti o del tutto non vedenti, per far leggere o descrivere da voci sintetiche i contenuti visualizzati sullo schermo dei loro dispositivi.

Questo permette loro di utilizzare gli strumenti informatici e di fruire del contenuto dei nostri siti.

È molto importante che il codice del nostro sito dichiari correttamente la lingua in cui sono scritti i contenuti poiché questi programmi possono scegliere diversi profili di voce a dipendenza della lingua.

Se ad esempio lo screenreader è impostato in italiano e il sito visitato è in inglese senza che questo sia dichiarato nell'attributo lang, la pagina rischia di essere letta con le regole fonetiche e l'accento italiano e di essere quindi incomprensibile per l'utente.

Questioni grafiche minori

La selezione della lingua ha conseguenze sulla visualizzazione anche di vari elementi secondari come la forma e il modo in cui vengono mostrate le virgolette nelle citazioni testuali.

In italiano ad esempio di solito presentano questo aspetto

"citazione interessantissima di un grande personaggio"

mentre se la lingua impostata è il francese potrebbero presentarsi così

«une phrase super intéressante d'un personnage très fameux».

Anche nella sillabazione, nel controllo ortografico e nei campi dei formulari per l'inserimento di dati l'impostazione non corretta di questo piccolo attributo può avere effetti sgradevoli per gli utenti.

Allora che ne dite? Ci ricordiamo di non dimenticarci di ricordare il povero piccolo attributo lang nelle nostre pagine?

Come contribuire allo sviluppo del nostro gruppo di studio

Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.

V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.

Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove.

Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!

Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!

E non dimentichiamoci che condividendo si impara!!