Hinzufügen von WAI-ARIA-Attributen mit JS

Question

Bei der Arbeit habe ich eine der Seiten optimiert, die ich für einen unserer Kunden entwickelt habe (ich kann nicht sagen, wer), um mit WAI-ARIA-Attributen ADA-konform zu sein. Ich habe mich gefragt, ob es nicht einfach wäre, eine kleine JS-Bibliothek zu erstellen, die Dinge wie "role = button" zu Ankern hinzufügt, die ich wie eine Schaltfläche gestaltet habe, "tabindex = 0" zu Elementen I hinzufüge möchte "tabellarisch" sein usw.

Ich frage mich, ob es eine gute Praxis ist, WAI-ARIA-Attribute mit JS hinzuzufügen, oder ist das verpönt. Einige Accessibility-Evaluierungs-Tools werden die JS der Seite bei der Auswertung nicht ausführen, sodass sie denken, dass dies Schwachpunkte sind, wenn sie es wirklich nicht sind.

Answer 1

ich im Interesse der progressive enhancement denken, könnte es am besten sein, alle zu setzen Dein ARIA inline und nicht auf Skript angewiesen, um es hinzuzufügen.

Wenn es andere Skriptfehler gibt, wenn die Verbindung unterbrochen wird, wenn ein blockierendes Skript auf dem Weg ist usw., dann wird Ihre Bibliothek möglicherweise nicht ins Spiel kommen und Ihre Bemühungen um eine Korrektur gehen verloren.

Ich möchte auch auf dem aufbauen, was Steve oben über die Verwendung role=button auf einem Link sagte. Vor allem, wenn man bedenkt, dass ein visueller Stil (um einen Link wie eine Schaltfläche aussehen zu lassen) für einen Screenreader bedeutungslos ist (für den viele ARIA-Rollen von Vorteil sind). Ich adressierte andere Tastatur Interaktion gotchas näher in another SO answer, aber hier ist eine gute Wahl, wenn Sie versuchen, eine Verbindung zu einem Knopf drehen:

Ein Hyperlink (<a href>) kann durch Drücken der Enter-Taste ausgelöst werden. Aber eine echte <button> kann durch Drücken der Eingabetaste oder der Leertaste ausgelöst werden. Wenn ein Hyperlink den Fokus hat und der Benutzer die Leertaste drückt, scrollt die Seite einen Bildschirm. Benutzer einiger unterstützender Technologien erwarten ein Verhalten basierend auf dem verwendeten Element.

Auch warne ich vor Putting ein tabindex=0 ein ein Element Sie tabbable sein wollen, wenn es ein interaktives Element ist. Zum Beispiel, setzen Sie es nicht auf eine Überschrift (<h#>), nur damit jemand es als Bildschirmleser (z. B.) Tabulator Navigation durch Überschriften ermöglichen kann.

Answer 2

kann dies hilfreich sein, auch Add ARIA inline or via script? beachten Sie, dass, wenn Sie Rolle verwenden = Taste muss es act like a button (dh entsprechende Tastatur Interaktionsverhalten liefern)