Enter The Dragon (Drop): Neuordnung der zugänglichen Liste

In den Jahren meiner Tätigkeit als Webentwickler mit Schwerpunkt auf Barrierefreiheit habe ich mich hauptsächlich mit weit verbreiteten, standardisierten UI-Komponenten befasst, die durch assistive Technologien (AT) gut unterstützt werden. Für diese Arten von Widgets gibt es prägnante ARIA-Authoring-Praktiken sowie großartige Tools wie Axe-Core, mit denen Webkomponenten auf Barrierefreiheitsprobleme getestet werden können. Das Erstellen weniger gebräuchlicher Widgets, insbesondere solcher, die keine weit verbreiteten Konventionen für die Benutzerinteraktion haben, kann sehr schwierig sein.

Eine der schwierigsten Herausforderungen, auf die ich gestoßen bin, ist die umsortierbare Drag-and-Drop-Liste. Während eine umsortierbare Liste ein ziemlich häufig verwendetes Widget mit intuitiven Konventionen für Mausbenutzer ist, ist nicht klar, wie Benutzer von rein tastaturgestützten Hilfstechnologien diese einfache Aufgabe ausführen können. Aufgrund des Fehlens unterstützter ARIA-Attribute verwendet Dragon Drop Live-Regionen, um die Informationen zu übermitteln, die alle Benutzer zum Neuordnen einer Liste benötigen.

Live-Regionen

Live-Regionen sind HTML-Elemente, die mit ARIA-Attributen ausgestattet sind, die verwendet werden können, um Screenreader über Inhaltsänderungen zu informieren. Sie ermöglichen es uns, eine vollständig angepasste Screenreader-Ankündigung bereitzustellen, ohne den Fokus verschieben zu müssen! Live-Regionen eignen sich hervorragend für Echtzeit-Updates in entfernten Teilen der Seite, Statusaktualisierungen und zeitkritische Informationen.

Sie werden häufig in Chatprotokollen, Fortschrittsanzeigen, Sportergebnissen und Wetterwarnungen verwendet, sollten jedoch sparsam verwendet werden, da sie leicht zu einer übermäßig ausführlichen Erfahrung für Benutzer von Screenreadern führen können. Wenn Sie neu in Live-Regionen sind oder einfach nur erkunden möchten, was sie tun können, sehen Sie sich meinen Spielplatz für Live-Regionen an, mit dem Sie Ihre eigene benutzerdefinierte Live-Region konfigurieren können.

Wenn Sie Live-Regionen in Ihrer Anwendung verwenden möchten, lesen Sie das Live-Region-Modul auf npm.

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

Warum Live-Regionen verwenden?

In einer idealen Welt hätte ich mich einfach auf die Drag-and-Drop-ARIA-Attribute aria-grabbed -grabbed und aria-dropeffect . In Wirklichkeit werden diese Attribute jedoch nur selten unterstützt, und wenn sie unterstützt werden, ist die Erfahrung für Benutzer von Bildschirmleseprogrammen verwirrend und kontraintuitiv. Darüber hinaus sind diese beiden Attribute seit ARIA 1.1 veraltet, was bedeutet, dass wir in Zukunft keine wachsende Unterstützung für diese Attribute sehen werden.

Das W3C-Gespräch zu dieser Einstellung finden Sie hier. Aufgrund dieser Probleme habe ich mich gegen die Verwendung von aria-grabbed -grabbed und aria-dropeffect in Dragon Drop entschieden. Unterschiedliche Unterstützung für ARIA-Attribute innerhalb der breiten Palette von Hilfstechnologie/Browser-Paarungen ist in der Welt der Barrierefreiheit weit verbreitet. Glücklicherweise werden Attribute für Live-Regionen wie role , aria-live , aria-relevant und aria-atomic von Bildschirmleseprogrammen wie JAWS, NVDA und VoiceOver ziemlich weitgehend unterstützt.

Optimierte Zugänglichkeit

Dragon Drop ist ein hochgradig konfigurierbares Listenumordnungsmodul, das für Benutzer von Maus, Tastatur und Hilfstechnologien funktioniert. Als ich mich vor ein paar Jahren dazu entschloss, es zu schreiben, wurde bei Projekten, an denen ich gearbeitet hatte, mehrmals auf zugängliche Neuordnungslisten hingewiesen, aber ich hatte noch keine funktionierende Lösung gesehen. Von den Dutzenden von Plugins zum Neuordnen von Drag-and-Drop-Listen, auf die ich gestoßen bin, wurden die meisten nicht im Hinblick auf Barrierefreiheit entwickelt und waren daher sehr unzugänglich.

