Enter The Dragon (Drop): riordino dell'elenco accessibile

Negli anni in cui sono uno sviluppatore web con particolare attenzione all'accessibilità, mi sono occupato principalmente di componenti dell'interfaccia utente standardizzati e ampiamente adottati, ben supportati dalle tecnologie assistive (AT). Per questi tipi di widget, ci sono pratiche di authoring ARIA concise così come ottimi strumenti come axe-core che possono essere usati per testare i componenti web per problemi di accessibilità. Creare widget meno comuni, in particolare quelli che non hanno convenzioni ampiamente adottate per l'interazione dell'utente, può essere molto complicato.

Una delle sfide più difficili che ho incontrato è l'elenco di trascinamento della selezione riordinabile. Sebbene un elenco riordinabile sia un widget piuttosto comunemente usato con convenzioni intuitive per gli utenti del mouse, non è chiaro come gli utenti di tecnologie assistive basate solo sulla tastiera possano eseguire questo semplice compito. A causa dell'assenza di attributi ARIA supportati, Dragon Drop utilizza le regioni live per trasmettere le informazioni necessarie a tutti gli utenti per riordinare un elenco.

Regioni in diretta

Le regioni live sono elementi HTML dotati di attributi ARIA che possono essere utilizzati per notificare agli screen reader le modifiche al contenuto. Ci consentono di fornire un annuncio dello screen reader completamente personalizzato senza dover spostare l'attenzione! Le regioni live sono ottime per gli aggiornamenti in tempo reale nelle parti remote della pagina, gli aggiornamenti di stato e le informazioni urgenti.

Sono comunemente usati nei registri delle chat, negli indicatori di progresso, negli aggiornamenti dei risultati sportivi e negli avvisi meteo, ma dovrebbero essere usati con parsimonia poiché possono creare facilmente un'esperienza eccessivamente dettagliata per gli utenti di screen reader. Se non conosci le regioni live o vuoi semplicemente esplorare cosa possono fare, dai un'occhiata al mio playground della regione live, che ti consente di configurare la tua regione live personalizzata.

Se desideri utilizzare le regioni live nella tua applicazione, fai riferimento al modulo Regione live su npm.

 <div aria-live="assertive" role="log" aria-relevant="additions" aria-atomic="true"></div>

Perché usare le regioni live?

In un mondo ideale, sarei stato in grado di fare semplicemente affidamento sugli attributi ARIA drag-and-drop aria-grabbed -grabbed e aria-dropeffect . Tuttavia, in realtà, il supporto per questi attributi è raro e, se supportato, l'esperienza è confusa e controintuitiva per gli utenti di screen reader. Inoltre, questi due attributi sono stati deprecati da ARIA 1.1, il che significa che non vedremo crescere il supporto per questi attributi in futuro.

La conversazione del W3C su questa deprecazione può essere trovata qui. A causa di questi problemi, ho deciso di non usare aria-grabbed -grabbed e aria-dropeffect in Dragon Drop. Il supporto variabile per gli attributi ARIA all'interno della vasta gamma di accoppiamenti tecnologia assistiva/browser è piuttosto diffuso nel mondo dell'accessibilità. Fortunatamente, gli attributi della regione live come role , aria-live , aria-relevant e aria-atomic sono ampiamente supportati da lettori di schermo come JAWS, NVDA e VoiceOver.

Accessibilità ottimizzata

Dragon Drop è un modulo di riordino degli elenchi altamente configurabile che funziona per utenti di mouse, tastiera e tecnologia assistiva. Un paio di anni fa, quando ho deciso di scriverlo, molte volte erano state sollevate liste di riordino accessibili su progetti su cui stavo lavorando ma non avevo ancora visto una soluzione funzionante. Delle dozzine di plug-in di riordino dell'elenco drag-and-drop in cui mi sono imbattuto, la maggior parte di essi non è stata progettata pensando all'accessibilità e, di conseguenza, era molto inaccessibile.

Dragon Drop è stato testato con VoiceOver, JAWS e NVDA e consente agli utenti AT di riordinare correttamente un elenco.

