Come eseguire un audit di accessibilità per la conformità alle WCAG

Le WCAG (linee guida per l'accessibilità dei contenuti web) sono state create dal consorzio World Wide Web (W3C) ed è lo standard più riconosciuto a livello globale per l'accessibilità.

In questo articolo delineiamo le attività richieste per eseguire un audit per verificare la conformità allo standard WCAG 2.1.

L'accessibilità consiste nel garantire che i contenuti e le funzionalità del tuo sito Web siano accessibili a un pubblico più ampio.

Per esempio:

• Barriera di accessibilità temporanea – Qualcuno ha perso gli occhiali!
• Problemi con il dispositivo: si trovano su un dispositivo che è restrittivo, ad esempio un telefono cellulare
• Situazionale: luce solare intensa, stanza buia, ecc
• Disabilità permanente – Assenza di vista, udito, problemi cognitivi ecc.
• Problemi di larghezza di banda: una connessione molto lenta

Come puoi vedere, ci sono molte forme di disabilità che devi considerare.

Le linee guida WCAG sono così suddivise:

Prima di esaminare ogni sezione, ecco un elenco di ciò di cui avrai bisogno per eseguire i test:

1. Percettibile

• Una selezione di browser con solo testo (es. Lynx)
• Uno strumento per controllare tag alt, intestazioni ecc. (es. ScreamingFrog)
• Uno screen reader come NVDA
• Uno strumento di test di accessibilità del sito web
• Strumenti di sviluppo di Chrome
• Accesso a una selezione di dispositivi

Si tratta di assicurarsi che il contenuto sia accessibile in varie forme. Ad esempio, qualcuno può vedere il contenuto, ascoltarlo, utilizzare il tocco per comprendere il contenuto, ecc. Ciò include anche elementi dell'interfaccia utente come menu e pulsanti.

Lo strumento di accessibilità WAVE è uno dei tanti strumenti che possono essere utilizzati per trovare problemi in quest'area:

Nell'esempio sopra la pagina funziona abbastanza bene. Ha solo 1 errore e 5 errori con problemi di contrasto del colore.

L'unico errore è che questa pagina non indica la lingua.

Ma ci sono molte cose buone sulla pagina. Ad esempio, nell'immagine a destra dove vedi 2 elementi evidenziati in verde, entrambi usano le etichette "ARIA" per aiutare uno screen reader a capire questo contenuto. Più avanti spiegheremo di più su questo.

Esaminiamo le linee guida ei criteri di successo.

Linea guida 1.1 - Fornire alternative testuali al contenuto non testuale

Esistono alternative testuali al contenuto non testuale?

Quando su uno schermo sono presenti contenuti non testuali, è necessario verificare che ci siano descrizioni per ciascuno di questi elementi.

Prima di fornire esempi, voglio discutere di ARIA che è un modo per fornire descrizioni aggiuntive agli elementi e dovrebbe essere usato solo quando l'HTML standard non è possibile.

Quando usi HTML ottieni automaticamente il controllo della tastiera, il focus ecc. e questa è la preferenza, ma ARIA può essere usato come backup.

Cos'è ARIA?

ARIA (accessible rich internet applications) è un modo per descrivere contenuti che non possono essere descritti a sufficienza utilizzando l'HTML standard. Il suo scopo principale è per gli screen reader. Se puoi utilizzare l'HTML standard, questo è l'approccio migliore perché fornirà automaticamente il focus sull'elemento e sul controllo della tastiera. Quando ciò non è possibile, ARIA è l'alternativa.

Immagini descrittive

Un'immagine descrittiva è qualcosa che ritrae qualcosa di significato. Ad esempio, l'immagine di un'auto Toyota Prius.

Se non riesci a vedere l'immagine, allora ci deve essere un modo per descrivere ciò che questa immagine rappresenta ed è qui che entra in gioco un tag Alt.

In piattaforme come WordPress puoi aggiungere il tag alt durante il caricamento dell'immagine:

Abbastanza spesso aggiorniamo questo tag alternativo per assicurarci che le parole chiave pertinenti siano incluse per scopi SEO, ma dobbiamo andare oltre.

La rana urlante eseguirà un'analisi di tutte le immagini sul tuo sito Web e mostrerà quali immagini non hanno tag alt, tag alt duplicati, tag alt troppo lunghi o tag alt troppo corti!

Puoi vedere le immagini insieme ai dettagli dell'immagine anche:

Immagine decorativa

Un'immagine decorativa è un'immagine che è lì per migliorare il design ma non c'è nulla nell'immagine che valga la pena descrivere!

Le immagini decorative dovrebbero utilizzare la proprietà di sfondo CSS a meno che non ci sia una buona ragione per utilizzare il tag 'img'. Se un'utilità per la lettura dello schermo vede la proprietà di sfondo CSS sa di ignorare l'immagine.

Ecco un esempio di un'immagine descritta come immagine di sfondo nel sito Web My Emergency Doctor in Australia:

Ecco il codice dietro questo:

Poiché questa immagine non è elencata come <img>, utilizza role=img per far sapere agli screen reader che si tratta di un'immagine. Utilizza l'etichetta "Aria" per fornire una descrizione accurata dell'immagine. Definisce anche l'immagine come 'immagine di sfondo'.

Nota: se utilizzi il tag 'img' per un'immagine di sfondo, devi definire un tag null alt, ad esempio alt="

Quando dovresti usare <img> invece del colore di sfondo?

Quando un'immagine è una parte importante del contenuto, usa <img>. Ad esempio, se hai l'immagine di un prodotto, questa è <img> . Potresti anche avere immagini che sono solo immagini di sfondo utilizzate a scopo decorativo e non ha senso descriverle come immagini (che verranno indicizzate da Google).

Nell'esempio sopra potresti chiederti se l'immagine visualizzata debba essere definita come img ma è una fotografia d'archivio e hanno deciso di definirla invece come immagine di sfondo, il che va bene.

Nota: <img> è un tag HTML ma background-image è uno stile CSS che utilizzi.

Controlli dell'interfaccia utente

Esistono vari controlli dell'interfaccia utente che richiedono del testo per descrivere di cosa si tratta.

Ad esempio, un pulsante o un controllo modulo.

Un pulsante viene utilizzato per completare una funzione. Potrebbe essere un pulsante che ha solo un'icona e uno con testo nel pulsante. Entrambi potrebbero essere gestiti in modo diverso.

Usando ARIA puoi definire 'role=button' ma con l'HTML standard puoi usare il tag <button>. Quale dovresti usare?

Ecco un esempio di un pulsante che contiene solo una X che richiede la creazione di un'"etichetta aria" per descrivere ciò che fa il pulsante.

<button aria-label=”Chiudi” onclick=”myDialog.close()”>X</button>

Ecco un elenco di controlli tipici dell'interfaccia utente che dovrai testare:

Se stai utilizzando i moduli, devi assicurarti che ogni campo sia etichettato correttamente. Ecco un esempio di buona etichettatura:

<label for="fname">Nome:</label><br>

<tipo di input=”testo” id=”fname” name=”fname”><br>

<label for="lname">Cognome:</label><br>

<tipo di input=”testo” id=”lname” name=”lname”>

</modulo>

Nota: per i moduli dovresti anche assicurarti:

• Contrassegna chiaramente i campi obbligatori. Se un campo è obbligatorio, dovrà anche essere etichettato correttamente nell'html.
• Ci sono istruzioni per l'utente (di solito nella parte superiore del modulo)
• Gli utenti ricevono aiuto quando commettono un errore compilando un campo del modulo (ad es. formato della data errato, questo è ciò che devi inserire).

Captcha

Questo può essere molto problematico a seconda di come viene implementato. Ad esempio, quando vengono visualizzate le immagini e viene chiesto di identificare quale immagine contiene semafori!

Esamineremo l'implementazione e forniremo suggerimenti pertinenti.

Contenuti multimediali

Video/Audio necessita almeno di una descrizione per identificare di cosa tratta il video/audio.

Collegamenti

Vuoi assicurarti che i link risaltino chiaramente sulla pagina (ad es. di colore diverso) e che utilizzino anchor text e descrizioni dei link pertinenti.

Linea guida 1.2 – Media basati sul tempo

Quest'area riguarda la ristorazione per i contenuti video e audio che devono essere resi più accessibili.

È disponibile la trascrizione solo per l'audio preregistrato o solo per il video?

La trascrizione video è la traduzione dell'audio del tuo video in testo. La trascrizione non include informazioni audio che descrivono cose come le immagini visualizzate nel video. Questo viene gestito separatamente.

Consiglio per la trascrizione!

Rev.com è un ottimo servizio per creare didascalie/trascrizioni per il tuo audio/video. Forniscono anche un servizio di sottotitoli dal vivo per i video Zoom.

Sono disponibili sottotitoli per l'audio preregistrato?

La didascalia è un testo che appare all'interno del video per informare l'utente su ciò che la persona sta dicendo.

Esiste una descrizione audio o un'alternativa multimediale (preregistrata) ?

Durante la visione di un video, le didascalie potrebbero non essere sufficienti per descrivere ciò che viene mostrato all'interno del video. È qui che è richiesta anche la descrizione audio.

Ad esempio, una descrizione audio potrebbe descrivere cosa sta succedendo in sottofondo quando qualcuno sta parlando in modo da fornire agli utenti un po' di contesto.

Ecco un esempio di trascrizione che include una descrizione audio.

Questo è ottimo per il visitatore del tuo sito web ma è anche un bene per la SEO!

Suggerimento per selezionare un giocatore accessibile:

Vuoi assicurarti che il lettore video che utilizzi supporti ciò che è necessario per l'accessibilità:

1. Supporta sottotitoli
2. La descrizione audio può essere attivata/disattivata
3. Il controllo delle parole chiave può essere utilizzato sul lettore multimediale
4. Il lettore multimediale funziona su diversi dispositivi e browser
5. Tutti i controlli sono accessibili.

Ci sono didascalie per l'audio dal vivo ?

In genere non avrai alcun video o contenuto audio dal vivo sul tuo sito web, ma se lo avessi, allora dovresti avere la creazione simultanea di sottotitoli in modo che gli utenti vedano i sottotitoli visualizzati mentre la persona parla.

Sono disponibili strumenti per sottotitolare automaticamente i tuoi video e audio dal vivo.

Esiste una descrizione audio per i media sincronizzati preregistrati?

Questo è per i media che contengono video e audio. Vogliamo informazioni audio che accompagnino i media.

Linea guida 1.3 – Adattabile – Presentare le informazioni in un formato che può essere compreso dal software.

Devi assicurarti che ciò che puoi interpretare visivamente guardando qualcosa sia descritto a livello di codice in modo che possa essere interpretato correttamente da software come lettori di schermo.

Esiste una struttura logica per il contenuto ed è facile comprendere la relazione con ogni contenuto all'interno di quella struttura?

Quando visualizzi una pagina web normalmente vedi intestazioni, paragrafi, contenuti in grassetto, tabelle ecc. E quando visualizzi i dettagli di una tabella vedi intestazioni e vedi chiaramente quale riga è rilevante per quale intestazione.

Ecco cosa dovrai rivedere:

• Il contenuto è suddiviso in sottotitoli?
• Vengono utilizzati elenchi, tabelle, ecc. quando appropriato?
• Esiste un codice HTML corretto utilizzato per altri elementi strutturali in tutto il contenuto?
• Ci sono etichette e testo alternativo utilizzati come richiesto (ad es. sui moduli?)

Mancia

Un buon punto di partenza è testare il tuo sito web utilizzando uno strumento di validazione che verifica la validità dell'html (ad esempio il validatore html di W3.org).

Ecco un esempio di modulo che visualizza i campi obbligatori in rosso. Questo va bene per un utente visivo, ma che dire di qualcuno che usa un display braille?

Per superare questo problema viene aggiunta anche la parola 'obbligatorio' all'etichetta del cognome che è un campo obbligatorio.

 <label for="lastname" class="required">Cognome (obbligatorio): </label>
<input type="text" size="25" value=""/>
<tipo di stile="testo/css">
  .necessario {
    colore rosso;
  }
</stile>

C'è un ordine dei contenuti che abbia senso?

• Quando visualizzi una pagina web vedrai una barra di navigazione, quindi alcuni contenuti, intestazioni, sottotitoli, paragrafi di testo. Vuoi assicurarti che questo sia presentato in un ordine sensato.
• Usa gli stili di intestazione per indicare l'importanza delle sezioni. In genere hai solo uno stile <h1> per identificare la pagina del contenuto e quindi potresti avere più H2, H3 ecc.
• Avere la navigazione separata dal contenuto (es. definire la navigazione usando <nav>)
• Usa HTML valido

Ecco una tipica struttura di intestazioni che ha senso:

Gli utenti possono comprendere il contenuto quando non riescono a percepire forma, dimensione o utilizzare informazioni sulla forma o dimensione spaziale?

Il modo più semplice per spiegarlo è con un esempio:

Supponiamo che tu abbia una tabella di confronto delle caratteristiche del prodotto software e quando un prodotto ha una caratteristica, in questa colonna viene visualizzata un'immagine di diamante. Questo non è sufficiente, dovrai aggiungere del testo per indicare cosa rappresenta questo diamante.

Il sito web funziona bene in modalità verticale e orizzontale?

Il sito web deve essere in grado di adattarsi alla modalità verticale o orizzontale senza perdere di significato.

Se un sito web ha implementato correttamente il responsive design, quando si cambia orientamento si adatta a un viewport diverso (cioè seleziona un display più adatto in base alle dimensioni dello schermo).

Gli input per i moduli sono descritti correttamente?

Lo scopo di ciò è garantire che a livello di codice vi siano informazioni sufficienti su qualsiasi campo che deve essere compilato in un modulo.

E se è possibile abilita il riempimento automatico in modo che l'utente non debba completare tutto!

Lo scopo degli elementi di una pagina può essere determinato a livello di codice?

Un esempio è l'utilizzo dell'elemento 'ruolo' di ARIA per le sezioni di un sito web.

Ad esempio, un banner contenente logo/nome azienda, ecc. potrebbe essere descritto come 'ruolo=banner'.

o utilizzando etichette di input sui moduli per e-mail, nome, indirizzo ecc.

Ecco come lo vedresti in HTML:

<tipo di input="e-mail>

Esiste una versione testuale di qualsiasi grafico?

Se è presente un contenuto di tipo grafico, ti consigliamo di avere una tabella che riassuma di cosa tratta questo contenuto.

Linea guida 1.4 – Vedere e ascoltare il contenuto

Si tratta di rendere facile per le persone vedere e ascoltare il contenuto.

Esistono alternative di testo quando il colore viene utilizzato per trasmettere informazioni?

Immagina di avere un modulo e che un campo obbligatorio sia visualizzato in rosso.

Questo non significa molto per uno screen reader!

Ma potresti aggiungere la parola "richiesto" sulla tabella come nell'esempio seguente:

<label for=”lastname” class=”required”>Cognome (obbligatorio): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”testo/css”> .required { colore:rosso; } </stile>

Esiste un meccanismo per mettere in pausa o interrompere l'audio se viene riprodotto per più di 3 secondi?

Se stai utilizzando uno screen reader e un video viene riprodotto automaticamente contemporaneamente, sentirai due voci!

Idealmente, non ci sarà la riproduzione automatica del video che risolve questo problema.

Se è presente una riproduzione automatica, assicurati che sia inferiore a 3 secondi e, in caso contrario, assicurati che ci sia un modo per controllare l'audio del video in riproduzione.

C'è un buon contrasto tra testo e immagini/colore sullo sfondo?

Sappiamo tutti quanto siano importanti i colori nel design e nel branding, ma per i visitatori ipovedenti del tuo sito, i colori non faranno molta differenza per la loro esperienza.

Ad esempio, le persone daltoniche non vedranno la differenza tra rosso, arancione, giallo e verde e anche tu devi provvedere a loro.

La chiave qui è prestare attenzione al rapporto di contrasto, che è uno dei problemi di accessibilità più comuni riscontrati sui siti Web.

C'è un contrasto sufficiente tra il colore del testo e il suo sfondo? Uno strumento come il controllo del contrasto del colore può aiutarti a scoprirlo!

Il colore di sfondo è a sinistra e poi il colore del testo è a destra. Il punteggio è nel mezzo.

La raccomandazione è che il contrasto sia almeno 4,5:1 o 3,1 quando il testo è grande (es. 18 punti o 14 punti in grassetto).

Inoltre, assicurati di utilizzare strumenti diversi dal colore per comunicare contenuti e informazioni importanti sul tuo sito.

Ad esempio, il tuo CTA principale di solito viene visualizzato sulla pagina a causa di un colore che lo fa notare agli utenti. Per rendere i CTA più accessibili, puoi utilizzare dimensioni, posizionamento, audacia, contrasto, per renderli evidenti per le persone con daltonismo.

Il testo può essere ingrandito e il tuo sito web continua a funzionare normalmente?

Un ovvio è semplicemente ingrandire il testo su uno schermo per aiutare qualcuno con problemi di vista.

Ma vuoi che il sito web funzioni normalmente se un utente aumenta la dimensione del testo.

Ad esempio, quando un utente ingrandisce il testo fino al 400%, è necessario assicurarsi che nessuna informazione vada persa.

Ecco un'immagine da W3.org. Sono sicuro che non vuoi che il tuo sito web assomigli a quello a destra quando ingrandisci il testo.

Il requisito WCAG 2.1 è che dovresti essere in grado di ingrandire del 200% senza problemi.

Le immagini di testo vengono evitate se non necessario?

Potresti avere un logo che contiene del testo (ad esempio il nome della tua azienda) che va bene.

Ma che dire delle immagini di testo?

Se hai un'immagine di testo devi almeno fornire un'etichetta che la descriva.

Ma è meglio evitare questo tipo di immagini a meno che:

• È essenziale
• È personalizzabile

Il sito web è responsive?

È normale scorrere verso il basso per vedere l'intera pagina web ma non scorrere a destra oa sinistra.

Quando si passa da un desktop a un dispositivo più piccolo, lo schermo dovrebbe adattarsi automaticamente in modo da non dover continuare a scorrere verso destra o sinistra.

C'è contrasto sufficiente per il contenuto non testuale?

I colori adiacenti devono avere un rapporto di contrasto di almeno 3:1

Questo requisito è per le persone con una vista relativamente bassa.

È possibile regolare la spaziatura/l'altezza delle linee senza alcuna perdita di prestazioni?

• L'altezza della riga (interlinea) deve essere almeno 1,5 volte la dimensione del carattere;
• La spaziatura dopo i paragrafi deve essere almeno 2 volte la dimensione del carattere;
• La spaziatura delle lettere (tracciamento) deve essere almeno 0,12 volte la dimensione del carattere;
• La spaziatura delle parole deve essere almeno 0,16 volte la dimensione del carattere.

Il contenuto viene visualizzato correttamente al passaggio del mouse o allo stato attivo?

Quando ti concentri su un elemento (ad es. scheda su di esso) o passa il mouse su di esso, vedi contenuto aggiuntivo.

Ad esempio, passa il mouse su un pulsante e viene visualizzato un popup.

...oppure viene visualizzato un sottomenu.

Questo contenuto deve essere:

Ignorabile – Ad esempio, se fai clic su Esci il contenuto non viene più visualizzato.

Hoverable: quando si passa il mouse sopra il contenuto, il contenuto viene visualizzato finché il mouse si trova sopra il grilletto.

Persistente – Questa è una combinazione di entrambi. Il contenuto rimane visibile fino a quando l'utente non lo chiude, l'utente allontana il mouse o il contenuto non contiene più informazioni importanti.

Nota: questo non si applica quando un elemento HTML come un titolo viene visualizzato quando si passa il mouse sopra qualcosa (ad esempio un'immagine).

Il carattere è leggibile?

Alcuni font/caratteri tipografici sono più leggibili di altri. C'è una preferenza verso serif o sans serif ma non è obbligatorio. La loro parte fondamentale è che sia leggibile.

2. Operabile

Ciò significa che gli utenti devono essere in grado di utilizzare la navigazione e l'interfaccia utente interagendo con essa. Ad esempio, possono "utilizzare" l'interfaccia utente utilizzando la tastiera.

Linea guida 2.1 – Accessibile da tastiera

Molti utenti utilizzano una tastiera anziché un mouse o un trackpad, inclusi gli utenti con barriere di accessibilità alla mobilità o quelli che utilizzano un'utilità per la lettura dello schermo.

Questo è il motivo per cui tutte le funzionalità del tuo sito Web devono essere accessibili tramite tastiera: collegamenti, pulsanti, moduli e altri controlli.

È tutto accessibile tramite una tastiera?

Ora è il momento di smettere di usare il mouse e usare solo la tastiera.

Stai controllando:

Fa tutto seguire un ordine logico andando avanti o indietro (usando tab per andare avanti e shift tab per tornare indietro).

Quando sei su un particolare pulsante, sezione, ecc., vedi che questo elemento è evidenziato? Nell'esempio seguente, è ovvio che abbiamo inserito la scheda in "articoli".

Tutto è accessibile usando il tasto Tab e quando premi invio quando hai lo stato attivo si attiva l'azione?

Nota: se viene visualizzato un popup, devi essere in grado di navigare anche in questo.

Puoi saltare l'intestazione?

Quando si utilizza un'utilità per la lettura dello schermo, non si desidera che legga la stessa intestazione su ogni pagina. Questo ti farebbe impazzire. Quindi dovresti essere in grado di selezionare il link "Salta al contenuto", premi Invio e la scheda successiva salterà quella sezione.

Quando fai clic sulla scheda quando arrivi per la prima volta sul sito Web sottostante, ti trovi sul link "Vai al contenuto". Se premi invio vai direttamente al contenuto.

Se si preme una seconda scheda, si passa al collegamento 'Salta alla navigazione'. Se premi invio su questo vieni portato alla navigazione.

Se premi nuovamente il tasto Tab, ti sposti su 'salta alla navigazione'. Se si seleziona questa opzione si passa direttamente alla navigazione.

Se è presente un carattere, una punteggiatura, un numero o un simbolo utilizzato come scorciatoia, deve esserci un modo per disabilitare o modificare questa scorciatoia in uno o più caratteri non stampabili. L'unica altra eccezione è quando il collegamento è disponibile solo quando l'elemento ha lo stato attivo.

2.1.2 Ci sono situazioni in cui colpisci un vicolo cieco con la tastiera (una trappola della tastiera) ?

Ti sposti in un punto del sito Web e non puoi scorrere avanti o indietro.

Questo è noto come una trappola della tastiera. Come dice la canzone...preso in una trappola, non posso guardare indietro...

Esiste un'alternativa a una scorciatoia da tastiera implementata utilizzando una lettera?

Avere una scorciatoia da tastiera con qualcuno che si affida a una tastiera per la navigazione non va bene perché potrebbe finire per premerlo per errore.

Quindi dobbiamo fornire un'alternativa.

a) Possibilità di rimappare questo personaggio su un'altra scorciatoia

b). Spegnilo

