Le estensioni consentono agli utenti di creare la loro esperienza di navigazione ideale, su misura in base alle capacità e alle preferenze di ogni individuo. Le estensioni devono includere componenti di accessibilità che incoraggiano una base utenti inclusiva consentendo alle persone con disabilità visiva, perdita dell'udito, mobilità limitata e altre disabilità di accedere all'estensione.
Tutti, non solo gli utenti con esigenze speciali, possono usufruire delle funzioni di accessibilità. Gli utenti esperti, con problemi di vista e a bassa mobilità possono usare le scorciatoie da tastiera. Sottotitoli e trascrizione sono essenziali per gli utenti sordi, ma anche per gli studenti di lingue.
Le persone possono interagire con un'estensione in diversi modi. Alcuni utenti hanno un monitor, una tastiera e un mouse standard oppure potrebbero dipendere da una lente d'ingrandimento ed eventualmente da uno screen reader. Sebbene sia impossibile prevedere quali strumenti verranno utilizzati dagli utenti per accedere a un'estensione, uno sviluppatore può intraprendere alcuni passaggi per rendere un'estensione il più accessibile possibile.
Integrare i controlli dell'interfaccia utente accessibili
Se gli utenti non riescono ad accedere ai controlli dell'interfaccia utente, non potranno utilizzare un'estensione. Il modo più semplice per creare un'interfaccia utente accessibile è utilizzare un controllo HTML standard.
Controlli standard
Quando possibile, utilizza i controlli standard dell'interfaccia utente HTML. I controlli HTML standard sono accessibili dalla tastiera, scalati facilmente e sono generalmente compresi dagli screen reader.
WAI-ARIA nei controlli personalizzati
WAI-ARIA, Web Accessibility Initiative - Accessible Rich Internet Applications, è una specifica per rendere i controlli dell'interfaccia utente accessibili agli screen reader tramite un set standard di attributi DOM. Questi attributi forniscono allo screen reader informazioni sulla funzione e sullo stato attuale dei controlli di una pagina web.
Per aggiungere il supporto WAI-ARIA ai controlli personalizzati, gli elementi DOM di un'estensione dovranno essere modificati in modo da includere gli attributi utilizzati da Chrome per generare eventi durante l'interazione dell'utente. Gli screen reader rispondono a questi eventi e descrivono la funzione del controllo. Gli attributi DOM specificati da WAI-ARIA sono classificati in ruoli, stati e proprietà.
<div role="toolbar">
La proprietà aria-activedescendant specifica quale elemento secondario di una barra degli strumenti è attivo quando lo stato attivo è impostato sulla barra degli strumenti. Il codice tabindex="0" specifica che la barra degli strumenti è attiva nell'ordine del documento.
Considera le specifiche complete per una barra degli strumenti di esempio riportata di seguito:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Dopo aver aggiunto ruoli, stati e proprietà WAI-ARIA al DOM di un controllo, Google Chrome segnala gli eventi appropriati allo screen reader. Il supporto di WAI-ARIA è ancora in fase di sviluppo, pertanto Google Chrome potrebbe non generare un evento per ogni proprietà WAI-ARIA e gli screen reader potrebbero non riconoscere tutti gli eventi generati.
Per un tutorial rapido sull'aggiunta di controlli WAI-ARIA ai controlli personalizzati, vedi Presentazione di Dave Raggett da WWW2010.
Imposta lo stato attivo sui controlli personalizzati
Lo stato attivo della tastiera è essenziale per gli utenti che navigano sul web senza usare il mouse. Assicurati che i controlli operativi e di navigazione, come pulsanti, caselle di elenco e barre dei menu, possano attivare lo stato attivo della tastiera.
Per impostazione predefinita, gli unici elementi nel DOM HTML che possono ricevere lo stato attivo della tastiera sono gli ancoraggi, i pulsanti e i controlli del modulo. Tuttavia, se imposti l'attributo HTML tabIndex su 0, gli elementi DOM vengono inseriti nella
sequenza di tabulazione predefinita, in modo che abbiano lo stato attivo della tastiera.
element.tabIndex = 0
element.focus();
L'impostazione tabIndex = -1 rimuove l'elemento dalla sequenza di schede, ma consente comunque all'elemento di
ricevere lo stato attivo della tastiera in modo programmatico.
Supporto dell'accesso tramite tastiera
Le estensioni dovrebbero essere utilizzabili soltanto con una tastiera, in modo da consentire l'accesso agli utenti che non possono usare un mouse e agli utenti esperti che semplicemente non lo usano.
Navigazione
Verifica che un utente possa navigare tra le diverse parti di un'estensione senza utilizzare il mouse. Verifica che i popup siano accessibili da tastiera. Utilizza le scorciatoie da tastiera di Chrome per determinare se un'estensione è navigabile.
Accertati di poter vedere facilmente quali parti dell'interfaccia sono collegate allo stato attivo della tastiera. In genere, i contorni del focus si spostano nell'interfaccia; tuttavia, se il CSS viene utilizzato troppo spesso, i contorni potrebbero essere soppressi o il contrasto potrebbe essere ridotto.
Scorciatoie
La strategia di navigazione da tastiera più comune prevede l'uso del tasto Tab per ruotare lo stato attivo nell'interfaccia di un'estensione, ma non è sempre l'opzione più semplice o più efficiente.
Un semplice gestore della tastiera JavaScript potrebbe avere il seguente aspetto. Nota come la proprietà WAI-ARIA
aria-activedescendant viene aggiornata in risposta all'input dell'utente per riflettere il pulsante attuale della barra degli strumenti
attiva.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Le estensioni possono creare scorciatoie da tastiera esplicite per elementi importanti dell'interfaccia utente delle estensioni. Per implementare queste scorciatoie, connetti i listener di eventi della tastiera ai controlli. Avvisa gli utenti delle scorciatoie disponibili fornendole nella pagina delle opzioni.
Fornire contenuti accessibili
Fornire contenuti accessibili è importante per tutti gli utenti. Molte delle linee guida che seguono possono sembrare familiari, in quanto rispecchiano best practice per tutti i contenuti web.
Testo
La scelta dei caratteri e delle dimensioni del testo influiscono sulla leggibilità dei contenuti di un'estensione. Per gli utenti con problemi visivi potrebbe essere necessario aumentare le dimensioni del testo dell'estensione. Se usi le scorciatoie da tastiera, assicurati che non interferiscano con le scorciatoie per lo zoom integrate in Chrome.
Come indicatore della flessibilità dell'interfaccia utente di un'estensione, applica il test del 200%; se la dimensione del testo o lo zoom della pagina viene aumentato del 200%, è comunque utilizzabile?
Evita di inserire testo nelle immagini. Gli utenti non sono in grado di modificare le dimensioni e gli screen reader non sono in grado di interpretare le immagini. Scegli invece di utilizzare un carattere web con stili, ad esempio uno dei caratteri disponibili nell'API Google Font. I caratteri web possono adattarsi a dimensioni diverse e sono accessibili agli utenti che utilizzano screen reader.
Colori
Il colore di sfondo e il colore del testo in un'estensione devono presentare un contrasto sufficiente. Utilizza uno strumento per il controllo del contrasto per verificare se i colori di sfondo e in primo piano creano un contrasto appropriato.
Quando valuti il contrasto, verifica che ogni parte dell'estensione che si basa su grafici per trasmettere informazioni sia chiaramente visibile. Per immagini specifiche, è possibile utilizzare strumenti come Coblis - Color Blindness Simulator per vedere l'aspetto di un'immagine in varie forme di carenza di colore.
Valuta la possibilità di offrire temi a colori diversi o di dare all'utente la possibilità di personalizzare lo schema di colori per creare un contrasto migliore.
Audio
Se un'estensione si basa su audio o video per trasmettere informazioni, assicurati che siano disponibili sottotitoli o una trascrizione. Per ulteriori informazioni sui sottotitoli codificati, consulta le linee guida del programma Descritto e Captioned Media Program.
Immagini
Fornisci un testo alternativo informativo per le immagini.
<img src="img.jpg" alt="The logo for the extension">
Utilizza il testo alternativo per indicare lo scopo dell'immagine, anziché una descrizione letterale dei contenuti. Le immagini distanziali o puramente decorativi dovrebbero avere un testo alternativo "" vuoto oppure essere rimosse completamente dal codice HTML e posizionate nel CSS.
Se l'estensione deve utilizzare il testo in un'immagine, includi il testo dell'immagine nel testo alternativo. Una buona risorsa a cui fare riferimento è l'articolo di WebAIM sul testo alternativo appropriato.
Scopri di più
Scopri di più sull'accessibilità in Chrome visitando il canale A11ycasts e leggendo la documentazione tecnica sull'accessibilità di Chromium.