Ho deciso di rispondere a tutte le domande che qualsiasi utente potrebbe avere quando incontra un elenco riordinabile. A queste domande è stata data risposta per gli utenti vedenti del mouse attraverso convenzioni comuni, ma per quanto riguarda il resto degli utenti?

Come posso ritirare un articolo?

Fornendo un controllo che trasmette lo stato acquisito di un elemento, insieme ad alcuni testi di aiuto di primo livello, possiamo rispondere a questa domanda. Ad esempio, un controllo con il testo accessibile (raccolto da AT sebbene sia nome, ruolo e valore) "Riordina elemento 1, pulsante di attivazione/disattivazione" dice all'utente che si tratta di un pulsante che, una volta attivato, prenderà l'elemento e darà il via a un riordino.

Dragon drop utilizza l'attributo aria-pressed per far sapere agli utenti AT quando un oggetto viene "trascinato" e quando non lo è. Può essere configurato per consentire il trascinamento di un intero elemento, o solo di un “manico di trascinamento” figlio, che in entrambi i casi è assicurata la presenza del role="button" e del tabindex="0" .

Quando un elemento di trascinamento è attivato, aria-pressed="true" viene applicato all'elemento e un annuncio configurabile, come "Elemento 1 prelevato" viene letto agli screen reader tramite la regione live.

Come posso spostare un oggetto?

Utilizzo aria-describedby per associare i controlli a utili testi di aiuto come "Attiva il pulsante di riordino e usa i tasti freccia per riordinare l'elenco o usa il mouse per trascinare/riordinare". indica all'utente come procedere per il riordino effettivo. Ciò consente agli utenti di screen reader di sapere che quando viene premuto un elemento, i tasti freccia su e giù spostano l'elemento rispettivamente in alto e in basso nell'elenco.

Come posso rilasciare un oggetto?

Poiché viene utilizzato l'attributo aria-pressed , gli utenti possono facilmente dire come rilasciare un elemento. In qualche modo, forma o forma, tutti i lettori di schermo più utilizzati trasmettono lo stato premuto di un pulsante di commutazione. L'attributo aria-pressed è impostato su "false" quando un elemento viene eliminato e agli screen reader viene letto un annuncio personalizzato come "Elemento 1 eliminato" .

Come faccio a sapere quando l'elenco è stato riordinato?

Ogni volta che si utilizzano i tasti freccia su e giù per modificare l'ordine dell'elenco, è necessario assicurarsi che tutti gli utenti siano informati di questa modifica. Per gli utenti non vedenti, dobbiamo ancora una volta fare affidamento sulle regioni live. Un annuncio configurabile come "L'elenco è stato riordinato, l'elemento 1 è ora il 4° nell'elenco". , viene letto per comunicare lo stato aggiornato dell'elenco riordinato. Questo è importante perché gli utenti vedenti hanno un feedback visivo immediato dell'ordine alterato e che le stesse informazioni devono essere trasmesse agli utenti AT.

Come posso annullare il riordino?

Dal momento che non possiamo fare affidamento su una convenzione ampiamente adottata per tale interazione, possiamo semplicemente includere indicazioni come "Premi escape per annullare il riordino" all'interno del testo della guida. Inoltre, utilizziamo la regione live per fornire una lettura personalizzata che notifica all'utente la cancellazione.

Interazione da tastiera

Vedere il drago in azione

Controlla la demo di Dragon Drop in cui sperimenti un paio di configurazioni diverse.

Drop di Dragon Drop nella tua app

Dragon Drop converte il tuo elenco ordinario in un elenco riordinabile con trascinamento della selezione completamente accessibile:

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> const dragon = document.getElementById('dragon'); // Enter the dragon new DragonDrop(dragon); </script>

Installazione

Dragon Drop è un progetto open source (MIT License) e può essere installato tramite npm:

 $ npm install drag-on-drop

Può essere utilizzato con moduli come browserify o webpack:

 // if you're not down with ES6, you can require('drag-on-drop') import DragonDrop from 'drag-on-drop';

Dragon Drop può anche essere facilmente inserito nella tua pagina con il CDN unpkg:

 <script source="https://unpkg.com/drag-on-drop"></script> <script> var dragonDrop = new DragonDrop(listElement); </script>