c). È attivo solo quando ti concentri su questo. Quindi ciò significa che se usi la scorciatoia non succede nulla a meno che tu non ci sia effettivamente!

Linea guida 2.2 – Tempo sufficiente

Immagina di impostare un limite di tempo per la compilazione di un modulo ma di considerare solo gli utenti senza esigenze di accessibilità. Questo limite di tempo potrebbe essere troppo breve.

La tempistica è regolabile?

Disattivare il tempo è l'ideale, ma poterlo allungare (cioè quando il tempo limite è quasi raggiunto) o adattarlo al nuovo orario va bene.

L'utente del sito Web può mettere in pausa, interrompere o nascondere il contenuto in movimento, lampeggiante o aggiornando automaticamente?

Se si sta muovendo/lampeggiando o scorrendo e:

un). si avvia automaticamente

b). dura più di 5 secondi

c). è presentato in parallelo con altri contenuti

Poi c'è un meccanismo per mettere in pausa, interrompere o eliminare.

Stesso problema con l'aggiornamento automatico dei contenuti.

Linea guida 2.3 – Convulsioni e reazioni fisiche

Questa linea guida serve ad assicurarsi che nulla sia progettato che possa causare un attacco o una reazione fisica.

I "flash" sullo schermo soddisfano le linee guida?

