Il documento

Oltre alla struttura, ci sono molti elementi HTML di supporto da considerare quando costruendo e progettando per l'accessibilità digitale. Nel corso sull'accessibilità, trattiamo molti elementi.

Questo modulo è incentrato su elementi molto specifici che non rientrano in nessuno dei gli altri moduli, ma che è utile comprendere.

Titolo pagina

HTML <title> definisce i contenuti della pagina o della schermata che l'utente sta per un'esperienza senza intervento manuale. Si trova nel Sezione <head> di un documento HTML ed equivale al <h1> o all'argomento principale della pagina. La I contenuti del titolo vengono visualizzati nella scheda del browser e aiutano gli utenti a capire pagina visitata, ma non viene visualizzata sul sito web o nell'app stessi.

In un'app a pagina singola (APS), <title> viene gestito in modo leggermente diverso, in quanto gli utenti non navigano da una pagina all'altra come avviene nei siti web con più pagine. Per le APS, il valore del parametro document.title può essere aggiunta manualmente o da un pacchetto helper, a seconda del nel framework JavaScript. Presentazione della titoli di pagina aggiornati a un utente di screen reader potrebbe richiedere del lavoro aggiuntivo.

I titoli delle pagine descrittive sono utili sia per gli utenti l'ottimizzazione per i motori di ricerca (SEO), ma non esagerare e aggiungi molte parole chiave. Poiché il titolo è il primo cosa annunciato quando un utente AT visita una pagina, deve essere accurata, univoca e descrittivo, ma anche conciso.

Quando scrivi i titoli delle pagine, è buona norma anche eseguire il "caricamento in primo piano" l'interno pagina o contenuti importanti, poi aggiungi eventuali pagine o informazioni precedenti in seguito. In questo modo, gli utenti AT non devono esaminare le informazioni che 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 lingua della pagina (lang) imposta la lingua predefinita per l'intera pagina. Questo attributo viene aggiunto al tag <html>. È necessario aggiungere a ogni pagina un attributo di lingua valido per indicare l'indirizzo di destinazione della lingua da utilizzare.

È consigliabile utilizzare caratteri a 2 caratteri Codici lingua ISO per una maggiore copertura AT, poiché molti non supportano codici lingua estesi.

Quando un attributo della lingua è completamente mancante, l'AT utilizzerà il valore predefinito lingua programmata dell'utente. Ad esempio, se un AT è stato impostato sullo spagnolo, ma l'utente visitasse un sito web o un'app in inglese, l'AT cercava di leggere testo con accenti e cadenza spagnoli. Questa combinazione risulta inutilizzabile prodotto digitale 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 l'attributo <html> può avere una sola lingua, anche se sono presenti più lingue presenti nella pagina. 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 della lingua (lang) per i cambi di lingua nei contenuti stessi. Valgono le stesse regole di base dell'attributo lingua per l'intera pagina, ad eccezione del fatto che viene aggiunto all'elemento in-page appropriato anziché al tag <html>.

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

Per tutti gli elementi in-page scritti in una lingua diversa, aggiungi questo lang all'elemento wrapper appropriato. Questa operazione sostituirà di primo livello 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>) è utilizzati per ospitare un'altra pagina HTML o contenuti di terze parti all'interno della pagina. it inserisce essenzialmente un'altra pagina web nella pagina principale. Gli iframe sono comunemente utilizzati per pubblicità, video incorporati, analisi dei dati web e annunci interattivi contenuti.

Per rendere accessibile <iframe>, ci sono un paio di aspetti da considerare. Innanzitutto, ogni <iframe> con contenuti distinti deve includere un elemento titolo all'interno del tag principale. Questo titolo fornisce agli utenti AT ulteriori informazioni sui contenuti all'interno dell'<iframe>.

Secondo, come best practice, è buona norma impostare lo scorrimento su "automatico" o "sì" nelle impostazioni del tag <iframe>. In questo modo le persone ipovedenti possono scorrere i contenuti all'interno di <iframe> che altrimenti non potrebbero vedere. Idealmente, il contenitore <iframe> sarebbe flessibile anche 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>

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di accessibilità dei documenti.

Il tuo sito è un libro di testo online multilingue, in cui un'unica pagina mostra più lingue. Qual è il modo migliore per indicare alle tecnologie per la disabilità il linguaggio utilizzato nel testo?

Non preoccuparti, l'AT può leggere automaticamente ogni lingua.
Anche se un AT può avere competenze di rilevamento della lingua, non è possibile garantire che indovina 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 lang principale per <html> e lingue aggiuntive per ogni elemento che ha contenuti in una lingua diversa.
L'AT si baserà principalmente sull'attributo lingua <html> per leggere il documento. Se disponi di 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.