Screenreader und Barrierefreiheit

Screenreader unterstützen Menschen mit Beeinträchtigungen, indem sie den sichtbaren Inhalt auf dem Bildschirm erfassen und vorlesen. Dafür wird der Text mit hilfreichen Zusatzinformationen zur Orientierung in Audio umgewandelt und ausgegeben.

In den meisten Fällen steuern Nutzer, die auf Screenreader angewiesen sind, diese per Tastatur oder, im Fall von mobilen Geräten, über Touch-Kontrollen. Dabei können sie auf eine Reihe von Optionen und Befehlen zurückgreifen, um sich zielgerichtet durch die Seite zu bewegen.

Welche Screenreader konkret benutzt werden, hängt vom jeweiligen Ökosystem der Nutzer ab. JAWS und NVDA sind die wichtigsten Vertreter im Windows-Umfeld. TalkBack ist auf Android-Geräten verfügbar und auf Endgeräten, die mit iOS laufen, ist mit VoiceOver eine Screenreadertechnologie integriert.

Tipps zur Verbesserung der Barrierefreiheit

Die Qualität der Unterstützung durch Screenreader hängt aber stark von der Qualität der HTML-Struktur der jeweiligen Seite ab. Daher möchte ich dir in diesem Beitrag einen Überblick darüber geben, was du tun kannst, um es Screenreadern und ihren Nutzern so einfach wie möglich zu machen, sich effizient auf deiner Seite zurechtzufinden.

Benutze semantisches HTML

Durch die Verwendung von semantischem HTML wird nicht nur die Lesbarkeit des Codes verbessert, sondern auch die Qualität der Unterstützung durch einen Screenreader.

Was ist semantisches HTML?

Semantisches HTML umfasst Elemente, die eindeutig definieren, welche Inhalte sie transportieren.

Beispiele für solche semantischen Elemente sind <main>, <header>, <nav> oder <button>. Ihre Definition ist Bestandteil der HTML-Spezifikation und ist allgemeingültig und wird auch von Screenreadern entsprechend unterstützt.

Durch die Verwendung von semantischem HTML unterstützen wir Screenreader dabei, die Struktur der Seite korrekt zu interpretieren. Dadurch können sie den Nutzern die Informationen so zur Verfügung stellen, dass diese sich zielgerichtet und effizient durch die Seite navigieren können.

Wenn wir die Möglichkeit ignorieren, Inhalte semantisch über HTML auszuzeichnen, verschlechtert sich das Nutzungserlebnis mit Screenreadern erheblich.

Ein typisches Beispiel ist die Verwendung eines <div>⁣-Elements zur Gestaltung eines Buttons.

<div onclick="machWas()">Klick mich!</div>

Dieser Button mag auf der Website wunderschön aussehen und seinen korrekten Dienst verrichten. Ein Screenreader wird jedoch ohne zusätzliche Informationen, auf die wir später noch einmal eingehen werden, nicht den gleichen Grad der Unterstützung bieten können wie bei einem Button, der das semantische HTML-Element <button> verwendet.

<button onclick="machWas()" type="button">Klick mich!</button>

Durch die Verwendung von semantischem HTML erkennt ein Screenreader, dass es sich bei dem Element um einen interaktiven Button handelt, und kann den Nutzer entsprechend unterstützen. Bei der Benutzung eines generischen <div>-Elements geht diese Information verloren.

Integriere eine geeignete und korrekte Überschriftstruktur

Semantisches HTML beinhaltet die Auszeichnung aussagekräftiger Überschriften, die den Inhalt strukturieren. Von dieser Struktur profitieren nicht nur Screenreader, sondern alle Besucher, die sich einen Überblick über die Inhalte verschaffen möchten.

Damit Überschriften einen Wert für Nutzer und Screenreader haben, sollten folgende Best Practices befolgt werden:

• Verwende eine korrekte Hierarchie von Überschriften
• Überspringe keine Hierarchieebenen
• Verwende Überschriften konsistent
• Verwende Überschriften nicht für anderen Inhalt