La regola numero uno è evitare qualsiasi oggetto lampeggiante, ma se ciò non è possibile, assicurarsi che non lampeggi più di 3 volte in un secondo o al di sotto delle soglie di lampeggio rosso o generale.

Linea guida 2.4 – Navigabile

Si tratta di semplificare la navigazione nel sito web.

Puoi saltare i blocchi ripetuti?

Immagina di utilizzare uno screen reader e ogni volta che arriva a una nuova pagina legge la navigazione. Ora non sarebbe divertente. Quindi devi essere in grado di saltare questi. Ho fatto un esempio di questo prima.

Tutte le pagine sono intitolate correttamente?

Hai bisogno di buoni titoli descrittivi su tutte le pagine. Questo è buono per l'accessibilità ma anche per la SEO.

Puoi usare Screaming Frog per guardare i titoli delle pagine in un unico posto:

L'ordine di messa a fuoco conserva il significato?

Se stai sfogliando il contenuto ma esegui la scheda in un ordine che non ha senso, dovrai risolvere il problema.

Puoi determinare lo scopo del link dal testo del link?

"Fai clic qui" non è un testo di ancoraggio molto utile. Devi avere parole che descrivano il contenuto a cui sta andando il link.

Cos'è il testo di ancoraggio?

Quando ti colleghi a un'altra pagina del tuo sito Web oa un sito Web esterno, l'anchor text è il testo visibile che vedi correlato alla pagina a cui stai inviando le persone. Invece di mostrare solo il link è meglio mostrare il testo vero e proprio.

