Il documento

Oltre alla struttura, ci sono molti elementi HTML di supporto da considerare quando si creano e progettano contenuti per l'accessibilità digitale. Nel corso Learn Accessibility, trattiamo molti elementi.

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

Titolo pagina

L'elemento HTML <title> definisce i contenuti della pagina o della schermata che un utente sta per visualizzare. 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.

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

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

Quando scrivi i titoli delle pagine, è anche buona norma "caricare" prima la pagina interna o i contenuti importanti, quindi aggiungere eventuali pagine o informazioni precedenti. In questo modo, gli utenti di tecnologie assistive non devono ascoltare 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>. Un attributo della lingua valido deve essere aggiunto a ogni pagina, in quanto indica la lingua da utilizzare per la tecnologia assistiva.

Per una maggiore copertura delle tecnologie assistive, ti consigliamo di utilizzare i codici lingua ISO a due caratteri, in quanto molti di questi non supportano i codici lingua estesi.

Quando un attributo della lingua è completamente assente, la tecnologia assistiva utilizzerà la lingua programmata dall'utente. Ad esempio, se una tecnologia assistiva è impostata sullo spagnolo, ma un utente visita un sito web o un'app in inglese, la tecnologia assistiva 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>

L'attributo lang può avere una sola lingua associata. 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 lingua della pagina completa, tranne che devi aggiungerlo all'elemento in pagina appropriato anziché al tag <html>.

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

Per tutti gli elementi della pagina scritti in un'altra lingua, aggiungi l'attributo lang all'elemento wrapper appropriato. Questa impostazione sostituirà l'impostazione della lingua di primo livello finché l'elemento non viene chiuso.

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 una terza parte all'interno della pagina. In pratica, inserisce un'altra pagina web all'interno della pagina principale. Gli iframe vengono comunemente utilizzati per pubblicità, video incorporati, analisi dei dati web e contenuti interattivi.

Per rendere accessibile il tuo <iframe>, ci sono un paio di aspetti da considerare. Innanzitutto, ogni <iframe> con contenuti distinti deve includere un elemento title all'interno del tag principale. Questo titolo fornisce agli utenti di tecnologie assistive maggiori informazioni sui contenuti all'interno di <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 problemi di vista possono scorrere i contenuti all'interno del <iframe> che altrimenti non potrebbero vedere. Idealmente, anche il contenitore <iframe> dovrebbe essere flessibile in 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>
Indietro
Struttura dei contenuti
Avanti
Stato attivo della tastiera