Testare l'accessibilità dei siti Web Drupal con WCAG 2.1

Sapevi che 1 adulto su 4 negli Stati Uniti ha una disabilità*? Si tratta di un incredibile 61 milioni di persone che potrebbero essere influenzate da siti Web inaccessibili.

Come sviluppatore Drupal, hai il potere di fare la differenza assicurandoti che il tuo sito soddisfi le Web Content Accessibility Guidelines (WCAG). In questo blog, esploreremo le funzionalità chiave e le best practice per testare l'accessibilità WCAG 2.1 in Drupal, in modo da poter creare siti web inclusivi per tutti gli utenti.

Che cos'è l'accessibilità (A11a)

L'accessibilità si riferisce a rendere un sito web fruibile dal maggior numero di persone possibile, in particolare per quanto riguarda le persone con disabilità. A cosa si riferisce A11y? A11y si riferisce semplicemente alla parola “Accessibilità” dove 11 indica il numero di caratteri presenti tra “A” e “Y”

WCAG e le sue origini

WCAG è l'acronimo di Web Content Accessibility Guidelines. È considerato il punto di riferimento standardizzato per l'accessibilità del sito web. Create dal World Wide Web Consortium (W3C), le linee guida WCAG sono il modo migliore e più semplice per rendere il tuo sito web utilizzabile da tutti. Le linee guida WCAG sono rigorosamente seguite dalla maggior parte delle organizzazioni governative e sanitarie per garantire che il sito Web rispetti le leggi sull'accessibilità (ad esempio, sezione 508).

Principi delle WCAG

Esistono quattro principi principali di accessibilità se si desidera adottare la conformità WCAG. Questi seguono l'acronimo 'POUR', che sta per Perceiving, Operable, Understandable e Robust .

Percettibile

In parole semplici, il contenuto dovrebbe essere rilevabile ai sensi dell'utente. Ciò significa che devono essere in grado di riconoscere le informazioni che vengono loro presentate. Include la possibilità per gli utenti di ascoltare chiaramente il contenuto audio e assicurarsi che sia distinguibile dal rumore di fondo.

Operabile

Si tratta di assicurarsi che gli utenti possano navigare comodamente nel tuo sito Web e che l'interfaccia sia intuitiva. Non ci devono essere parti inaccessibili del sito o passaggi che gli utenti potrebbero non essere in grado di completare. Dovrebbe evitare contenuti in rapido movimento e lampeggianti durante la progettazione dei contenuti web. Dovrebbe essere facilitata la navigazione nel sito senza tastiera, assicurandosi anche che il sito sia accessibile da tastiera per gli utenti che non possono usare il mouse.

Comprensibile

Gli utenti devono essere in grado di elaborare le informazioni loro presentate ed essere anche in grado di comprendere come utilizzare e navigare attraverso il sito web. Ciò include rendere il testo chiaro, leggibile e prevedibile per garantire che le pagine appaiano in modo intuitivo e anticipato.

Robusto

Ciò evidenzia che la tecnologia potrebbe evolversi e costruire il tuo sito Web con le future evoluzioni tecnologiche. Come regola generale, se la tecnologia cambia e si sviluppa, anche il contenuto dovrebbe rimanere accessibile. Deve anche essere compreso da un ampio spettro di utenti con diverse disabilità e rimane comunque facile da capire. Ad esempio, il sito lo ha reso compatibile per funzionare con la versione più recente degli screen reader.

Perché dovresti rispettare le WCAG?

Di seguito sono riportati alcuni dei vantaggi dell'implementazione WCAG

• Un sito Web accessibile crea buona volontà nei confronti del tuo marchio e migliora l'ottimizzazione dei motori di ricerca. Il tuo sito si posizionerà più in alto nei risultati dei motori di ricerca.
• Un sito Web accessibile consente un maggiore coinvolgimento, portata e fidelizzazione poiché avrai rimosso in modo efficiente le barriere che impediscono a un'ampia gamma di persone di accedere ai tuoi contenuti.
• Una volta implementato WCAG come parte di qualsiasi sito Web, è considerato standard.

Criteri di successo WCAG 2.0/2.1: i più ampiamente implementati

