Einfaches ARIA Tip #1: Das Attribut aria-required

Inspiriert durch eine Unterhaltung, die ich vor einigen Tagen mit Aaron Leventhal, dem Modulbesitzer der Barrierefreiheitsfunktionen in den Mozilla-Produkten, führte, möchte ich mit diesem Posting eine kleine Serie starten, die zeigen soll, mit wie wenig HTML-Code man ARIA in seine Webseiten einbauen kann, ohne gleich ganze ARIA-Steuerelemente programmieren zu müssen, und so die Barrierefreiheit bestimmter Webseiten zu verbessern.

Es gibt in ARIA einige sogenannte universelle Attribute, also Attribute, die nicht nur ARIA-Steuerelementen vorbehalten sind, sondern die auf jedes HTML-Element angewendet werden können. Der Firefox, demnächst auch Opera, und in Zukunft hoffentlich noch mehr Browser, kann dann im Zusammenspiel mit modernen Screen-Readern dem Anwender gleich die richtigen Hinweise zur Bearbeitung eines Formulars geben, ohne dass z. B. ein Sternchen „*“ für erforderliche Felder o. ä. verwendet werden muss. Browser, die dieses Attribut noch nicht unterstützen, stolpern aber nicht über das Attribut, so dass es hinzuzufügen nichts kaputtmacht.

Das erste Attribut, das ich vorstellen möchte, heißt aria-required und kann den wert „true“ oder „false“ annehmen. Schauen wir uns mal folgendes Beispielformular an:








Im obigen Formular sind die Felder firstName und lastName als erforderlich gekennzeichnet, indem man ihnen das Attribut aria-required=“true“ zugewiesen hat.

Der NVDA, JAWS 9.0 und Window-Eyes ab Version 5.5 zeigen im Zusammenspiel mit dem Firefox an, dass diese beiden Eingabefelder erforderlich sind. JAWS 8.0 unterstützt dieses Attribut noch nicht, und auch im Orca unter Linux fehlt die Ansage bisher.

Ein Appell also an alle Webautoren: Wenn ihr keine Sternchen oder ähnlich offensichtlichen Kennzeichnungen verwenden könnt/dürft, fügt euren Elementen, die unbedingt erforderlich sind, das Attribut aria-required=“true“ hinzu, um die Felder für unterstützende Browser und Screen Reader so kenntlich zu machen.

12 Gedanken zu „Einfaches ARIA Tip #1: Das Attribut aria-required“

  1. Ich bin zugegebenermassen ein Neuling in sache ARIA und NVDA, aber: ich hab mal zum test die allerletzte Version von NVDA installiert und mit Firefox 3.0b4pre getestet…und kann leider NVDA nicht dazu bringen, deine ARIA Attribute anzumelden. Am I missing something?

  2. Hallo Simon,

    ich arbeite zur Zeit immer mit dem, was direkt aus dem Sourcecode-Repository kommt.

    Und zu den Firefox- und Thunderbird-Builds folgende Links:
    Firefox: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
    Thunderbird: http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/
    Hier gibt es immer die neueste englische Version. Lokalisierte Versionen findet man anstatt in latest-trunk im jeweiligen Ordner latest-trunk-l10n, abewr diese können evtl. kaputt sein, weil Übersetzer nicht jeden Tag die Entwicklerbäume aktualisieren.

    Marco

  3. Wofür um alles in der Welt steht ARIA?? Ich dachte immer, Vertreter barrierefreier Webangebote würden dies irgendwie erklären? Entweder in Klammern, oder aber via HTML Auszeichnung.

    Ich tue hiermit mal so, als wüsste ich nicht, dass ARIA „Alteingessessene Rechte in Aachen“ bedeuten soll…

  4. Hallo Erwin, ARIA steht für Accessible Rich Internet Applications. Die heute korrekte Benennung ist WAI-ARIA, Web Accessibility Initiative, Accessible Rich Internet Applications. Werde in Zukunft darauf achten, in Blog Posts die erste Erwähnung mit einem abbr-Tag zu versehen. 😉

  5. Hi Marco, Ich weiß ja nicht, ob dieser Artikel ab und zu mal noch gelesen wird, aber die von dir genannten Eingabefelder sind wohl verloren gegangen.

Was denkst Du darüber?