Barrierefreie Navigation im Internet

Um zu verstehen, warum die Navigation im Internet für Menschen mit eingeschränktem Sehvermögen manchmal schwierig ist, müssen wir zuerst einmal verstehen, wie diese Menschen überhaupt das Internet nutzen. Meist nutzen Menschen mit Sehbehinderungen spezielle Software, sogenannte Screenreader, die den Bildschirminhalt in sprachliche Ausgaben umwandelt. Der Screenreader liest den Bildschirminhalt vor, einschließlich Text, Links, Schaltflächen und anderen Elementen. Er ermöglicht so den Benutzern durch die Website zu navigieren. Das funktioniert erstmal auf jeder Webseite, auch ohne, dass wir als Entwickler etwas dafür tun müssen. Allerdings gibt es durchaus einige Dinge zu beachten, durch die das Erlebnis für Nutzer von Screenreadern erheblich verbessert werden kann.

Wieso ist das relevant für die Navigation im Internet?

Links im Internet sind oft mehr als nur Text. Manchmal möchten wir ganze Komponenten, wie Buttons oder Karten verlinken, die sich aus Text, Bildern und Icons zusammensetzen. Damit die gesamte Komponente klickbar ist, ist es naheliegend das Link-Tag außen um die Komponente zu legen. Semantisch ist das allerdings nicht korrekt. Schauen wir uns das am Beispiel einer Card-Komponente an.

<a href="/blog/barrierefreie-navigation-im-internet">
  <div class="card">
    <img
      src="https://placehold.co/600x400"
      alt="Ein Kompass, der den Weg nach Norden zeigt."
    />
    <h2>Barrierefreie Navigation im Internet</h2>
    <div>Veröffentlicht am 29. Februar 2024</div>
  </div>
</a>

Wie erwartet, kann der Nutzer die gesamte Karte anklicken um zur Detailseite zu navigieren. Der Inhalts des Links wird nun allerdings durch alle Elemente unterhalb des Link-Tags beschrieben. In diesem Beispiel also durch das Bild, den Titel und das Veröffentlichungsdatum.

Das ist aus zwei Gründen problematisch: Zum Einen ist es für Suchmaschinen schwer den Inhalt des Links zu interpretieren. Das kann sich negativ auf das Ranking der Seite in Suchergebnissen auswirken. Zum Anderen erschwert es Nutzern eines Screenreaders den Link, und damit die Webseite, zu verstehen. Denn fokussiert ein Nutzer diesen Link mit einem Screenreader, dann liest dieser ihm nicht nur den Titel des Links vor, sondern eben auch die Beschreibung des Bildes und das Veröffentlichungsdatum. Beides ist vollkommen irrelevant um zu verstehen welcher Inhalt sich hinter dem Link verbirgt.

Alternativ können wir das Link-Tag auch nur um den Titel der Karte legen. Das ist semantisch korrekt, allerdings ist damit auch nur der Titel der Karte klickbar.

<div class="card" style="position: relative;">
  <img
    src="https://placehold.co/600x400"
    alt="Ein Kompass, der den Weg nach Norden zeigt."
  />
  <h2>
    <a href="/blog/barrierefreie-navigation-im-internet">
      Barrierefreie Navigation im Internet
    </a>
  </h2>
  <div>Veröffentlicht am 29. Februar 2024</div>
</div>

Um sowohl die gesamte Karte klickbar zu machen, als auch die korrekte Semantik zu wahren, können wir uns einem kleinen Trick behelfen. Wir positionieren ein leeres Element, das die gesamte Karte ausfüllt, innerhalb des Link-Tags. Dazu geben wir dem äußeren Element die CSS-Eigenschaft position: relative und dem inneren Element die Eigenschaften position: absolute; left: 0; top: 0; right: 0; bottom: 0;.

<div class="card" style="position: relative;">
  <img
    src="https://placehold.co/600x400"
    alt="Ein Kompass, der den Weg nach Norden zeigt."
  />
  <h2>
    <a href="/blog/barrierefreie-navigation-im-internet">
      Barrierefreie Navigation im Internet
      <span style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
      </span>
    </a>
  </h2>
  <div>Veröffentlicht am 29. Februar 2024</div>
</div>

Dadurch ist die gesamte Karte klickbar. Semantisch ist aber nur der Titel der Karte Teil des Links, sodass ein Screenreader auch nur den Titel vorlesen wird.

Fazit

Mit diesem einfachen Trick können wir die Navigation im Internet für alle Nutzer zugänglicher machen. Wir verbessern die Accessibility der Webseite und stärken gleichzeitig das Ranking der Seite in Suchergebnissen. Natürlich ist das nur ein Baustein von vielen, um eine Webseite barrierefrei zu gestalten. Wer mehr über Accessibility erfahren möchte, dem empfehlen wir einen Blick in den ARIA Authoring Practices Guide (APG).