IE kompatibles Markup für ARIA Combobox

Ich mache einen weiteren Versuch, einen Weg zu finden, Ext JS Combobox-Komponenten so zu gestalten, dass sie mit IE / JAWS kompatibel sind. Derzeit verwenden wir das folgende Markup:

Dies funktioniert in Firefox mit JAWS und NVDA recht gut; JAWS in IE wird jedoch das Eingabefeld als "Bearbeiten" anzeigen, wenn es fokussiert ist.

Nachdem Sie das WAI-ARIA Combobox-Muster gelesen haben, bis Sie schielen und mehrere Tage lang experimentieren Ich bin bereit zuzugeben, dass IE einfach zu fehlerhaft ist, um Combos zuverlässig zu machen. Oder vielleicht ist es nicht IE selbst, sondern MSAA / UIA Bridge, wie in dieser Kommentar . Dies könnte auch richtig sein, weil ich mindestens eine Kombination von ARIA-Attributen gefunden habe, die in IE8 / XP mit JAWS (verwendet MSAA) gut funktioniert, aber in IE11 / Win7 mit JAWS (MSAA / UIA) nicht funktioniert hat. p>

Das Markup kann bis zu einem gewissen Grad geändert werden; Was ich nicht ändern kann, ist die Existenz der Verpackungselemente wie bodyEl , triggerWrap und inputWrap . Diese Elemente sind erforderlich, um relevante CSS-Klassen anzuwenden, Fehlerindikatorelemente darzustellen, wenn die Eingabevalidierung fehlschlägt, usw.

Eine weitere Einschränkung besteht darin, dass das Element listbox außerhalb des Komponentenelements gerendert wird. Dies kann aber nicht einfach geändert werden; Auch das Rendern neben der Eingabe scheint nicht zu helfen. Es sollte erwähnenswert sein, dass die Liste selbst beim ersten Expandieren dynamisch dargestellt wird, wobei das Attribut aria-owns nachträglich hinzugefügt wird.

Was ich bisher versucht habe:

• Platzieren von role="combobox" auf dem äußeren Element. Tut nichts Nützliches, Combo wird nicht als solches erkannt.

• Platzieren Sie role="combobox" und relevante Attribute für inputWrap . Auf diese Weise kündigt der IE "Choose edit combo" an, wenn die Eingabe direkt fokussiert wird; Wenn Sie von einem anderen Element aus Tabstopps erstellen, wird stattdessen die Rolle dieses Elements zusammen mit dem Combo-Label angezeigt. Ziemlich lustig, aber nicht wirklich hilfreich.

• Platzieren Sie role="combobox" auf triggerWrap und weisen Sie role="button" der Trigger-Pseudo-Schaltfläche zu. Theoretisch sollte dies dem ersten Entwurfsmuster nahe kommen, aber die Kombination wird nicht als solches erkannt.

• Viele andere Ad-hoc-Kombinationen, von denen die meisten mich nicht mehr erinnern.

Der einzige, quasi funktionierende Weg ist das Platzieren der Combobox-Rolle in inputWrap und , wodurch inputWrap tabbable statt der tatsächlichen Eingabe gemacht wird. Dies entspricht einem Markup in diesem Beispiel , das mehr oder weniger mit IE / JAWS zu arbeiten scheint. Diese Lösung ist jedoch sehr unerwünscht, da sie die Büchse der Pandora voller haariger Fehlerbehebungsfehler öffnet.

Leider sind die Accessibility-Inspektions-Tools in diesem Fall nicht ganz nützlich, da ich eine Problemumgehung für Bugs in der bestehenden Implementierung benötige, nicht strengere Standard-Compliance.

Ein weiteres Hindernis für besseres Verständnis ist die Mehrdeutigkeit in der WAI-ARIA-Spezifikation. Zum Beispiel ist es für das erste Muster erforderlich, dass "das erste Element innerhalb der Combobox ein Eingabetextfeld ist". Bedeutet das zuerst strukturelles Element (d. H. Nicht präsentatives Element) oder absolut erstes untergeordnetes Element? Das Ändern von Markup in beide Richtungen scheint für den IE keinen Unterschied zu machen, es sei denn, der Wrapper <div role="combobox"> ist tabbabel.

Es tut uns leid, wenn dieser Beitrag mehr wie ein Rant aussieht;), aber es ist eigentlich eine Frage: Gibt es eine Möglichkeit, um IE-Mängel zu umgehen, indem Sie ARIA-Attribute auf unsere bestehenden Markup-Elemente anwenden? Wenn nicht, was kann geändert werden, damit es funktioniert (Tabbable-Wrapper sperren)? Und ultimative Bonuspunkte für Einblicke in warum das funktioniert nicht wie erwartet.

Ich würde mich über Hinweise und Vorschläge freuen. Ich bin sehr daran interessiert, dass unsere Combos im IE nicht vollständig verfügbar sind und möchte dieses Problem nach Möglichkeit beheben. Ich habe immer noch eine schwache Hoffnung, dass jemand da draußen ein geheimes Zutatenrezept besitzen könnte, um IE und JAWS miteinander glücklich zu machen. ;)

UPDATE : Hier ist eine Beispielgeige . Beachten Sie, wie Combo in Firefox richtig angekündigt wird, aber es ist nur "Bearbeiten" in IE11 (getestet mit JAWS 16). Um bessere Ergebnisse mit dem Screenreader zu erzielen, empfehle ich die Option Außerhalb von Fiddle öffnen , die im Menü "Teilen" verfügbar ist.