1. Ogni campo di input sul sito ha un'etichetta appropriata
2. Il contenuto decorativo è implementato in modo tale da poter essere ignorato dalla tecnologia assistiva. Ad esempio, immagini decorative ignorate dagli screen reader
3. I sottotitoli sono forniti per tutti i contenuti audio/video preregistrati
4. L'interpretazione della lingua dei segni è fornita per il contenuto audio
5. Una sequenza significativa di contenuti, ad esempio le intestazioni di qualsiasi pagina sono posizionate in ordine sequenziale
6. L'utente può mettere in pausa o interrompere l'audio o controllare il volume dell'audio indipendentemente dal volume generale del sistema per la riproduzione automatica dei video.
7. Il rapporto di contrasto del testo e delle immagini del testo è 4,5:1, mentre il testo e le immagini su larga scala sono 3:1. Il rapporto di contrasto non si applica al contenuto decorativo o al logo o al nome del marchio
8. Audio di sottofondo basso o assente. L'audio/video preregistrato non contiene alcun rumore di fondo
9. Tutte le funzionalità del contenuto sono accessibili tramite l'interfaccia della tastiera. Non ci saranno trappole per parole chiave.
10. Fornire agli utenti tempo sufficiente per leggere e utilizzare il contenuto
11. Se il contenuto è basato sul tempo, l'utente può mettere in pausa o modificare il vincolo temporale
12. In caso di contenuti in rapido movimento come i caroselli automatici, all'utente verranno presentate le opzioni per metterlo in pausa o interromperlo
13. Quando la sessione dell'utente autenticato scade, l'utente sarà in grado di continuare con la sessione senza perdita di dati dopo la riautenticazione.
14. I titoli delle pagine, le intestazioni e le etichette descriveranno l'argomento della pagina web
15. La messa a fuoco della tastiera è visibile ed evidenziata bene
16. I componenti focalizzabili riceveranno il focus in un ordine che indica significato e operabilità.
17. Ogni sezione della pagina web è accompagnata dalla sua intestazione di sezione
18. Fatta eccezione per le immagini decorative, tutte le immagini hanno un testo alternativo significativo
19. Audio, video, moduli, menu a discesa, testo di ancoraggio, URL e testo alternativo sono accessibili dalla tastiera e dall'utilità per la lettura dello schermo
20. La chiarezza del contenuto si adatta in base al livello di zoom della pagina. Il contenuto è chiaramente visibile, anche al massimo livello di zoom
21. Il menu dell'intestazione e del piè di pagina con il contesto della guida dovrebbe essere disponibile su tutte le pagine del sito
22. I siti hanno una corretta implementazione degli stati hover e focus

Lettori di schermo

Molte persone con difficoltà visive usano lenti di ingrandimento e lettori di schermo. Uno screen reader è un software che legge ad alta voce il testo digitale visualizzato sullo schermo. Alcuni esempi di screen reader includono:

• Prodotti a pagamento come JAWS (Windows) e Dolphin Screen Reader (Windows).
• Freeware come NVDA (Windows), ChromeVox (Chrome) e Orca (Linux).
• Software integrato nel sistema operativo (sistema operativo), come VoiceOver (macOS, iPadOS, iOS), Narratore (Windows), ChromeVox (su Chrome OS) e TalkBack (Android).

Tre livelli di accessibilità

WCAG 2.1 ha 3 livelli di criteri di successo

• Livello A: tutti i 30 criteri di successo essenziali definiti nelle WCAG 2.0 sono soddisfatti. Come minimo, tutti i siti Web dovrebbero raggiungere questo livello di conformità.
• Livello AA: tutti i criteri di successo di livello A sono soddisfatti e sono soddisfatti altri 28 criteri di successo di accessibilità. Questo livello raggiunge uno spettro di accessibilità più ampio ed è spesso l'obiettivo da raggiungere per la maggior parte dei team di sviluppo.
• Livello AAA: il sito Web deve soddisfare tutti e tre i livelli dei criteri di successo, inclusi 28 criteri di successo aggiuntivi. Questo livello è in genere riservato a siti speciali come le organizzazioni governative.

La maggior parte dei siti compatibili con le WCAG rientra ampiamente nei criteri di successo dell'accessibilità di livello A o AA.

Test di accessibilità di un sito Web Drupal

Di seguito sono riportati i passaggi seguiti per eseguire un test di accessibilità per un sito Web Drupal

