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.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<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.
<html>...</html>
<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.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
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.
<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>
<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.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<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?
lang
principale per <html>
e lingue aggiuntive per ogni elemento che ha contenuti in una lingua diversa.<html>
. Ad esempio <html lang="en,lt,pl,pt">