ARIA und Tastaturbedienung

Es gibt einen Werkzeugkasten, mit dem sich HTML für Screenreader nachbessern lässt. Er heißt ARIA, und der wichtigste Rat dazu lautet, ihn möglichst nicht zu benutzen.

01 / 04Die erste Regel von ARIA

Sie steht so in der offiziellen Anleitung: Wenn es ein HTML-Element gibt, das die gewünschte Bedeutung und das gewünschte Verhalten schon mitbringt, nimm dieses statt ARIA.

<div role="button" tabindex="0" onclick="this.textContent='Gedrückt'">Nachgerüstet</div>

<button type="button" onclick="this.textContent='Gedrückt'">Echt</button>

Oben ein div, dem mit role="button" gesagt wurde, es sei ein Knopf, und das mit tabindex="0" erreichbar gemacht wurde. Ein Screenreader kündigt es jetzt als Schaltfläche an.

Es fehlt trotzdem etwas: Ein echter button reagiert auf Eingabe und Leertaste, er lässt sich mit disabled sperren, er schickt in einem Formular ab, und er bringt seine Darstellung mit. Nichts davon kommt mit role mit. role sagt nur, wie etwas heißen soll, und ändert kein Verhalten.

Beide reagieren hier auf einen Klick, du kannst es ausprobieren. Interessant wird es ohne Maus: Klick einmal auf die Seite, dann tab dich zum oberen Element und drück Leertaste oder Eingabe. Nichts passiert. Beim unteren tun beide Tasten, was du erwartest.

Das ist der Grund für die Regel: Falsches oder halbes ARIA ist schlechter als gar keins, weil es etwas verspricht, das nicht eingehalten wird. Ein Nutzer hört „Schaltfläche“, drückt die Leertaste und nichts passiert. Das eben war genau dieser Moment.

02 / 04Wo ARIA hilft

Es bleiben Fälle, in denen HTML allein nicht reicht. Der häufigste ist ein Bedienelement ohne sichtbaren Text:

<button type="button">X</button>

<button type="button" aria-label="Suche schließen">
  <span aria-hidden="true">X</span>
</button>

Der erste Knopf heißt für einen Screenreader schlicht „X, Schaltfläche“. Das ist zwar erreichbar, sagt aber nichts.

Der zweite nutzt zwei Attribute:

• aria-label gibt dem Element einen Namen, der nur für Hilfstechnik existiert. Hier wird aus „X“ ein „Suche schließen“.
• aria-hidden="true" blendet ein Element für Screenreader aus, ohne es visuell zu verstecken. Das ist genau richtig für ein rein dekoratives Zeichen oder ein Icon, das neben einem Text steht, der schon alles sagt. Es ist das Gegenstück zu alt="" beim Bild.

Wichtig dabei: aria-hidden niemals an etwas setzen, das bedienbar ist. Ein ausgeblendeter Knopf, den man trotzdem mit Tab erreicht, ist für Screenreader-Nutzer ein Element ohne jede Auskunft.

Zwei weitere Attribute begegnen dir früh: aria-describedby verweist über eine id auf einen erklärenden Text, etwa den Hinweis unter einem Formularfeld. Und aria-current="page" markiert in einer Navigation den Eintrag der aktuellen Seite.

03 / 04tabindex mit Bedacht

tabindex steuert, ob und wann ein Element beim Tab-Durchlauf erreicht wird.

• tabindex="0" nimmt ein Element in den Durchlauf auf, an der Stelle, an der es im Dokument steht. Nötig nur für Elemente, die von sich aus nicht fokussierbar sind.
• tabindex="-1" nimmt es aus dem Durchlauf, lässt es aber per Skript fokussierbar. Praktisch, um nach einer Aktion den Fokus gezielt irgendwohin zu setzen.
• Positive Werte wie tabindex="3" legen eine eigene Reihenfolge fest, die die des Dokuments überstimmt. Nimm sie nicht. Sie gelten für die ganze Seite, und sobald irgendwo ein neues Element dazukommt, ist die Reihenfolge kaputt. Wenn die Tab-Reihenfolge nicht stimmt, ist fast immer die Reihenfolge im Dokument falsch, und die gehört repariert.

04 / 04Der Sprunglink

<a href="#main">Direkt zum Inhalt</a>

<nav>
  <ul>
    <li><a href="/">Start</a></li>
    <li><a href="/rezepte">Rezepte</a></li>
    <li><a href="/technik">Technik</a></li>
  </ul>
</nav>

<main id="main">
  <h1>Linsensuppe</h1>
  <p>Hier beginnt der eigentliche Inhalt.</p>
</main>

Ganz oben steht ein Link auf #main, und das main trägt genau diese id. Technisch ist das die Sprungmarke aus Abschnitt 4, mehr nicht.

Der Nutzen ist groß: Wer mit der Tastatur navigiert, müsste sich sonst auf jeder Unterseite erst durch das komplette Menü tabben, bevor der Inhalt kommt. Bei zwanzig Menüpunkten und zehn Seiten sind das zweihundert überflüssige Tastendrücke.

Üblicherweise ist der Sprunglink so gestaltet, dass er nur sichtbar wird, sobald er den Fokus bekommt. Das ist eine CSS-Aufgabe. Das HTML dazu ist genau die eine Zeile oben, und es ist die wirkungsvollste einzelne Zeile, die du für die Tastaturbedienung schreiben kannst.