C'è più di un modo per individuare una pagina web?

Ecco alcuni esempi:

• Mappa del sito – Avere un elenco di tutte le pagine su una mappa del sito
• Collegamenti rapidi – Disponi di collegamenti rapidi per accedere a pagine importanti
• Cerca – Cerca per trovare una pagina pertinente

La messa a fuoco della tastiera è visibile?

La domanda dice tutto! Questo è stato anche trattato in una delle linee guida precedenti. Quando ti sposti da qualche parte, devi essere in grado di vedere visivamente che lo stato attivo è in quell'area.

Intestazione, corpo e piè di pagina sono chiaramente definiti?

Le tecnologie assistive devono essere in grado di identificare chiaramente intestazione, piè di pagina e corpo. Ci sono tag html che definiscono queste aree.

Linea guida 2.5 Modalità di input

Questa linea guida riguarda le interfacce più recenti in cui non è possibile utilizzare una tastiera o un mouse per navigare. Ad esempio sugli smartphone puoi scorrere, pizzicare e ingrandire, toccare ecc.

La funzionalità che utilizza gesti multipunto o basati sul percorso può essere gestita da un singolo puntatore senza utilizzare il gesto (a meno che non sia essenziale)?

Un gesto basato sul percorso è il punto in cui è necessario spostarsi in un percorso specifico. Ad esempio, scorri verso l'alto per accedere a determinate funzionalità o verso il basso per accedere ad altre. Un gesto multipunto è quando utilizzi due o più punti di contatto per accedere alla funzionalità, ad esempio usa 2 dita per pizzicare e zoomare.