Korrekte Hierarchie von Überschriften

Die HTML-Elemente für Überschriften sind <h1> bis <h6>. Sie werden verwendet, um eine Hierarchie von Überschriften, wie in einem Inhaltsverzeichnis, aufzubauen. Dabei sollten, wie in einem Buch, keine Ebenen übersprungen oder in der falschen Reihenfolge verwendet werden.

Werden diese Regeln befolgt, lassen sich logische Inhaltsstrukturen aufbauen, die dem Besucher eine Möglichkeit geben, sich effizient zu orientieren und die richtigen Informationen zu finden.

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift 1</h2>
<h3>Überschrift unterhalb von Unterüberschrift 1</h3>
<h3>Überschrift 2 unterhalb von Unterüberschrift 1</h3>
<h2>Unterüberschrift 2</h2>

Die Zwischenüberschriften von <h2> bis <h6> können beliebig häufig auf einer Seite verwendet werden. Eine Ausnahme bildet die <h1>-Überschrift. Da sie den Titel der Seite darstellt, sollte sie nur einmal pro Seite vorkommen.

Kein Überspringen von Hierarchieebenen

Wenn du deine Überschriften verschachtelst, dann gehe immer nur eine Ebene tiefer. Gehe also von <h2> zu <h3>, aber nicht zu <h4>. Das Überspringen von Überschriftenebenen kann nämlich dazu führen, dass Screenreader Überschriften ignorieren und die Navigation durch die Seite somit erschwert wird.

Konsistente Verwendung von Überschriften

Oft gibt es Elemente, die auf mehreren Seiten wiederverwendet werden. Ein Beispiel hierfür sind Navigationen. Achte darauf, dass diese auf allen Seiten auf derselben Überschriftenebene eingeordnet sind. Das erleichtert die Orientierung über Seiten hinweg.

Keine Überschriften für anderen Inhalt

Überschriften beschreiben den Inhalt der folgenden Absätze. Verwende sie nicht, um Inhalte optisch hervorzuheben. Benutze dafür die Mittel, die dir CSS zur Verfügung stellt.

Zeichne die verwendete Sprache korrekt aus

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Eine barrierefreie Seite</title>
</head>
<body>
    <!-- Hier ist der Inhalt der Seite. -->
</body>
</html>

Idealerweise sollte die Sprache einer Seite global im <html>-Element definiert werden. Die meisten Seiten machen das bereits. Das ist nicht nur für Browser oder Suchmaschinen hilfreich, sondern wird auch von Screenreadern verwendet, um die Sprache des Seiteninhalts zu ermitteln. Diese Information ist wichtig, damit der Screenreader den Inhalt in der richtigen Sprache vorliest.

Es ist aber auch möglich, Sprachauszeichnungen auf einer kleineren Ebene vorzunehmen. Befindet sich auf einer Seite etwa ein Abschnitt in einer anderen Sprache als der globalen Seitensprache, so würde der Screenreader ohne eine korrekte Auszeichnung diese Passage falsch aussprechen. In diesem Fall ist es notwendig, die Sprache auf Absatzebene anzugeben.

<p lang="kr">안녕하세요, 잘 지내세요?</p>

Durch die Ergänzung der lang-Information kann der Screenreader die Sprache wechseln und den entsprechenden Teil der Seite korrekt vorlesen, ohne den Nutzer zu verwirren.

Verwende ARIA Rollen und Attribute

ARIA (Accessible Rich Internet Applications) ist eine Spezifikation des W3C. Sie definiert Rollen und Attribute, um assistiven Technologien wie Screenreadern zusätzliche Informationen zur Verfügung zu stellen, damit diese die komplexen Komponenten moderner Anwendungen korrekt interpretieren können.

Landmark Rollen

ARIA Landmarks dienen dazu, die Inhalte einer Seite besser zu strukturieren. Dadurch wird es für Nutzer einfacher, zielgerichtet durch die Seite zu navigieren.