Dragon Drop wurde mit VoiceOver, JAWS und NVDA getestet und ermöglicht es AT-Benutzern, eine Liste erfolgreich neu zu ordnen.

Ich habe mir vorgenommen, alle Fragen zu beantworten, die ein Benutzer haben könnte, wenn er auf eine nachbestellbare Liste stößt. Diese Fragen wurden für sehende Mausbenutzer durch allgemeine Konventionen beantwortet, aber was ist mit den anderen Benutzern?

Wie kann ich einen Artikel abholen?

Indem wir ein Steuerelement bereitstellen, das den Zugriffsstatus eines Elements zusammen mit einem Hilfetext der obersten Ebene übermittelt, können wir diese Frage beantworten. Zum Beispiel teilt ein Steuerelement mit dem zugänglichen Text (von AT erfasst, obwohl es Name, Rolle und Wert ist) „Element 1 neu anordnen, Umschalttaste“ dem Benutzer mit, dass es sich um eine Schaltfläche handelt, die bei Aktivierung das Element aufnimmt und a auslöst Neuordnung.

Dragon Drop verwendet das aria-pressed Attribut, um AT-Benutzern mitzuteilen, wann ein Element „gezogen“ wird und wann nicht. Es kann so konfiguriert werden, dass ein gesamtes Element gezogen werden kann oder nur ein untergeordneter „Ziehgriff“, wodurch in jedem Fall das Vorhandensein von role="button" und tabindex="0" sichergestellt wird.

Beim Aktivieren eines Drag-Items wird aria-pressed="true" auf das Element angewendet und eine konfigurierbare Ansage wie „Item 1 grabbed“ über den Live-Bereich an Screenreader vorgelesen.

Wie kann ich einen Artikel verschieben?

Verwenden von aria-describedby , um die Steuerelemente mit nützlichem Hilfetext zu verknüpfen, z. B. „Aktivieren Sie die Neuordnungsschaltfläche und verwenden Sie die Pfeiltasten, um die Liste neu zu ordnen, oder verwenden Sie Ihre Maus zum Ziehen/Neuordnen.“ teilt dem Benutzer mit, wie er tatsächlich nachbestellen soll. Dadurch wissen Screenreader-Benutzer, dass beim Drücken eines Elements die Aufwärts- und Abwärtspfeiltasten das Element in der Liste nach oben bzw. unten verschieben.

Wie kann ich einen Gegenstand fallen lassen?

Da das aria-pressed Attribut verwendet wird, können Benutzer leicht erkennen, wie ein Element abgelegt wird. In irgendeiner Weise, Form oder Gestalt, vermitteln alle am weitesten verbreiteten Screenreader den gedrückten Zustand einer Umschalttaste. Das Attribut „aria-pressed“ wird auf „false“ gesetzt, wenn ein Element abgelegt wird, und Bildschirmlesegeräten wird eine angepasste Ansage wie „Element 1 abgelegt“ vorgelesen.

Woher weiß ich, wann die Liste neu geordnet wurde?

Jedes Mal, wenn die Aufwärts- und Abwärtspfeiltasten verwendet werden, um die Reihenfolge der Liste zu ändern, müssen wir sicherstellen, dass alle Benutzer über diese Änderung informiert werden. Für sehbehinderte Benutzer müssen wir uns erneut auf Live-Regionen verlassen. Eine konfigurierbare Ansage wie „Die Liste wurde neu geordnet, Element 1 ist jetzt der 4. Platz in der Liste.“ , wird ausgelesen, um den aktualisierten Zustand der neu geordneten Liste zu übermitteln. Dies ist wichtig, da sehende Benutzer eine sofortige visuelle Rückmeldung der geänderten Reihenfolge erhalten und genau diese Informationen an AT-Benutzer übermittelt werden müssen.

Wie storniere ich die Nachbestellung?

Da wir uns für eine solche Interaktion nicht auf eine weit verbreitete Konvention verlassen können, können wir einfach Anweisungen wie „Drücken Sie die Escape-Taste, um die Neuordnung abzubrechen“ in den Hilfetext einfügen. Darüber hinaus verwenden wir die Live-Region, um eine angepasste Anzeige bereitzustellen, die den Benutzer über die Stornierung informiert.