C'è un modo semplice per uscire da un'azione che è stata avviata da un singolo puntatore?

Che cos'è un singolo puntatore?

Qui è dove puoi accedere alla funzionalità con un punto di interazione con uno schermo, ad esempio toccare, fare clic, premere a lungo ecc.

Almeno uno dei seguenti deve essere vero:

• Nessun evento down: il trigger viene implementato quando si preme un pulsante
• Abort or Undo – Si utilizza un evento up (cioè la funzione è abilitata quando il puntatore viene rilasciato) e c'è un modo per interrompere. Ad esempio, stai premendo qualcosa con il dito e invece di alzare il dito verso l'alto lo fai scorrere in un'altra parte dello schermo e la funzionalità viene interrotta.
• Inversione in alto: l'evento in alto inverte l'evento in basso
• Essenziale – Il completamento della funzione dell'evento down è essenziale.

L'etichetta visibile di un componente corrisponde al nome programmatico di quel componente?

Se un utente vedente utilizza la sintesi vocale, il nome programmatico verrà letto ed è un'esperienza migliore se corrisponde all'etichetta visibile.

Le funzionalità gestite dal movimento o dai gesti possono essere gestite anche da altri controlli dell'interfaccia utente?

Se scuoti o inclini qualcosa per controllarlo, puoi utilizzare un altro controllo dell'interfaccia utente per accedere a questa funzionalità?

