Il documento

Oltre alla struttura, esistono molti elementi HTML di supporto da considerare quando si sviluppano e progettano siti per l'accessibilità digitale. Nel corso Learn Accessibility vengono trattati molti elementi.

Questo modulo si concentra su elementi molto specifici che non rientrano in nessuno degli altri moduli, ma sono utili da comprendere.

Titolo pagina

L'elemento HTML <title> definisce i contenuti della pagina o della schermata che un utente sta per sperimentare. Si trova nella sezione <head> di un documento HTML ed è equivalente a <h1> o all'argomento principale della pagina. I contenuti del titolo vengono visualizzati nella scheda del browser e aiutano gli utenti a capire quale pagina stanno visitando, ma non vengono visualizzati sul sito web o nell'app stessa.

In un'app a pagina singola (APS), <title> viene gestito in modo leggermente diverso, poiché gli utenti non navigano tra le pagine come accade sui siti web con più pagine. Per le SPA, il valore della proprietà document.title può essere aggiunto manualmente o da un pacchetto di assistenza, a seconda del framework JavaScript. Annunciare i titoli delle pagine aggiornati a un utente di screen reader potrebbe richiedere un po' di lavoro aggiuntivo.

I titoli descrittivi delle pagine sono utili sia per gli utenti sia per l'ottimizzazione per i motori di ricerca (SEO), ma non esagerare aggiungendo molte parole chiave. Poiché il titolo è la prima informazione annunciata quando un utente di AT visita una pagina, deve essere preciso, univoco e descrittivo, ma anche conciso.

Quando scrivi i titoli delle pagine, è buona norma anche "caricare in primo piano" la pagina interna o i contenuti importanti, per poi aggiungere eventuali pagine o informazioni precedenti. In questo modo, gli utenti AT non devono ascoltare le informazioni che hanno già sentito.

Cosa non fare
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Cosa fare
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Lingua

Lingua della pagina

L'attributo della lingua della pagina (lang) imposta la lingua predefinita per l'intera pagina. Questo attributo viene aggiunto al tag <html>. A ogni pagina deve essere aggiunto un attributo lingua valido, che indica all'AT la lingua da utilizzare.

Ti consigliamo di utilizzare i codici lingua ISO a due caratteri per una maggiore copertura dell'AT, in quanto molti di questi non supportano i codici lingua estesi.

Quando un attributo della lingua è completamente mancante, l'AT utilizzerà per impostazione predefinita la lingua programmata dell'utente. Ad esempio, se un AT è impostato sullo spagnolo, ma un utente visita un sito web o un'app in inglese, l'AT tenterà di leggere il testo in inglese con accenti e cadenza spagnoli. Questa combinazione genera un prodotto digitale inutilizzabile e un utente frustrato.

Cosa non fare
<html>...</html>
Cosa fare
<html lang="en">...</html>

All'attributo lang può essere associata una sola lingua. Ciò significa che l'attributo <html> può avere una sola lingua, anche se nella pagina sono presenti più lingue. Imposta lang sulla lingua principale della pagina.

Cosa non fare
<html lang="ar,en,fr,pt">...</html>
 Non sono supportate più lingue.
Cosa fare
<html lang="ar">...</html>
 Imposta solo la lingua principale della pagina. In questo caso, la lingua è l'arabo.

Lingua della sezione

Puoi anche utilizzare l'attributo lingua (lang) per i cambi di lingua nei contenuti stessi. Valgono le stesse regole di base dell'attributo della lingua della pagina completa, tranne per il fatto che lo aggiungi all'elemento in-page appropriato anziché al tag <html>.

Ricorda che la lingua aggiunta all'elemento <html> viene applicata a cascata a tutti gli elementi contenuti, quindi imposta sempre per prima cosa la lingua principale dell'attributo lang di primo livello della pagina.

Per gli elementi in-page scritti in un'altra lingua, aggiungi l'attributo lang all'elemento wrapper appropriato. L'impostazione della lingua di primo livello verrà sostituita fino alla chiusura dell'elemento.

Cosa non fare
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
Cosa fare
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iFrame

L'elemento iFrame (<iframe>) viene utilizzato per ospitare un'altra pagina HTML o i contenuti di terze parti all'interno della pagina. In sostanza, inserisce un'altra pagina web nella pagina principale. Gli iframe vengono comunemente utilizzati per annunci, video incorporati, analisi web e contenuti interattivi.

Per rendere accessibile il tuo <iframe>, devi considerare alcuni aspetti. Innanzitutto, ogni <iframe> con contenuti distinti deve includere un elemento title all'interno del tag principale. Questo titolo fornisce agli utenti AT ulteriori informazioni sui contenuti all'interno del <iframe>.

In secondo luogo, come best practice, è consigliabile impostare lo scorrimento su "auto" o "yes" nelle impostazioni del tag <iframe>. In questo modo, le persone con disabilità visive possono scorrere i contenuti all'interno del <iframe> che altrimenti non potrebbero vedere. Idealmente, il contenitore <iframe> dovrebbe essere flessibile anche in termini di altezza e larghezza.

Cosa non fare
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Cosa fare
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

Verificare di aver compreso

Metti alla prova le tue conoscenze sull'accessibilità dei documenti.

Il tuo sito è un libro di testo online multilingue, in cui più lingue sono mostrate in una pagina. Qual è il modo migliore per indicare alla tecnologia per la disabilità la lingua della copia?

Non preoccuparti, l'AT può leggere automaticamente ogni lingua.
Sebbene alcune AT possano avere competenze di rilevamento della lingua, non puoi garantire che indovinano correttamente.
Includi tutte le lingue nell'elemento <html>. Ad esempio <html lang="en,lt,pl,pt">
All'attributo lang può essere associata una sola lingua.
Imposta una lang principale per il <html> ed eventuali lingue aggiuntive su qualsiasi elemento con contenuti in un'altra lingua.
L'AT si baserà principalmente sull'attributo della lingua <html> per leggere il documento. Se il testo è multilingue, assicurati di aggiungere un attributo lang all'elemento corrispondente (ad esempio una sezione o un paragrafo) con il codice ISO di due lettere corretto.