Accessibilità

Il client HTML5 di BigBlueButton è accessibile con WCAG 2.0 AA (con eccezioni) e conforme alla Sezione 508. Vedi la nostra dichiarazione ufficiale di accessibilità .

Panoramica

Sulla base dell'ambito del progetto, l'attenzione è stata posta sulle disabilità legate a menomazioni visive, uditive e motorie. Abbiamo progettato il client HTML5 di BigBlueButton in modo che sia accessibile a quanti più utenti possibile indipendentemente da qualsiasi disabilità sottostante.

Il cliente segue le linee guida WCAG 2.0 sul contrasto del colore per tutti gli elementi visivi, oltre a un design inclusivo esteticamente gradevole. È stato implementato il supporto per tastiera e screen reader, in particolare per lo screen reader NVDA open source. Anche JAWS, il software di lettura dello schermo a pagamento leader di mercato, è compatibile con il client.

Nota: ci sono alcuni controlli minori all'interno del client che non sono completamente accessibili, ad esempio il selettore di colori nelle impostazioni dei sottotitoli.

Accessibilità

Quando si ha a che fare con l'accessibilità web, ci sono alcuni fattori chiave che dobbiamo tenere a mente durante lo sviluppo

  1. Ordine di tabulazione
  2. Contrasto di colore
  3. Messa a fuoco
  4. Semantica
  5. Test

Ordine di tabulazione

L'obiettivo quando si implementa l'ordine di tabulazione è garantire che gli elementi nella sequenza di tabulazione siano logici e semplici.

Quando un utente preme il tasto Tab, il focus dovrebbe spostarsi sull'elemento interagibile successivo. Se l'utente continua a premere il tasto Tab, lo stato attivo dovrebbe spostarsi in un ordine logico attraverso tutti gli elementi interagibili nella pagina. Il focus della tabulazione dovrebbe essere identificato visivamente, attualmente il client HTML5 aggiunge un bordo sottile al campo, quando si preme il tab, il focus si muove visibilmente.

Nota: un numero di utenti inclusi i seguenti.

  • Persone con disabilità visive, che si affidano a lettori di schermo o ingranditori dello schermo.
  • Quelli con destrezza limitata, che dipendono dall'uso della tastiera per usare un mouse.
  • Coloro che possono utilizzare un solo interruttore per controllare un computer.

navigheranno tutti in una pagina utilizzando il pulsante scheda.

L'ordine degli elementi nel DOM determina la loro posizione nell'ordine di tabulazione, per gli elementi che dovrebbero ricevere lo stato attivo. Gli elementi che non ricevono lo stato attivo in modo nativo possono essere inseriti nell'ordine di tabulazione aggiungendo una proprietà tabindex = "0".

Attenzione: quando si utilizza la proprietà tabindex, i valori positivi dovrebbero essere generalmente evitati perché posiziona gli elementi al di fuori del naturale ordine di tabulazione, questo può presentare problemi per gli utenti di screen reader che si affidano alla navigazione nel DOM in modo lineare.

La seguente estensione offre una rappresentazione visiva dell'ordine di tabulazione di un documento Web corrente.

ChromeLens

offerto da ngzhian

Calcolatore del rapporto di contrasto https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=it

Messa a fuoco

Contrasto di colore

Quando si ha a che fare con il contrasto dei colori, si tratta di trovare i colori per uno schema che non solo implementa il massimo contrasto, ma fornisce il contrasto appropriato tra il contenuto e il suo sfondo per coloro che hanno problemi di vista bassi, carenze di colore o perdita di contrasto tipicamente accompagnata da invecchiamento.

Il client HTML5 garantisce che tutti i progetti visivi soddisfino il rapporto minimo di contrasto del colore sia per il testo normale che per quello di grandi dimensioni su uno sfondo, descritto dagli standard WCAG 2.0 AA. "Contrasto (minimo): comprendere il criterio di successo 1.4.3."

Per assicurarci di aver soddisfatto queste linee guida, ci sono numerosi strumenti disponibili online che consentono il confronto dei colori di primo piano e di sfondo utilizzando valori esadecimali, per vedere se rientrano nel rapporto di contrasto appropriato.

Calcolatore del rapporto di contrasto http://webaim.org/resources/contrastchecker/

Colori attualmente implementati:

Colori degli elementi attualmente implementati Colori tipografici attualmente implementati

  • Blu - colore primario - pulsanti di azione
  • Rosso: chiusura audio, indicatori e avvisi di errore
  • Verde: indicatore audio, avviso di successo, segni di spunta
  • Arancione: avvisi di avviso
  • Blu scuro - Titoli
  • Grigio - colore tipografico di base

Nota: l'estensione ChromeLense offre anche la possibilità di visualizzare il tuo browser utilizzando diversi personaggi di utenti che possono visualizzare i contenuti web con diverse disabilità visive. Ciò è particolarmente utile quando si decidono combinazioni di colori appropriate per soddisfare al meglio una gamma più ampia di utenti.

Semantica

Gli utenti con disabilità visive possono perdere le possibilità visive. Dobbiamo assicurarci che le informazioni che stiamo cercando di esprimere siano espresse in un modo sufficientemente flessibile in modo che la tecnologia assistiva possa captarle; creando un'interfaccia alternativa per i nostri utenti. ci riferiamo a questo come espressione della semantica di un elemento.

Il client HTML5 utilizza WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) per fornire l'accesso agli screen reader. Il seguente elenco di attributi aria comunemente usati:

  • aria-ruolo
  • aria-label
  • aria-etichettatoby
  • aria-descritta da
  • aria nascosta
  • aria-live
  • aria espansa
  • aria-haspopup

Specifiche ARIA HTML5 - http://www.w3.org/TR/aria-in-html/

Specifiche ARIA - http://www.w3.org/WAI/PF/aria/

Ruoli: http://www.w3.org/TR/wai-aria/roles

Stati e proprietà: http://www.w3.org/TR/wai-aria/states_and_properties

Design Patterns - http://www.w3.org/TR/wai-aria-practices/#aria_ex

Test

Il test dell'accessibilità può essere un processo piuttosto doloroso, se provi a trovare e risolvere manualmente tutti i problemi. Sebbene sia buona norma esaminare un elenco di controllo e assicurarsi che tutti gli elementi nel client HTML5 soddisfino i requisiti di accessibilità, questo processo può essere molto lento e richiedere molto tempo. Per questo motivo si consiglia di utilizzare prima un auditor di accessibilità automatizzato.

ascia

offerto da Deque Systems

ascia https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

Strumenti per sviluppatori di accessibilità

offerto da Google Accessibility

Strumenti per sviluppatori di accessibilità https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

Entrambe queste estensioni offrono la possibilità di scansionare il DOM e segnalare eventuali problemi di accessibilità in base ai livelli che possono essere impostati, agli standard meteorologici AA o AAA. Per gli scopi del client HTML5 seguiamo le linee guida AA. Eventuali errori segnalati vengono inoltre forniti con un elenco di potenziali correzioni.

Nota: una volta installate nel browser, queste estensioni devono essere eseguite dall'interno della console.

Formazione

Ti consigliamo di dare un'occhiata a questo corso di accessibilità online gratuito che può fornire un'ottima comprensione delle basi per gestire l'accessibilità web sia per gli sviluppatori che per i designer.

Nel caso in cui non sia necessario seguire il corso ma si desideri comunque accedere alle informazioni come riferimento, il corso si trova anche in forma di documento completo . È un documento live che viene aggiornato dagli sviluppatori di Google.