Comprensibile

Si tratta di assicurarsi che il linguaggio utilizzato nella pagina sia comprensibile.

3.1 Leggibile

Copriamo quanto segue:

La lingua della pagina o delle sezioni della pagina può essere determinata a livello di codice?

Dovresti vedere qualcosa di simile all'inizio di ogni pagina. 'Lang' indica la lingua della pagina.

<classe html=”ie ie7″ lang=”en-US”>

Se la lingua cambia nella pagina, dovrai essere in grado di identificare anche questo.

3.2 Prevedibile

Vuoi che la tua interfaccia utente funzioni in modo prevedibile, senza sorprese!

La navigazione è nello stesso ordine nelle pagine?

La posizione di navigazione su una pagina dovrebbe essere la stessa su tutte le altre pagine a meno che l'utente non apporti una modifica alla navigazione.

I componenti, le immagini, ecc. sono nominati in modo coerente nelle pagine?

Se hai un'immagine su una pagina e hai la stessa immagine su un'altra pagina, vuoi che l'immagine abbia lo stesso nome.

Se hai più pagine di un post e dai il nome alle pagine pagina 1, pagina 2, pagina 3 è coerente. L'etichettatura non deve essere la stessa se non ha senso, ma deve essere coerente.

3.3 Assistenza all'ingresso