Tastaturinteraktion

Den Drachen in Aktion sehen

Sehen Sie sich die Dragon Drop-Demo an, in der Sie ein paar verschiedene Konfigurationen erleben.

Drop von Dragon Drop in Ihre App

Dragon Drop wandelt Ihre gewöhnliche Liste in eine vollständig zugängliche, per Drag-and-Drop umsortierbare Liste um:

 <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>

Installation

Dragon Drop ist ein Open-Source-Projekt (MIT-Lizenz) und kann über npm installiert werden:

 $ npm install drag-on-drop

Es kann mit Modulen wie browserify oder webpack verwendet werden:

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

Dragon Drop kann auch einfach mit dem unpkg CDN in Ihre Seite eingefügt werden:

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

Aufbau

Um eine Vielzahl von Anwendungsfällen zu unterstützen, ist Dragon Drop sehr konfigurierbar.

Unten ist die Standardkonfiguration:

 { 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' } }

Ankündigungen

Die Konfigurationsoption „Ankündigung“ von Dragon Drop ist die wichtigste, da sie das Rückgrat des Screenreader-Erlebnisses ist, das Dragon Drop bietet. Es ist ein Objekt, das die Funktionen "grabbed" , "dropped" , "reorder" und "cancel" enthält, die benutzerdefinierte Live-Regionsankündigungen für alle stattfindenden Interaktionen ermöglichen.

Jede dieser Funktionen muss eine Zeichenfolge mit Ankündigungstext zurückgeben, die der Live-Region hinzugefügt wird, wenn die angegebene Aktion auftritt. Ein zusätzlicher Vorteil der Verwendung dieser Funktionen besteht darin, dass sie die Lokalisierung der Live-Regionsnachrichten unterstützen.

Um die Ankündigungen zu erleichtern, werden das Listenelementelement, in dem die Aktion stattfand, und das Array von Elementen in der Liste jeweils als Argumente übergeben.

 { 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' } }

Hilfstext

Es ist absolut wichtig, dass Sie einen Hilfetext bereitstellen, der beschreibt, wie Sie die nachbestellbare Liste verwenden. Dies ist etwas, was Dragon Drop nicht für Sie tut, um weniger eigensinnig zu bleiben, wie dieser Text für Hilfstechnologien verfügbar gemacht wird. Die empfohlene Implementierung besteht darin, aria-describedby zu verwenden, um den Hilfetext wie folgt mit den interaktiven Elementen zu verknüpfen:

 <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 auf GitHub

Die dritte Version von Dragon Drop wurde kürzlich veröffentlicht. Wenn Sie daran interessiert sind, lesen Sie bitte die Dragon Drop-Dokumentation auf GitHub. Ein besonderer Dank gilt den Entwicklern von Dragula, dem Modul, das Dragon Drop für die Mausinteraktion verwendet, sowie Aaron Pearlman, der das fantastische Logo entworfen hat!

Die Zukunft des Drachen

Wenn die Drag-and-Drop-Interaktion in Zukunft zur technischen Spezifikation von WAI-ARIA hinzugefügt wird, könnte sich die Tatsache ändern, dass Dragon Drop auf nicht standardmäßige Interaktionen und Live-Regionen angewiesen ist. Ich werde weiterhin Tests durchführen, um sicherzustellen, dass es von so vielen Screenreadern wie möglich gut unterstützt wird, und mich über die neuesten ARIA-Spezifikationen auf dem Laufenden halten. Darüber hinaus befinden sich einige Funktionen in der Pipeline, darunter die Unterstützung für Touchscreens/mobile Geräte sowie mehrspaltige Listen (wie Sprintboards). Eine weitere Funktion, die in Zukunft hinzugefügt werden kann, ist eine Dragon Drop React-Komponente.

Derzeit kann Dragon Drop mit React verwendet werden, wie in der Demo unten gezeigt, aber es ist nicht ideal, da die DOM-Änderungen, die durch die Neuordnung der Liste verursacht werden, nicht von React erfasst werden, was zu unerwartetem Verhalten führen kann. Ich fordere jeden auf, der Fehler in Dragon Drop findet oder sogar Ideen für Funktionen hat, ein Problem auf GitHub zu erstellen. Alle Rückmeldungen und Beiträge sind willkommen und werden sehr geschätzt!