Le estensioni consentono agli utenti di creare la propria esperienza di navigazione ideale, personalizzata in base alle loro abilità e preferenze. Le estensioni devono includere componenti di accessibilità che incoraggino una base di utenti inclusiva consentendo alle persone con disabilità visive, perdita dell'udito, destrezza limitata e altre disabilità di accedere all'estensione.
Tutti, non solo gli utenti con esigenze speciali, possono beneficiare delle funzioni di accessibilità. Gli utenti con problemi di vista, con scarsa destrezza e gli utenti esperti possono trarre vantaggio dalle scorciatoie da tastiera. I sottotitoli codificati e le trascrizioni sono essenziali per gli utenti sordi, ma aiutano anche 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 fare affidamento su una lente d'ingrandimento e, eventualmente, su uno screen reader. Sebbene sia impossibile prevedere quali strumenti verranno utilizzati per accedere a un'estensione, esistono passaggi che ogni sviluppatore può intraprendere per rendere un'estensione il più accessibile possibile.
Integra controlli UI accessibili
Se gli utenti non possono accedere ai controlli dell'interfaccia utente, non possono utilizzare un'estensione. Il modo più semplice per creare un'interfaccia utente accessibile è utilizzare un controllo HTML standard.
Controlli standard
Se possibile, utilizza i controlli dell'interfaccia utente HTML standard. I controlli HTML standard sono accessibili da tastiera, si adattano 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 UI accessibili agli screen reader tramite un set standard di attributi DOM. Questi attributi forniscono allo screen reader informazioni sulla funzione e sullo stato corrente dei controlli in una pagina web.
Per aggiungere il supporto di WAI-ARIA ai controlli personalizzati, gli elementi DOM di un'estensione dovranno essere modificati per includere gli attributi utilizzati da Chrome per generare eventi durante l'interazione dell'utente. Gli screen reader reagiscono 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 la barra degli strumenti è attiva. Il codice tabindex="0" specifica che la barra degli strumenti riceve lo stato attivo nell'ordine del documento.
Di seguito è riportata la specifica completa di una barra degli strumenti di esempio:
<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>
Una volta aggiunti i ruoli, gli stati e le proprietà WAI-ARIA al DOM di un controllo, Google Chrome genera gli eventi appropriati per lo screen reader. Poiché il supporto di WAI-ARIA è ancora in fase di sviluppo, 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 breve tutorial sull'aggiunta di controlli WAI-ARIA ai controlli personalizzati, consulta la presentazione di Dave Raggett al WWW2010.
Impostare lo stato attivo sui controlli personalizzati
L'elemento attivo tramite tastiera è indispensabile per gli utenti che navigano sul web senza usare il mouse. Assicurati che i controlli di operazione e navigazione, come pulsanti, caselle di elenco e barre dei menu, possano ricevere lo stato attivo della tastiera.
Per impostazione predefinita, gli unici elementi nel DOM HTML che possono ricevere lo stato attivo della tastiera sono ancore, pulsanti e controlli di modulo. Tuttavia, l'impostazione dell'attributo HTML tabIndex su 0 inserisce gli elementi DOM nella sequenza di tabulazione predefinita, consentendo loro di ricevere lo stato attivo della tastiera.
element.tabIndex = 0
element.focus();
L'impostazione tabIndex = -1 rimuove l'elemento dalla sequenza di tabulazione, ma consente comunque all'elemento di ricevere lo stato attivo della tastiera in modo programmatico.
Supportare l'accesso tramite tastiera
Le estensioni devono essere utilizzabili solo con una tastiera, consentendo agli utenti che non possono usare un mouse e agli utenti avanzati che semplicemente non lo fanno di accedervi.
Navigazione
Verifica che un utente possa navigare tra le diverse parti di un'estensione senza utilizzare il mouse. Verifica che qualsiasi utilizzo di un popup sia navigabile da tastiera. Utilizza le scorciatoie da tastiera di Chrome per determinare se un'estensione è navigabile.
Accertati che sia possibile vedere facilmente quali parti dell'interfaccia sono attivate dalla tastiera. In genere, un'outline di messa a fuoco si muove nell'interfaccia, ma se il CSS viene utilizzato in modo eccessivo, l'outline potrebbe essere eliminata o il contrasto ridotto.
Scorciatoie
Anche se la strategia di navigazione da tastiera più comune prevede l'utilizzo del tasto Tab per ruotare lo stato attivo nell'interfaccia di un'estensione, non è sempre l'opzione più semplice o più efficiente.
Un semplice gestore di tastiera JavaScript potrebbe essere simile al seguente. Nota come la proprietà WAI-ARIA
aria-activedescendant viene aggiornata in risposta all'input dell'utente per riflettere il pulsante della barra degli strumenti attivo corrente.
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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
Le estensioni possono creare scorciatoie da tastiera esplicite per elementi importanti dell'interfaccia utente dell'estensione. Per implementare queste scorciatoie, collega gli ascoltatori di eventi della tastiera ai controlli. Informa gli utenti delle scorciatoie disponibili indicandole nella pagina opzioni.
Fornire contenuti accessibili
Fornire contenuti accessibili è importante per tutti gli utenti. Molte delle seguenti linee guida potrebbero sembrarti familiari, in quanto riflettono le best practice per tutti i contenuti web.
Testo
La scelta dei caratteri e le dimensioni del testo influiscono sulla leggibilità dei contenuti di un'estensione. Gli utenti con problemi di vista potrebbe essere necessario aumentare le dimensioni del testo di un'estensione. Se utilizzi 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 le dimensioni del testo o lo zoom della pagina vengono aumentati del 200%, l'interfaccia è ancora utilizzabile?
Evita di incorporare il 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. Puoi invece optare per un carattere web con stili, ad esempio uno dei caratteri presenti nell'API Google Font. I caratteri web possono essere ridimensionati in base alle dimensioni e sono accessibili alle persone che utilizzano screen reader.
Colori
Deve esserci sufficiente contrasto tra il colore di sfondo e il colore del testo in un'estensione. Utilizza un strumento di controllo del contrasto per verificare se i colori di sfondo e di primo piano offrono un contrasto appropriato.
Quando valuti il contrasto, verifica che ogni parte dell'estensione che si basa su elementi grafici per trasmettere informazioni sia chiaramente visibile. Per immagini specifiche, puoi utilizzare strumenti come Coblis - Color Blindness Simulator per vedere come appare un'immagine in varie forme di discromatopsia.
Valuta la possibilità di offrire temi a colori diversi o di consentire all'utente di personalizzare la combinazione di colori per creare un contrasto migliore.
Suono
Se un'estensione si basa sull'audio o sul video per trasmettere le informazioni, assicurati che siano disponibili sottotitoli o una trascrizione. Per ulteriori informazioni sui sottotitoli codificati, consulta le linee guida del programma relativo ai contenuti multimediali descritti e con sottotitoli codificati.
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
di un'immagine. Le immagini distanziatrici o le immagini puramente decorative devono avere un testo alternativo "" vuoto oppure devono essere rimossi completamente dal codice HTML e inseriti nel CSS.
Se l'estensione deve utilizzare del testo in un'immagine, includi il testo dell'immagine nel testo alternativo. Una buona risorsa da consultare è l'articolo di WebAIM sul testo alternativo appropriato.
Scopri di più
Scopri di più sull'accessibilità in Chrome consultando il canale A11ycasts e leggendo la documentazione tecnica sull'accessibilità di Chromium.