Si tratta di aiutare gli utenti a evitare o recuperare dagli errori:

Errore di input: se stai digitando qualcosa in modo errato, potresti vedere visivamente che è sbagliato ma è necessario anche che ci sia del testo che identifichi il problema.

Etichette: quando gli utenti devono inserire un testo, è presente un'etichetta associata che descrive il campo.

Errore di input: se un utente commette un errore, viene fornito un suggerimento su come risolverlo.

Prevenzione degli errori: dovresti essere in grado di annullare, ricevere un feedback sull'errore o avere la possibilità di confermare prima di inviare.

4. Robusto

Oltre ad essere accessibili, i tuoi contenuti devono supportare una varietà di browser, tecnologie ecc.

Linea guida 4.1 Compatibile

Ciò comporta il test con una varietà di programmi utente e tecnologie assistive. Un buon test iniziale per questo sta usando lo strumento di convalida del markup del W3C per vedere se ci sono errori (cioè convalida che la struttura/sintassi di html, xhml ecc. sia corretta).

Ecco un esempio dell'output:

Inoltre è necessario eseguire il test su più browser per assicurarsi che il contenuto sia caricato correttamente.

E vale anche la pena caricare la pagina in un browser di solo testo (come Lynx).

Tutti i dati possono essere analizzati correttamente?