1. Esegui un controllo di Google Chrome Lighthouse e risolvi i problemi di accessibilità evidenziati
2. Esegui un audit dello strumento Wave
3. Convalida manualmente lo stato attivo dell'evidenziazione della tastiera e l'ordine di tabulazione della pagina
4. Convalidare la pagina con il software screen reader richiesto. Ad esempio, VoiceOver
5. Convalida l'accessibilità del sito su tutte le risoluzioni come desktop wide, laptop, tab e dispositivi mobili
6. Convalida il codice del sito utilizzando gli strumenti di convalida del W3C per Markup e CSS
7. Convalida il contrasto cromatico del sito per assicurarti che soddisfi gli standard (4:5:1) utilizzando uno strumento di estensioni di Chrome come Kontrast o un'applicazione come Color Contrast Analyzer

Come Drupal aiuta a raggiungere gli standard di accessibilità

Lo sviluppo web deve includere l'accessibilità per garantire che i siti web siano funzionali e accessibili a coloro che hanno disabilità. Drupal è rinomato per la sua costante dedizione all'accessibilità. Dai un'occhiata a come Drupal promuove l'accessibilità e quali strumenti e funzionalità fornisce per aiutare i siti Web a essere più user-friendly.

1. Costruire l'accessibilità in Drupal

L'obiettivo del team di sviluppo di Drupal è sempre stato quello di costruire una piattaforma utilizzabile da quanti più utenti possibile. Durante lo sviluppo della piattaforma Drupal di base, vengono seguiti i requisiti delle Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.1 Level AA. Ciò indica che una varietà di disabilità, come quelle che interessano i sistemi visivi, uditivi, fisici, verbali, cognitivi e neurologici, possono accedere ai siti Web Drupal.

2. Funzioni di accessibilità predefinite

• Con la loro capacità di adattarsi a varie dimensioni dello schermo e dispositivi grazie al responsive design, i temi predefiniti di Drupal sono utilizzabili per coloro che utilizzano dispositivi mobili o tecnologie assistive.
• Drupal crea markup HTML semantico, che aiuta i lettori di schermo e altri strumenti di tecnologia assistiva a comprendere la struttura del sito web.
• Drupal include un campo per l'aggiunta di testo alternativo alle foto, che aiuta i non vedenti a comprendere il contenuto del sito web.
• Drupal supporta la navigazione da tastiera, fondamentale per gli utenti che non sono in grado di utilizzare il mouse.
• I moduli facili da usare e navigare con la tecnologia assistiva sono generati da Drupal che sono accessibili.

3. Drupal fornisce plugin e moduli per l'accessibilità

Per migliorare l'accessibilità di un sito Web, Drupal fornisce una varietà di moduli e plug-in di accessibilità che possono essere distribuiti. Diversi moduli e plug-in di accessibilità popolari sono i seguenti:

• Editoria11y Accessibility Checker: questo modulo esamina un sito Web per problemi di accessibilità e fornisce raccomandazioni per le soluzioni.
• Plugin di accessibilità CKEditor: questo componente aggiuntivo migliora l'accessibilità dell'editor di testo ampiamente utilizzato per Drupal, CKEditor.
• Widget di accessibilità all-in-one: questo modulo include un widget di accessibilità che consente agli utenti di modificare le dimensioni del testo del sito Web, il contrasto e altre impostazioni relative all'accessibilità.
• A11Y: Form helper: questo modulo aiuta a far sì che tutti i webform Drupal soddisfino gli standard di accessibilità
• Block ARIA Landmark Roles: questo modulo aggiunge ulteriori elementi ai moduli di configurazione del blocco che consentono agli utenti di assegnare un ruolo di riferimento ARIA e/o etichette ARIA a un blocco.

4. Forte sostegno comunitario per l'accessibilità

Sviluppatori e progettisti che si impegnano per l'accessibilità costituiscono una parte considerevole della comunità Drupal. Uno sforzo condotto dalla comunità per rendere Drupal più accessibile alle persone con disabilità è il Drupal Accessibility Group. Il gruppo offre indicazioni, strumenti e best practice per lo sviluppo di siti Web Drupal conformi ad ADA.

Riferimenti:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Pensieri finali

Drupal è un sistema di gestione dei contenuti efficace e open source che fornisce una varietà di funzionalità, strumenti e plug-in per migliorare l'accessibilità di un sito web. Grazie alla sua dedizione all'accessibilità e alla forza della sua comunità incentrata sull'accessibilità, Drupal è una piattaforma fantastica per la creazione di siti Web utilizzabili e accessibili per le persone con disabilità.
Spero che questo articolo ti fornisca le informazioni necessarie sui test di accessibilità con WCAG 2.1. Vuoi creare un sito web Drupal accessibile da zero o vuoi rendere il tuo sito attuale più accessibile? Ci piacerebbe realizzarlo! Parliamo!