Anmerkung der Redaktion: Die „Axe Coconut“-Erweiterung ist nicht mehr verfügbar.
Das „ axe-core “-Team unter Deque hat intensiv an einer Reihe von Updates für das „axe“-Ökosystem von Tools zur Barrierefreiheitsprüfung gearbeitet. Werfen wir einen Blick auf die neuesten Entwicklungen, damit Sie entscheiden können, welche Tools für Sie am besten geeignet sind!
Wir stellen vor: axe Coconut
Um es jedem zu erleichtern, die neuesten Entwicklungen von „ axe-core “ zu testen, haben wir eine neue kostenlose Chrome-Erweiterung namens „axe Coconut“ eingeführt. Sie enthält unsere neuesten Code-Änderungen für Shadow DOM (mehr dazu weiter unten), wobei auch experimentelle Regeln aktiviert sind.
Mit der „axe Coconut“-Erweiterung, die nach dem gleichen Prinzip wie „Chrome Canary“ oder „Firefox Nightly“ entwickelt wurde, können Sie unsere neuesten APIs und Regeln ausprobieren, bevor diese in stabileren Kanälen veröffentlicht werden, wie beispielsweise in unserer regulären „axe“-Chrome-Erweiterung.
Sie können axe Coconut kostenlos aus dem Chrome Store herunterladen und auf allen Websites ausprobieren, auch auf solchen mit Shadow DOM. Sie können es sogar parallel zu unserer regulären axe-Chrome-Erweiterung nutzen: Zur Unterscheidung der beiden Versionen werden Sie einen anderen DevTools-Tab, ein anderes Logo und ein anderes Popup-Fenster für die Browser-Aktion bemerken. Wir würden uns über Ihr Feedback freuen, sobald Sie mit dem Testen beginnen, damit wir gegebenenfalls notwendige Änderungen an unseren APIs vornehmen können, bevor wir den Code für alle veröffentlichen.
axe-core 3.0 Alpha
Wir haben für Version 3.0.0 wesentliche Änderungen an der JavaScript-Engine „ axe-core “ vorgenommen, darunter die Unterstützung von Shadow DOM und Web Components! Dieser Zweig enthält außerdem dieselben Verbesserungen wie Version 2.4, darunter die Unterstützung von ARIA 1.1 und die Lokalisierung ins Japanische. Die vollständige Liste der Aktualisierungen finden Sie in unserem Changelog.
Um Ihnen die Möglichkeit zu geben, Feedback zu unseren neuen Shadow-DOM-APIs und den Testergebnissen zu geben, bevor diese in der stabilen Version 3.0.0 erscheinen, haben wir damit begonnen, eine Reihe von drei „Alpha“-Versionen unter dem Tag vorab zu veröffentlichen, @next.
So installieren Sie die neueste Vorabversion von „ axe-core “ mit npm:
npm install axe-core@next
Auf diese Weise können Sie die Barrierefreiheit innerhalb von und über Shadow-DOM-Unterbäume hinweg testen, die häufig in Webkomponenten, einschließlich der Polymer-Bibliothek, verwendet werden. Dazu sind benutzerdefinierte APIs erforderlich, die den gesamten abgeflachten DOM-Baum durchlaufen, anstatt DOM-APIs wie `document.querySelector` zu verwenden. Wir übernehmen dies intern für Sie, sodass Sie die vertraute ` axe-core `-API nutzen können, um die gesamte Seite zu testen.
HINWEIS: Um Ihr Shadow-DOM und Komponenten von Drittanbietern zu testen, achten Sie bitte darauf, niemals die Option „Closed Shadow DOM“ zu verwenden, da dies dazu führt, dass die Erweiterungen „ axe-core “ und „aXe“ nicht in das Shadow-DOM einsehen können.
Was zum Teufel ist Shadow DOM?
Kurz gesagt: Shadow DOM, Teil der jüngsten Entwicklung der HTML-Standards in Richtung Web Components, ist eine Möglichkeit, Teile von HTML-Seiten mithilfe von JavaScript zu kapseln. Durch diese Kapselung werden Konflikte aufgrund von CSS-Stilen, globalen JavaScript-Variablen und Element-IDs vermieden. Dieser neue Standard erleichtert die Wiederverwendung von Komponenten von Drittanbietern. Wenn Sie schon einmal versucht haben, ein überambitioniertes jQuery-UI-Widget einzubinden, haben Sie vielleicht schon die Probleme erlebt, die Shadow DOM lösen soll.
Weitere Beispiele für Shadow DOM, die Ihnen vielleicht bereits bekannt sind, sind HTML5-Video-Tags und -Eingabefelder, die mehrere Steuerelemente innerhalb eines einzigen Elements enthalten: Einbetten eines
Shadow DOM as a standard provides developers with the same mechanism for encapsulation browsers have internally relied upon for years. But we can now create our own shadow trees for any HTML element, such as plain DIVs, canvas, or custom elements to name a few.
When you attach custom Shadow DOM to an element (called the host), it creates a boundary at the top of which is a ShadowRoot. The encapsulation of shadow roots means that DOM APIs such as document.querySelector have limited capabilities to pierce the boundary (there is the shadow piercing combinator >>> (allerdings gibt es Einschränkungen hinsichtlich der Spezifität). Deshalb mussten wir unser eigenes Programm schreiben.
Glücklicherweise gab es in der „Accessibility Developer Tools Library“ von Google bereits Vorarbeiten zu dieser Technik, und wir erhielten viel Unterstützung von den Kollegen bei Google, darunter Rob Dobson und Alice Boxhall. Auch sie nutzen „ axe-core “ mittlerweile in ihrem Lighthouse-Tool und werden die Shadow-DOM-Version einsetzen, sobald diese veröffentlicht wird.
Shadow-DOM und Frame-Selektoren in den Ergebnissen von „ axe-core “
Der offensichtlichste Unterschied bei der Verwendung von „ axe-core 3x“ liegt in den Selektor-Zielen, die für Knoten in den Ergebnissen von Barrierefreiheitstests zurückgegeben werden, wenn sich das betreffende Element innerhalb einer Shadow Root befindet. Das Format ist ein JavaScript-Array, das entweder aus Strings (normales DOM mit oder ohne Iframes) oder aus Arrays von Strings (Shadow-DOM mit oder ohne Iframes) besteht.
// CSS Selector in a simple document without iframes
['#myCoolNode']
// CSS Selector inside an iframe
[
'frame.someIframe', '#myCoolNode'
]
// Element inside the shadow DOM of a simple document without an iframe.
// Note the extra brackets []
[
[
'#hostNode, '.someElementInShadowTree'
]
]
Im Klartext, aus unserer API-Dokumentation zum Ergebnisobjekt „ axe-core “:
nodes[n].target: Array aus Zeichenketten oder Arrays aus Zeichenketten. Ist das Element im Array eine Zeichenkette, handelt es sich um einen CSS-Selektor. Enthält das Array mehrere Elemente, entspricht jedes Element einer Ebene von iframe oder frame. Bei einem iframe oder frame sollten zwei Einträge in „target“ vorhanden sein. Bei drei iframe-Ebenen sollten vier Einträge in „target“ vorhanden sein.
Wenn das Element im Array ein Array von Zeichenketten ist, verweist es auf ein Element in einem Shadow-DOM, und jedes Element (mit Ausnahme des n-1. Elements) in diesem Array ist ein Selektor für ein DOM-Element mit einem Shadow-DOM. Das letzte Element im Array verweist auf den letzten Shadow-DOM-Knoten.
Wichtige Shadow-DOM-APIs und Testwerkzeuge
Die Entwicklung und das Testen der internen Engine für „ axe-core “ 3x erfordern den Einsatz einiger unserer neuesten APIs und Testtools. Sofern Sie nicht direkt an der Kernbibliothek arbeiten, dürfte dies für Sie kaum Auswirkungen haben. Wenn Sie jedoch einen Beitrag dazu leisten möchten, sollten Sie unseren aktualisierten Entwicklerleitfaden lesen, um sich mit den Änderungen vertraut zu machen.
Zur Verarbeitung von Shadow DOM haben wir API-Unterstützung für „virtuelle Knoten“ eingeführt. Ein `virtualNode` in axe-core ist ein benutzerdefiniertes JavaScript-Objekt, das einen DOM-Knoten darstellt, der sich entweder innerhalb einer Shadow-Grenze befinden kann oder auch nicht. Dieser Knoten ist in einem abgeflachten Baum organisiert, der die Hierarchie darstellt, die den Barrierefreiheits-APIs zur Verfügung gestellt wird.
Ein `virtualNode`-Objekt enthält den eigentlichen HTML-Knoten, z. B. ein DIV-Element, ein Array mit beliebigen untergeordneten virtuellen DOM-Knoten sowie eine `shadowId`, die angibt, zu welcher Shadow-Root der Knoten gehört. Ist diese nicht definiert, handelt es sich bei dem Knoten lediglich um einen regulären DOM-Knoten.
// VirtualNode
{
actualNode: div,
children: [virtualNodes],
shadowId: undefined
}
Wir übergeben nun den „virtualNode“ und den regulären DOM-Knoten an die Funktionen zur Regelabgleichung sowie an die Funktionen zur Überprüfung und Auswertung. Es gibt einige neue APIs zum Abfragen des abgeflachten (zusammengesetzten) Baums und zum Extrahieren eines Knotens aus dem Baum, die wir intern dort einsetzen, wo die Hierarchie des Barrierefreiheitsbaums von Bedeutung ist.
Um das Schreiben von Tests für Hilfsfunktionen, Prüfungen und Regeln zu vereinfachen, die auf „virtualNodes“ zurückgreifen müssen, haben wir einige Test-Hilfsfunktionen entwickelt. Es gibt eine Hilfsfunktion zur Überprüfung der Shadow-DOM-Unterstützung, mit der wir Tests auf Plattformen überspringen, die Shadow DOM nicht unterstützen, wie beispielsweise PhantomJS. Außerdem gibt es Hilfsfunktionen zum Simulieren eines „checkContext“ und zum Einrichten von Fixtures mit Shadow DOM.
Weitere Informationen findest du im 3x-Entwicklerhandbuch und in unserer automatisierten Testsuite.
axe-core 2.4
In Version 2.4 der JavaScript-Engine „ axe-core “ haben wir eine Reihe von Aktualisierungen an den Barrierefreiheitsregeln veröffentlicht, darunter: grundlegende Unterstützung für ARIA 1.1, Korrekturen bei Comboboxen und beim Farbkontrast sowie weitere Verbesserungen. Diese Aktualisierungen sind sowohl im 2x- als auch im 3x-Zweig verfügbar, sodass Sie sie mit oder ohne experimentelle Shadow-DOM-Unterstützung nutzen können.
Dank unseres Partners Mitsue-Links haben wir unsere Infrastruktur zusätzlich zur niederländischen Lokalisierung nun auch um eine japanische Lokalisierung erweitert. Außerdem haben wir neue Dokumentationen zu Regeln und zur Fehlerbehebung in der CI verfasst.
Die vollständige Liste der Änderungen in Version 2.4 finden Sie im Changelog unter „axe-core “ sowie im Entwicklerhandbuch für den 2x-Zweig auf GitHub.
ARIA 1.1-Attribute
Hier ist eine Liste der ARIA 1.1-Attribute, bei denen wir festgestellt haben, dass sie von assistiven Technologien ausreichend unterstützt werden, um zum jetzigen Zeitpunkt in „ axe-core “ aufgenommen zu werden:
Neu
- aria-modal, mit den Werten: ['true', 'false']
- aria-keyshortcuts: [Zeichenkette]
- aria-placeholder: [Zeichenkette]
- role=feed
- role=Begriff
- aria-colindex, aria-colspan, aria-rowindex, aria-rowspan
- aria-colcount, aria-rowcount
- aria-posinset, aria-setsize
- aria-orientation
Geändert
- aria-haspopup unterstützt nun folgende Werte: ['true', 'false', 'menu', 'listbox', 'tree', 'grid', 'dialog']
Wenn Sie Feedback oder Fragen zu aXe Coconut, „ axe-core “ 3x oder sogar „ axe-core “ 2x haben, wenden Sie sich bitte an uns unter axe@deque.com, über unser GitHub-Repo oder im Gitter-Kanal „axe-core “.