Esistono tag di inizio e fine appropriati all'interno delle sezioni del contenuto, quindi è facile identificare dove inizia e finisce una sezione?

Gli elementi sono annidati correttamente?

Ci sono attributi o ID duplicati che rendono difficile distinguere gli elementi?

Tutti i controlli dell'interfaccia utente possono essere compresi dalle tecnologie assistive?

Ecco alcuni esempi di controlli e di cosa hai bisogno per essere in grado di capire:

• Casella di controllo: è selezionata o meno?
• Focus: quale elemento ha focus e può essere compreso programmaticamente (non solo visivamente)?

Gli utenti vengono informati dei messaggi di stato a cui non viene assegnata la messa a fuoco in un modo che non interrompe necessariamente il lavoro?

Immagina di navigare in una pagina e mentre su quella pagina un banner si trova nella parte superiore del sito Web che annuncia una vendita.

Le forme sono progettate nel modo giusto?

Per rendere accessibili i moduli, assicurati che quanto segue sia abilitato:

• Possibilità di utilizzare la scheda per navigare attraverso il modulo
• Possibilità di utilizzare la scheda per navigare attraverso il modulo

<modulo>

<label for="fname">Nome:</label><br>

<tipo di input=”testo” id=”fname” name=”fname”><br>

<label for="lname">Cognome:</label><br>

<tipo di input=”testo” id=”lname” name=”lname”>

</modulo>

• Campi obbligatori chiaramente contrassegnati. Se un campo è obbligatorio, dovrà anche essere etichettato correttamente nell'html.
• Ci sono istruzioni per l'utente (di solito nella parte superiore del modulo)
• Gli utenti ricevono aiuto quando commettono un errore compilando un campo del modulo (ad es. formato della data errato, questo è ciò che devi inserire).

Riepilogo

Come puoi vedere, c'è molto terreno da coprire quando si esegue un audit completo dell'accessibilità. Tuttavia, tutto ripaga e i vantaggi che porta alla tua attività sono molti: dalla creazione di un'immagine positiva del marchio al raggiungimento di un pubblico più ampio e al miglioramento della SEO.