Oltre alla struttura, esistono molti elementi HTML di supporto da considerare quando si sviluppa e progetta per l'accessibilità digitale. Durante il corso Imparare l'accessibilità abbiamo trattato molti elementi.
Questo modulo è incentrato su elementi molto specifici che non rientrano in nessuno degli altri moduli ma che sono utili da comprendere.
Titolo pagina
L'elemento HTML <title> definisce i contenuti della pagina o della schermata che un utente sta per vedere. Si trova nella sezione <head> di un documento HTML ed equivale all'elemento <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 sul sito web o nell'app stessa.
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 nei siti web multipagina. Per le APS, il valore della proprietà document.title può essere aggiunto manualmente o tramite un pacchetto helper, a seconda del framework JavaScript. La presentazione dei titoli di pagina aggiornati a un utente di screen reader potrebbe richiedere ulteriori attività.
I titoli di pagina descrittivi sono un vantaggio sia per gli utenti sia per l'ottimizzazione per i motori di ricerca (SEO), ma non esagerare e aggiungere molte parole chiave. Poiché il titolo è il primo elemento annunciato quando un utente AT visita una pagina, deve essere accurato, univoco e descrittivo, ma anche conciso.
Quando si scrivono i titoli delle pagine, è buona norma "caricare dall'inizio" la pagina interna o i contenuti importanti, quindi aggiungere eventuali pagine o informazioni precedenti dopo. In questo modo, gli utenti AT non dovranno consultare le informazioni che hanno già ascoltato.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
linguaggio
Lingua della pagina
L'attributo lingua della pagina (lang) imposta la lingua predefinita per l'intera pagina. Questo attributo viene aggiunto al tag <html>. Deve essere aggiunto a ogni pagina un attributo di lingua valido per indicare all'AT la lingua da utilizzare.
Ti consigliamo di utilizzare codici lingua ISO a due caratteri per una maggiore copertura AT, poiché molti non supportano codici lingua estesi.
Quando manca del tutto un attributo della lingua, l'AT viene usato per impostazione predefinita sulla lingua programmata dell'utente. Ad esempio, se un AT è impostato sullo spagnolo, ma un utente visita un sito web o un'app in inglese, prova a leggere il testo in inglese con accenti e cadenza in spagnolo. Questa combinazione genera un prodotto digitale inutilizzabile e un utente frustrato.
<html>...</html>
<html lang="en">...</html>
È possibile associare all'attributo lingua una sola lingua. Ciò significa che l'attributo <html> può avere una sola lingua, anche se nella pagina sono presenti più lingue. Imposta lang come lingua principale della pagina.
<html lang="ar,en,fr,pt">...</html>Non sono supportate più lingue.
<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 cambiare la lingua nei contenuti stessi. Si applicano le stesse regole di base dell'attributo lingua a pagina intera, con la differenza che lo aggiungi all'elemento in-page appropriato anziché nel tag <html>.
Ricorda che la lingua aggiunta all'elemento <html> si estende a tutti gli elementi contenuti, quindi imposta sempre per prima la lingua principale dell'attributo lang di primo livello della pagina.
Per gli elementi in-page scritti in una lingua diversa, aggiungi l'attributo lang all'elemento wrapper appropriato. Questa operazione sostituirà l'impostazione della lingua 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>
iFrames
L'elemento iframe (<iframe>) viene utilizzato per ospitare un'altra pagina HTML o contenuti di terze parti all'interno della pagina. In pratica, inserisce un'altra pagina web all'interno della pagina principale. Gli iframe sono 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 elemento <iframe> con contenuti distinti deve includere un elemento title all'interno del tag principale. Questo titolo fornisce agli utenti di AT ulteriori informazioni sui contenuti all'interno di <iframe>.
In secondo luogo, come best practice, è consigliabile impostare lo scorrimento su "automatico" o "sì" nelle impostazioni del tag <iframe>. In questo modo, le persone ipovedenti possono scorrere all'interno di <iframe> contenuti che altrimenti non potrebbero vedere. Idealmente, il container <iframe> avrebbe anche altezza e larghezza flessibili.
<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 la tua comprensione
Verifica le tue conoscenze dell'accessibilità dei documenti.
Il tuo sito è un libro di testo online multilingue in cui su una pagina sono mostrate più lingue. Qual è il modo migliore per indicare alle tecnologie per la disabilità la lingua del testo?
<html>. Ad esempio <html lang="en,lt,pl,pt">lang una sola lingua.lang principale per <html> e lingue aggiuntive su ogni elemento con contenuti in una lingua diversa.<html> per leggere il documento. Se disponi di testo in più lingue, assicurati di aggiungere un attributo lang all'elemento corrispondente (ad esempio una sezione o un paragrafo) con il codice ISO di due lettere corretto.