Sicherstellen, dass auf Links und Bilder zugegriffen werden kann

  • 4 Minuten

Zwei der gängigsten Komponenten auf jeder Webseite sind Links und Bilder. Diese Elemente haben einen tiefgreifenden Einfluss auf die Barrierefreiheit. Das Sicherstellen von gutem Linktext und alternativem Text ist einer der ersten Schritte, die Sie ausführen können, um Ihre Seiten für alle Benutzer zu verbessern.

Linktext

Links sind das Kernstück beim Surfen im Web. Wenn Sie sicherstellen, dass eine Sprachausgabe ordnungsgemäß Links lesen kann, können alle Benutzer Ihre Website durchsuchen.

Betrachten Sie die beiden Links im folgenden Beispieltext:

Hinweis

Die beiden Beispiele veranschaulichen, was Sie als Webentwickler nicht verwenden sollten.

Obwohl diese Links für jemanden mit vollem Sehvermögen in Ordnung zu sein scheinen, werden sie mit einer Sprachausgabe nicht so funktionieren, wie Sie es vielleicht erwarten. Denken Sie daran, dass Sprachausgaben den Text lesen. Wenn im Text eine URL verwendet wird, liest die Sprachausgabe die URL. Im Allgemeinen vermittelt die URL keine aussagekräftigen Informationen und kann störend klingen. Sie haben dieses Problem vielleicht schon einmal erlebt, wenn Ihr Telefon eine Textnachricht mit einer URL vorgelesen hat.

Sprachausgaben sind auch in der Lage, nur die Links auf einer Seite zu lesen, ähnlich wie eine sehende Person eine Seite nach Links durchsuchen würde. Wenn der Linktext immer „klicken Sie hier“ lautet, hört der Benutzer nur „klicken Sie hier, klicken Sie hier, klicken Sie hier, klicken Sie hier,...“ Alle Links sind nun nicht mehr voneinander zu unterscheiden, was eine frustrierende Erfahrung ist.

Das Wort „klicken“ ist ebenfalls ein Problem, da nicht alle Benutzer klicken. Benutzer von Smartphones tippen, Tastaturbenutzer wählen vielleicht die Eingabetaste oder die Leertaste aus, und andere Clients verwenden andere Mittel.

Wir müssen immer aussagekräftigen Linktext verwenden. Guter Linktext beschreibt kurz, was sich auf der anderen Seite des Links befindet. Im Beispiel oben zu Zwergpinguinen führt der Link zur Wikipedia-Seite für diese Art. Der Begriff Zwergpinguine wäre perfekter Linktext, weil er deutlich macht, über welches Thema jemand etwas erfahren wird, wenn er den Link auswählt:

Hinweis

Als Bonus, um sicherzustellen, dass Ihre Website für alle zugänglich ist, helfen Sie Suchmaschinen auch beim Durchsuchen Ihrer Website. Suchmaschinen verwenden Linktext, um die Themen von Seiten zu erfassen. Die Verwendung von gutem Linktext hilft also allen!

ARIA-Attribute

Stellen Sie sich die folgende Produktseite vor:

Produkt Beschreibung Auftrag
Widget [Description]('#') [Order]('#')
Superwidget [Description]('#') [Order]('#')

Dies ist ein allgemeines Layout für eine Seite, die Informationen zu verschiedenen Elementen in einer Tabelle mit Links zur Beschreibung und Bestellung anzeigt. Das Duplizieren des Texts „Beschreibung“ und „Bestellung“ ist für eine Person sinnvoll, die einen Browser verwendet. Allerdings würde jemand, der eine Sprachausgabe verwendet, nur die Wörter Beschreibung und Bestellung ohne Kontext wiederholt hören.

Um diese Art von Szenarien zu unterstützen, unterstützt HTML eine Reihe von Attributen, die als Accessible Rich Internet Applications (ARIA) bezeichnet werden. Sie können diese Attribute verwenden, um für Sprachausgaben weitere Informationen bereitzustellen.

Sie können beispielsweise aria-label verwenden, um einen Link zu beschreiben, wenn das Format der Seite dies nicht zulässt. Die Beschreibung für Widget kann folgendermaßen festgelegt werden:

<a href="#" aria-label="Widget description">description</a>

ARIA hat zahlreiche Verwendungsmöglichkeiten, die über das Hinzufügen von Text für Sprachausgaben zum Lesen von Links hinausgehen. Sie können damit die Rollen beschreiben, die bestimmte Elemente spielen, wenn semantisches HTML nicht verfügbar ist. Wenn Sie z. B. eine Struktur erstellen, können Sie ARIA-Rollen verwenden, um die Schnittstelle für eine Sprachausgabe zu beschreiben:

<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>

Wichtig

Die zuvor beschriebene Verwendung von semantischem Markup und gutem Linktext ersetzt im Allgemeinen die Verwendung von ARIA. Browser und Sprachausgaben sind nicht die einzigen Clients, die ein Benutzer verwenden könnte, und die Gestaltung Ihrer Seite, damit sie für alle Clients und Benutzer gut funktioniert, sollte Ihr Hauptziel sein.

Alternativtext für Bilder

Allgemein gilt: Sprachausgaben können den Inhalt eines Bilds nicht lesen. Obwohl einige künstliche Intelligenz verwenden, sind die generierten Ergebnisse möglicherweise nicht kontextbezogen genau. Glücklicherweise erfordert die Sicherstellung, dass Bilder zugänglich sind, nicht viel Arbeit: dafür ist das alt-Attribut vorgesehen. Alle aussagekräftigen Bilder sollten über ein alt-Attribut (salopp als alt text bezeichnet) verfügen, um zu beschreiben, was sie sind oder welche Informationen sie vermitteln sollen.

Bei Bildern, die rein dekorativ sind, sollte das Attribut alt auf eine leere Zeichenfolge festgelegt werden: alt="". Durch diese Einstellung wird verhindert, dass Sprachausgaben unnötigerweise das dekorative Bild ankündigen.

Hinweis

Wie Sie vielleicht erwarten, können Suchmaschinen nicht erkennen, was in einem Bild enthalten ist. Sie nutzen den alternativen Text. Also noch einmal: Die Sicherstellung der Barrierefreiheit Ihrer Seite bringt Vorteile!