<body>
  <div role="banner"><!-- Seitenheader --></div>
  <div role="navigation"><!-- Eine Navigation --></div>
  <div role="main"><!-- Der Hauptinhalt der Seite --></div>
  <div role="contentinfo"><!-- Seitenfooter --></div>
</body>

Das Beispiel zeigt, wie ARIA-Rollen genutzt werden können, um HTML-Elementen Zusatzinformationen über ihre semantische Struktur mitzugeben. Dies ist zwar möglich. Es verletzt jedoch die erste der fünf Regeln des W3C für die Verwendung von ARIA, die ich bisher unterschlagen habe:

1. Verwende kein ARIA, wenn es stattdessen ein natives HTML-Element oder HTML-Attribut gibt.
2. Ändere die native Semantik nur, wenn es unbedingt erforderlich ist.
3. Alle interaktiven ARIA-Steuerelemente müssen mit der Tastatur bedienbar sein.
4. Verwende die role="presentation" oder das Attribut aria-hidden="true" nicht für fokussierbare Elemente.
5. Stelle sicher, dass alle ARIA-Live-Regionen auf eine Weise angekündigt werden, die nutzbar ist.

Demnach sollte ARIA nur an den Stellen eingesetzt werden, an denen kein natives HTML-Element mit der gleichen Semantik verwendet werden kann oder keines existiert. Das ist für das Beispiel von oben aber der Fall.

<body>
  <header></header>
  <nav></nav>
  <main></main>
  <footer></footer>
</body>

In dieser Version werden ausschließlich native, semantische HTML-Elemente verwendet. Die Landmarks werden vom Screenreader erkannt, auch wenn sie nicht explizit ausgewiesen werden.

Oft gibt es auf einer Seite jedoch mehr als eine Navigation. Neben der Hauptnavigation gibt es oft noch eine zweite, kontextabhängige Navigation sowie eine im Footer.

In solchen Fällen helfen die ARIA-Attribute aria-label oder aria-labelledby weiter.

Wichtige ARIA-Attribute

Erweitern wir das Beispiel um eine weitere Navigation und ergänzen passende Labels, damit die Navigationen für Nutzer eines Screenreaders eindeutig erkennbar sind und es zu keiner Verwirrung kommt.

<body>
  <h1>Page Topic</h1>
  <header></header>
  <h2 id="main-navigation-heading">Hauptnavigation</h2>
  <nav aria-labelledby="main-navigation-heading"></nav>
  <main></main>
  <footer>
    <nav aria-label="Footer Navigation"></nav>
  </footer>
</body>

Hier sehen wir nun auch direkt, wie die Attribute aria-label und aria-labelledby verwendet werden können. Ersteres erhält ein verständliches Label, das vom Screenreader vorgelesen wird, sofern vorhanden. Letzteres erhält die ID eines anderen Elements, das als Label fungiert. In diesem Fall verwendet der Screenreader den Inhalt des anderen Elements als Label.

Weitere ARIA-Attribute, die häufig eingesetzt werden, sind:

• aria-describedby
  • Mit diesem Attribut lassen sich zusätzliche, beschreibende Informationen für ein anderes Element bereitstellen.
• aria-expanded
  • Mit diesem Attribut wird der Zustand eines Elements beschrieben, das ein- und ausgeklappt werden kann.
• aria-hidden
  • Mithilfe dieses Attributs können nicht interaktive Elemente vor assistiven Technologien versteckt werden.

Schreibe aussagekräftige Bildbeschreibungen und Labels

Bildbeschreibungen und Labels sind wichtige Hilfsmittel, um den Inhalt relevanter Bilder und interaktiver Elemente für Screenreader zugänglich zu machen.

Damit diese Beschreibungen einen echten Mehrwert für Screenreader-Nutzer bieten, sollten beim Schreiben folgende Regeln beachtet werden:

• Die Beschreibung sollte präzise und kurz sein. Es geht um Informationen, die für die Nutzer wichtig sind, nicht um ausführliche Zusammenfassungen. Die Texte sollten 150 Zeichen nicht überschreiten, da einige Screenreader den Text sonst abschneiden und nicht vollständig vorlesen.
• Vermeide die Wiederholung unnötiger Texte wie „Bild von ...“, da diese Informationen bereits von Screenreadern vorgelesen werden.
• Achte auch auf korrekte Interpunktion. Sie hilft Screenreadern, korrekte Pausen und Intonationen zu verwenden.
• Beschreibe die konkrete Funktionalität interaktiver Elemente mit aria-labels, damit eindeutig klar ist, welche Interaktion damit verbunden ist.
• Dekorative Elemente auf der Seite brauchen keinen Alt-Text.

Verwende leicht verständliche Sprache

Wenn man beim Schreiben darauf achtet, eine leicht verständliche Sprache zu verwenden, macht man seine Inhalte auch für Gruppen mit kognitiven oder anderen Einschränkungen zugänglich.

Außerdem sollten Abkürzungen und andere Zeichen vermieden werden, die von Screenreadern möglicherweise nicht korrekt interpretiert werden können und somit verwirrend für die Nutzer sind.

Beispiele hierfür sind die Verkürzung von Monaten (Jul) statt der ausgeschriebenen Monatsnamen (Juli) oder die Verwendung von Zeichen zur Angabe von Wertebereichen („2000 – 5000 Besucher“ statt „2000 bis 5000 Besucher“).

Werden Akronyme in einem Text verwendet, dann sollten sie bei der ersten Verwendung ausgeschrieben werden. Jedes weitere Vorkommen sollte über ein <abbr> im HTML ausgezeichnet werden.

<p>Eine wichtige Schnittstelle ist das High Definition Multimedia Interface (HDMI). <abbr title="High Definition Multimedia Interface">HDMI</abbr> wird von vielen Monitoren benutzt.</p>

Schreibe verständliche Texte für Links

Genauso wie klare Sprache und strukturierte Inhalte über Überschriften den Nutzern helfen, sich auf deiner Seite zurechtzufinden, helfen sinnvolle Linkbeschreibungen dabei, sich auf deiner Seite zurechtzufinden. Dies gilt insbesondere für die Verwendung eines Screenreaders.

Es gibt ein paar Regeln, die man unbedingt befolgen sollte.

• Benutze eindeutige Linkbezeichnungen, damit direkt klar ist, wohin der Link führt und was man bei einem Klick darauf erreichen kann.
• Wenn ein Link einen grafischen Anker besitzt, dann sollte darauf geachtet werden, dass ein verständlicher Alt-Text mitgeliefert wird, um zu verdeutlichen, wohin der Link auf dem Bild führt.
• Verwende keine gleichlautenden Bezeichnungen mehrfach auf einer Seite.
  • Ein häufiges Beispiel ist die Verwendung des Links mit der Bezeichnung „Weiterlesen“, „Hier weiterlesen“, um den vollständigen Blogbeitrag lesen zu können. Wenn ein Nutzer mit dem Screenreader über die Linkstruktur durch die Seite navigiert, wird es ihm sehr erschwert zu verstehen, wohin der Link führt, da sie alle gleich lauten.
• Gib zusätzliche Informationen an, wenn Links Sonderfunktionen erfüllen, etwa wenn sie einen Download starten oder weitere Informationen in einem neuen Fenster oder Tab öffnen.

Was nun?

Die hier vorgestellten Best Practices helfen dabei, ein barrierefreies und inklusiveres Angebot zu schaffen. Screenreader stellen Nutzern Inhalte auf sinnvolle Weise zur Verfügung.

Dies sind Praktiken, die jeder, der im digitalen Raum Inhalte produziert, kennen und berücksichtigen sollte. Der Weg zu einer vollständig barrierefreien Seite endet hier jedoch nicht.

Genauso wichtig, wie das Befolgen von Best Practices und das Verstehen der Standards ist es, die Umsetzung regelmäßig zu überprüfen, zu hinterfragen und zu testen.

Damit diese Anpassungen eine nachhaltige Verbesserung nach sich ziehen, muss Barrierefreiheit zu einem Bestandteil des täglichen Geschäfts von Entwicklern, Content-Produzenten und Produktstrategen werden.