Wenn du deine Webseiten für Sehbehinderungen optimierst, ist ein wichtiger Schritt in Richtung barrierefreies Webdesign. So hilfst du Menschen mit unterschiedlichen Sehbeeinträchtigunge, die Inhalte problemlos nutzen können. Hierzu ein paar erste Tipps:
Semantischer HTML-Code
Mit semantischem HTML ermöglichst du die richtige Bedeutung von Inhalten für Screenreader und andere Assistenztechnologien
Alt-Tag für Bilder (Fotos, Grafiken)
Der Alt-Tag (auch als Alt-Attribut oder Alt-Text bezeichnet) ist ein HTML-Attribut, das verwendet wird, um alternativen Text für Bilder auf deiner Webseite bereitzustellen. Der Hauptzweck des Alt-Tags besteht darin, eine Beschreibung des Bildinhalts bereitzustellen, wenn das Bild nicht angezeigt werden kann oder wenn Besucher mit einer Sehbehinderung einen Screenreader nutzen. Verwende daher klare und prägnante Alt-Texte für Bilder, um eine sinnvolle Beschreibung des Bildinhalts anzubieten.
Beispiel:
<img src="tauben-brunnen.jpg" alt="Eine weiße und eine graue Stadttaube sitzen vor einem Brunnen">
Doch Vorsicht: Der Alternativtext ist kein guter Platz für lange Beschreibungen. Blinde können sich die Beschreibung immer nur als Ganzes anhören, was bei mehr als 100 Zeichen anstrengend ist, wenn man eine bestimmte Stelle innerhalb dieses Textes sucht. Außerdem stören lange Alternativtexte zum Beispiel bei Text-Bild-Strecken den Lesefluss.
“Title”-Attribut für Bilder, Links und Schaltflächen
Für sehbehinderte Menschen ist eine klare Beschreibung besonders hilfreich, da sie bei der Wahrnehmung von Inhalten Unterstützung benötigen. Eine präzise Bildbeschreibung ermöglicht es ihnen, das Bild besser zu verstehen, indem sie eine kurze, neutrale Erklärung darüber liefert, was auf dem Bild zu sehen ist.
Beim “Title” handelt es sich um ein HTML-Attribut, mit dem Textinformationen zu verlinkten Bildern und Buttons hinzugefügt werden können. Diese Informationen werden angezeigt, wenn Desktop-Benutzer mit dem Mauszeiger über das Bild fahren (hovern). Sie erfahren, was sie auf dem verlinkten Inhalt erwartet.
Das “Title”-Attribut wird in HTML verwendet und kann zu verschiedenen HTML-Elementen hinzugefügt werden, darunter Links (<a>), Bilder (<img>), und Schaltflächen (<button>). Drei code-Beispiele für die Verwendung des Title-Attributs:
Link:
<a href="zielseite.html" title="Hier steht die Informationen beim Überfahren mit der Maus">Mehr Infos über das Thema X</a>
Bild:
<img src="bild.jpg" alt="Beschreibung des Bildinhalts" title="Zusätzliche Informationen beim Überfahren mit der Maus">
Schaltfläche:
<button title="Zusätzliche Informationen beim Überfahren mit der Maus">Jetzt klicken</button>
Bitte beachte, dass bei Smartphones und Tablets, aufgrund des Fehlens von Maus-Over-Funktionen, der “Title”-Text für diese Nutzer unsichtbar bleibt. Um auch für diese Gruppe relevante Informationen bereitzustellen, kann eine Bildunterschrift verwendet werden (die für alle Nutzer sichtbar ist, einschließlich blinder Personen, die Screenreader verwenden).
Kontrastreiche Farben
Achte auf ausreichenden Kontrast zwischen Text und Hintergrund, um sicherzustellen, dass der Text leicht lesbar ist. Dies ist besonders wichtig für Menschen mit Sehschwierigkeiten.
Skalierbare Schriftgrößen
Benutzer müssen die Schriftgröße anpassen können, um deinen Text besser lesen zu können. Dies kann durch die Verwendung von Tags für relative Einheiten wie “em” oder “rem” erreicht werden.
Keyboard-Navigation
Super, wenn man deine Webseiten vollständig über die Tastatur navigierbar kann. Nutzer mit Sehbehinderungen verwenden oft Tastenkombinationen oder Screenreader-Software für die Navigation.
WAI-ARIA-Attribute (Web Accessibility Initiative)
ARIA (Accessible Rich Internet Applications) verbessern die Semantik und Struktur deiner Seiten für Screenreader. Auf diese Weise können Benutzer mit Sehbehinderungen leichter durch Ihre Webseite navigieren. Mehr Infos zu ARIA findest Du unter folgendem Link: