Kommentare zu: Anreicherung meiner Webseite mit WAI-ARIA

Von: Weitere WAI-ARIA-Verbesserungen « F-LOG-GE

Weitere WAI-ARIA-Verbesserungen « F-LOG-GE — Fri, 12 Mar 2010 11:29:07 +0000

[...] meinen gestrigen Beitrag meldete sich Alexander Farkas mit zwei interessanten Kommentaren und einem alternativen Skriptvorschlag. Ich habe seine Anregung bzgl. der [...]

Von: Marco Zehe

Marco Zehe — Fri, 12 Mar 2010 10:00:39 +0000

Hi zusammen!
Es ist richtig, dass aria-expanded nicht auf alles anwendbar ist. Siehe hierzu die Beschreibung. Die Spezifikation fasst es inzwischen aber so weit, dass wir uns im entsprechenden Bug dazu entschlossen haben, es als universelles Attribut zu behandeln. Und streng genommen ist Jens’ Anwendung sogar innerhalb der Spezifikation, denn “Sectionhead” ist explizit als Rolle zugelassen.

Von: alexander farkas

alexander farkas — Fri, 12 Mar 2010 00:32:39 +0000

Hi nochmal, ja, es sollte absolut reichen, wenn die h3 eine role="button" und ein tabindex="0" bekommt. Allerdings ist ein click-Listener hier nicht mehr ausreichend, da das click-Event nur bei "natürlich" klickbaren Elementen ein eingabeunabhängiges Event darstellt (außer man verwendet Screenreader oder andere ATs, die dieses Event eingabeunabhängig machen. (Das Script fügt daher ein neues Event hinzu namens 'ariaclick'.)) Was das Testen mit Screenreader angeht, so war dein Script SR-zugänglich. Lediglich hat die Aria-Verbesserung keine solche Verbsserung gezeigt. Ich kann mich jetzt irren (war nämlich nur ein voreingenommener Schnelltest, in dem ich meine anfängliche Vermutung, daß das nicht funktioniert, bestätigt sehen wollte): aber das dürfte in praktisch allen Screenreadern der Fall sein. Laut MSAA-Inspect hat FF 3.6 unter WinXP das aria-expanded gar nicht übertragen und weder Jaws 10 noch NVDA haben sich das bei mir auf anderem Wege gezogen. Im IE8 habe ich gar nicht erst getestet, da er hier das expanded eh nur bei trees, tabs und Konsorten beherrscht. Letztendlich bin ich durch deinen Beitrag auf einen neuen/alten overflow-hidden Jaws/FF-Bug gestoßen. Danke, es werden Tage der Verzweiflung folgen.

Von: Jens Grochtdreis

Jens Grochtdreis — Thu, 11 Mar 2010 23:40:29 +0000

Hallo Alexander. Marco Zehe hatte meine Implementierung getestet und für funktionsfähig empfunden. Aber es kann natürlich sein, daß das nicht in jedem Screenreader funktioniert. Deine Version ist wesentlich umfangreicher als meine. Ich muss sie mir mal in Ruhe anschauen, um sie zu verstehen. Wenn ich darf, würde ich sie bei mir einbauen. Dann spätestens ist es aber wohl doch Zeit für eine externe Datei. Oder ich versuche den Code zu komprimieren. Die wenigen Zeilen, die ich bisher geschrieben hatte, waren mir eine externe Datei nicht wert.

Würde es nicht genügen, zusätzlich zu den beiden jetzt schon hinzugefügten Attributen noch das role-Attribut hinzuzufügen?

Und würde es bei der Überschrift nicht genügen, mittels jQuery einen Fake-Link einzufügen? Dann stellt sich aber immernoch die Frage, wohin dieser Link führen soll. Ich stehe nicht auf Fake-Links. Das mag eine Stilfrage sein. Aber ich behalte sie gerne bei, bis ich einen vernünftigen Grund finde, die Stilfrage anders zu bewerten. Den Fokus kann ich noch hinzufügen, gute Idee. Vielen Dank für Deinen Input.

Von: alexander farkas

alexander farkas — Thu, 11 Mar 2010 22:10:04 +0000

Nur funktioniert das nicht was du da schreibst. Marco hat sich, so wie ich das damals gelesen habe, verkürzt ausgedrückt. Da er in einem älteren Artikel erwähnt hat, daß die a11y-Entwickler bei Mozilla das aria-expanded-Attribut – entgegen der aria-Spezifikation – erweitert haben (geht auch bei button), habe ich nicht schon da “klug geschissen” .

Gründe:
1. aria-expanded ist kein Universal-Attribut. Damit das aria-expanded-Attribut auch richtig weitergeleitet wird, muß das Element eine entsprechende Rolle haben. Diese Rollen werden durch die aria-Spezifikation festgelegt. Wie gesagt, Mozilla hat sich entschieden, daß aria-expanded-Attribut auch in anderen Fällen “weiterzuleiten”. (Das war die richtige Entscheidung. Meiner Meinung nach sollten eh alle Aria-Eigenschaften universal einsetzbar sein. (Ob sie dann funktionieren/richtig vom Screenreader interpretiert werden können, ist dann eine andere Frage.)

Damit du aber von diesem Feature profitieren kannst, muß da natürlich eine Rolle ran, die das expanded-Attribut unterstützt.

2. Du “mißbrauchst” eine h3 als klickbares Element. Das ist bei ausgeschaltetem JS richtig, bei eingeschaltetem ‘falsch’, auch das schreit nach einer Veränderung der Rolle. (Der gemeine Screenreader errät nur, aufgrund eines schlechten Workarounds, daß die h3 wahrscheinlich klickbar ist. In Zeiten, in denen Entwickler vermehrt Event-Delegation einsetzen, ist dieser Workaround nicht mehr zuverlässig und man sollte sich nicht auf ihn verlassen.)

3. Ein Tastaturnutzer würde sich freuen, wenn die h3-Überschrift fokusierbar, der focus gestyled und auch durch Tastatur einen klick auslösen würde.

Script-Vorschlag für zugängliches Toggle