Configurazione

Per supportare un'ampia gamma di casi d'uso, Dragon Drop è molto configurabile.

Di seguito è riportata la configurazione predefinita:

 { item: 'li', handle: 'button', activeClass: 'dragon-active', inactiveClass: 'dragon-inactive', announcement: { grabbed: el => `Item ${el.innerText} grabbed`, dropped: el => `Item ${el.innerText} dropped`, reorder: (el, items) => { const pos = items.indexOf(el) + 1; const text = el.innerText; return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`; }, cancel: 'Reordering cancelled' } }

Annunci

L'opzione di configurazione "annuncio" di Dragon Drop è la più importante perché è la spina dorsale dell'esperienza di lettura dello schermo fornita da Dragon Drop. È un oggetto contenente le funzioni "grabbed" , "dropped" , "reorder" e "cancel" che consentono annunci personalizzati della regione live per tutte le interazioni che hanno luogo.

Ognuna di queste funzioni deve restituire una stringa di testo di annuncio che viene aggiunta alla regione attiva quando si verifica l'azione specificata. Un ulteriore vantaggio dell'utilizzo di queste funzioni è che supporta la localizzazione dei messaggi della regione attiva.

Per facilitare gli annunci, l'elemento dell'elemento dell'elenco in cui è avvenuta l'azione e l'array degli elementi nell'elenco vengono passati rispettivamente come argomenti.

 { announcement: { // grabbed is called when an item is picked up grabbed: (targetItem, items) => `${targetItem.innerText} grabbed`, // dropped is called when an item is dropped dropped: (targetItem, items) => `${targetItem.innerText} grabbed`, // reorder is called each time the order of the list is altered reorder: (targetItem, items) => { return `${targetItem.innerText} is now ${items.indexOf(targetItem) + 1} of ${items.length}` }, // cancel is called when a reordering is cancelled (via escape key) cancel: () => 'The initial order has been restored, reordering cancelled' } }

Testo guida

È assolutamente fondamentale fornire un testo di aiuto che descriva come utilizzare l'elenco riordinabile. Questo è qualcosa che Dragon Drop non fa per te per rimanere meno supponente su come questo testo viene reso disponibile alla tecnologia assistiva. L'implementazione consigliata consiste nell'usare aria-describedby per associare il testo della guida agli elementi interattivi in ​​questo modo:

 <p>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</p> <ul> <li> <button>Reorder Item 1</button> <span>Item 1</span> </li> <li> <button>Reorder Item 2</button> <span>Item 2</span> </li> <li> <button>Reorder Item 3</button> <span>Item 3</span> </li> </ul>

Dragon Drop su GitHub

La terza versione di Dragon Drop è stata recentemente rilasciata. Se sei interessato a usarlo, fai riferimento alla documentazione di Dragon Drop su GitHub. Un ringraziamento speciale va ai creatori di Dragula, il modulo utilizzato da Dragon Drop per l'interazione con il mouse, e ad Aaron Pearlman che ha disegnato il fantastico logo!

Il futuro del drago

Se l'interazione drag-and-drop viene aggiunta alle specifiche tecniche WAI-ARIA in futuro, il fatto che Dragon Drop si basi su interazioni non standard e regioni live potrebbe cambiare. Continuerò a eseguire i test assicurandomi che rimanga ben supportato dal maggior numero possibile di lettori di schermo e mi tenga aggiornato con le ultime specifiche ARIA. Inoltre, ci sono alcune funzionalità in cantiere, incluso il supporto per dispositivi mobili/touch screen, nonché elenchi a più colonne (come le schede sprint). Un'altra funzionalità che potrebbe essere aggiunta in futuro è un componente Dragon Drop React.

Attualmente, Dragon Drop può essere utilizzato con React, come mostrato nella demo qui sotto, ma non è l'ideale perché le modifiche al DOM causate dal riordino dell'elenco non vengono raccolte da React, il che può causare comportamenti imprevisti. Invito chiunque trovi bug in Dragon Drop o abbia idee per funzionalità di creare un problema su GitHub. Tutti i feedback e i contributi sono ben accetti e molto apprezzati!