Comprensione delle tecniche HTML per migliorare l'accessibilità Web

La creazione di una pagina Web non è solo la creazione di una pagina Web. Un aspetto importante dello sviluppo front-end è garantire che le interfacce utente siano accessibili a tutti su Internet, comprese le persone con disabilità visive e uditive. Devi scrivere il tuo codice pensando a queste persone. Come garantisci alle persone con disabilità visive pari accesso al tuo sito Web rispetto alle persone con disabilità visive? Leggi questo articolo per scoprirlo.

Perché gli sviluppatori dovrebbero preoccuparsi dell'accessibilità del Web?

L'accessibilità del Web ruota attorno all'idea che tutti dovrebbero avere pari accesso al Web, indipendentemente da eventuali disabilità o disabilità. Avere un sito web accessibile rende più facile raggiungere un pubblico più ampio (circa il 16% del mondo soffre di una disabilità o dell'altra).

L'accessibilità digitale non dovrebbe essere un'opzione per gli sviluppatori. È una necessità per qualsiasi marchio professionale. Questo è preso sul serio: come riportato da

Varietà, qualcuno ha fatto causa a The Pokémon Company nel 2019 a causa di un sito Web non accessibile.

Accessibilità web con HTML

In HTML, ci sono regole per garantire lo sviluppo di siti web accessibili. Questa sezione spiegherà alcune di queste regole.

Usa elementi semantici

Gli elementi semantici in HTML sono elementi che hanno significati. In HTML5 ci sono circa 100 elementi. Alcuni elementi, come ad es E, sono non semantiche, mentre altri tag HTML sono semantici. Anche se potrebbe essere impossibile smettere di usare questi elementi non semantici, è importante incorporare quanti più elementi semantici possibile nel tuo lavoro. Ecco un elenco di elementi semantici popolari:

Considera questo esempio da Taskly:

Uno sguardo all'immagine qui sopra rivelerà i seguenti elementi:

• Un'intestazione
• Un'immagine
• Un paragrafo
• Tre bottoni

È facile presumere che gli sviluppatori abbiano utilizzato tag per disporre gli elementi sullo schermo. Con uno sguardo più attento ai codici, noterai che invece usavano sei tag semantici. Il codice semplificato si presenta così:

<sezione>
<immsrc="/eroe.png"alt="eroe">
<articolo>
<h1>Trova i prodotti e i servizi giusti al momento giusto.h1>
<P>
 Calzature fatte a mano, rinnovamento capelli, social media manager, invio commissioni, fonte di guadagnoB>— lo chiami, Taaskly l'ha capito. Trova ogni prodotto o servizio di cui hai bisogno oggi quando ti iscrivi e usi Taaskly. 
P>
<UNhref="/principale/casa">Esternalizzare un compitoUN>
<UNhref="/principale/servizi"> Trova un servizioUN>
<UNhref="/principale/mercato" >Trova un negozioUN>
articolo>
sezione>

Dallo snippet HTML, puoi osservare quanto segue:

1. Le immagini, il testo e i pulsanti si trovano all'interno di a elemento.
2. IL elemento divide equamente il E elementi.
3. IL elemento detiene il, , E elementi.
4. I pulsanti sono codificati come elementi; quindi, sono collegamenti, non pulsanti. Come regola generale, utilizza sempre i collegamenti per indirizzare l'utente a un'altra pagina o vista e utilizza i pulsanti solo quando desideri che l'utente esegua un'azione nella stessa vista. Vedere Pagina dei pulsanti di Angular per maggiori informazioni su questo.

Utilizzare i punti di riferimento per fornire una struttura di pagina chiara

I punti di riferimento sono tag semantici che aiutano gli utenti non vedenti a navigare in una pagina Web con lettori di schermo. Con i punti di riferimento, è facile definire diverse parti di una pagina web. Sito web di Apple utilizza i punti di riferimento.

L'immagine sopra mostra quattro diversi punti di riferimento. Puoi usare il Approfondimenti sull'accessibilità estensione per visualizzare questi punti di riferimento.

Nell'immagine, possiamo dedurre a in alto, A contenente un, e un elemento. Notevolmente, l'immagine mostra "navigazione", "regione", E "informazioni sui contenuti". Questi sono noti come i ruoli, che vedremo più avanti.

Ogni volta che devi utilizzare più punti di riferimento per una pagina, differenziali sempre con un'etichetta. Ad esempio, se usi multiple elementi come Apple, devi etichettarli. Dovresti etichettarli con il aria-etichetta attributo. Quindi puoi scrivere qualcosa come uno di questi:

<navaria-etichetta = "globale">
<navaria-etichetta = "navigazione locale">
<navaria-etichetta = "cartella mele">

L'uso delle etichette può aiutare gli screen reader a passare a qualsiasi navigazione.

Utilizza gli attributi di ruolo, nome e valore

A volte, potrebbe essere impossibile utilizzare elementi HTML con funzionalità di accessibilità integrate. Tali casi possono essere uno di questi due:

1. Non esiste un elemento HTML nativo per ciò che vuoi ottenere. Ad esempio, se devi usare a perché nessun altro elemento sembra adattarsi al ruolo.
2. Non puoi utilizzare elementi semantici a causa di problemi tecnici. Se utilizzi un framework che utilizza quando sarebbe stato meglio usare, sarà tuo dovere definire un controllo personalizzato.

Per definire un controllo personalizzato, hai bisogno di un ruolo, un nome e un valore (a volte) per il tuo elemento.

Ruolo

Per impostazione predefinita, a elemento ha il ruolo di navigazione, mentre a elemento ha il ruolo banner. Dovresti utilizzare questi elementi solo per gli scopi previsti per aiutare le tecnologie assistive a comprendere la struttura di una pagina web. Se devi usarne uno al posto dell'altro, dovresti specificare il ruolo in questo modo:

<intestazioneruolo = "navigazione">
<navruolo = "bandiera">
<divruolo = "navigazione">

Nome

Un nome è un testo descrittivo o un'etichetta associata a un elemento HTML. La forma più semplice di un nome è il testo di un elemento. Ecco un esempio:

<divruolo = "pulsante">Cliccami!div>

Nel frammento di cui sopra, "Cliccami!"è il nome del elemento. È anche conosciuto come il nome accessibile.

Per elementi come la navigazione, i menu a discesa, ecc., l'assegnazione di un nome è più complessa rispetto all'esempio precedente. È diverso perché questi elementi contengono elementi figlio. Per assegnare un nome alla navigazione sopra, usa il aria-etichetta attributo. Guarda questo esempio:

<navruolo = "navigazione"aria-etichetta = "navigazione globale">...nav>

Dovresti notare che a nome l'attributo è diverso da un nome accessibile. Questo frammento di codice offre una migliore comprensione:

 attributo nome 
<navruolo = "navigazione"nome = "navigazione globale">...nav>
 nome accessibile 
<navruolo = "navigazione"aria-etichetta = "navigazione globale">...nav>

Vedere L'articolo di TGPi sui nomi accessibili per avere una comprensione più profonda di questo.

Valore

In HTML, l'attributo value può fornire informazioni aggiuntive su un elemento. I valori forniscono informazioni sullo stato del componente per i componenti personalizzati come le fisarmoniche. Ad esempio, una fisarmonica può essere aperta o chiusa.

Puoi aggiungere valore ai tuoi elementi in diversi modi. Questo frammento mostra alcuni dei modi in cui puoi farlo:

 aria-valuenow 
classe="pulsante play" etichetta-aria="Riproduci audio" aria-valuenow="0"></button>
<Audiosrc="audio-file.mp3">Audio>
aria-espanso
<divruolo="pulsante"aria-espanso="falso">Domande frequenti 1div>
valore
<ingressotipo="casella di controllo"nome="Prodotto[]"valore="1">

Dare priorità all'accessibilità Web per un'esperienza online inclusiva

L'accessibilità al web va oltre le regole; si tratta anche di garantire che tutti abbiano pari accesso al tuo sito web. Incorporare elementi semantici, punti di riferimento e attributi come ruolo, nome e valore nel codice HTML può rendere il tuo sito Web più accessibile alle persone con disabilità. Non pensare all'accessibilità web come un'opzione; consideralo una necessità.