In einem Land vor unserer Zeit oder besser gesagt in der Prä-CSS-Ära war es nicht so einfach, auf elegante Weise Abstände zwischen Inhalten darzustellen. Auch heute stolpere ich immer wieder über HTML-Elemente, die aus Styling-Gründen benutzt wurden. Leere Headlines oder leere Absätze sind aber keine Lösung – auch nicht, wenn es mal schnell gehen soll. Das ist nämlich nicht nur falsch, sondern insbesondere für Screenreader-Nutzende frustrierend.
Über das Web Developer Addon kann man mithilfe der Funktion "View Document Outline" leere Headlines gut visualisieren: "No heading text" zeigt an, dass es an dieser Stelle einen leeren Heading-Tag gibt.
Ein Test verschiedener Screenreader aus Dezember 2023 zeigt, dass es zwar einige Screenreader (wie zum Beispiel Apples VoiceOver) gibt, die leere Headlines überspringen. Es gibt aber auch aktuelle Screenreader (zum Beispiel NVDA in Chrome oder Edge), die eben diese leeren Headlines ansagen. Und das nervt. Vor allem, wenn es darüber hinaus auf einer Webseite noch weitere Accessibility-Frustrationsquellen gibt - wie den Klassiker der fehlenden Alt-Attribute.
Fehlt das Alt-Attribut, lesen Screenreader als Fallback den Dateinamen von Bildern vor. Wenn das Bild jetzt noch einen kryptischen Dateinamen hat, ist das - Du ahnst es sicher - anstrengend. Hier ein Beispiel, über das ich vor Kurzem gestolpert bin:
Apples VoiceOver liest das in Chrome wie folgt vor: "Schrägstrich i q e q e h n r y 6 x e v e 2 r x d f w r 7 Bild ohne Label". Gar nicht mal so schön, oder? Mit einem Alt-Text wie "Grüner Baum auf grüner Wiese" kann man sich hingegen schon eher etwas vorstellen.
Das passiert übrigens auch bei leeren Links. Auch hier habe ich ein Beispiel für Dich:
HTML:
<a href=\"https://de-de.facebook.com/beispielseite\" target=\"_blank\" class=\"icon-facebook\"> </a>
CSS (vereinfacht):
.icon-facebook {
background-image: url(../images/facebook.svg);
}
Für sehende Menschen ist der Link durch ein Icon sichtbar. Screenreader "sehen" Bilder, die über CSS eingebunden werden aber nicht und sagen sie auch nicht an. Stattdessen nutzen sie die URL. Apples VoiceOver beispielsweise greift hier dann (wie bei Bildern) auf die URL-Endung zurück und kreiert eigenständig den Linktext "Beispielseite". Klingt erstmal ok, ist es aber nicht. Denn meistens gibt es auf einer Webseite nicht nur einen Link zu einem Social-Media-Profil, sondern mehrere. Beispiel:
HTML:
<a href=\"https://de-de.facebook.com/beispielseite\" target=\"_blank\" class=\"icon-facebook\"> </a>
<a href=\"https://www.instagram.com/beispielseite\" target=\"_blank\" class=\"icon-instagram\"> </a>
<a href=\"https://www.pinterest.de/beispielseite\" target=\"_blank\" class=\"icon-pinterest\"> </a>
VoiceOver liest hier vor: "Link Komma Beispielseite Link Komma Beispielseite Link Komma Beispielseite".
Leere erzeugt ein Informationsungleichgewicht. Während sehende Menschen alles Wichtige erfassen, ziehen nicht-sehende User und Userinnen den Kürzeren. Sie erfahren nicht, was auf dem Bild zu sehen ist, oder wissen erst nach dem Klick auf den leeren Link wohin die Reise geht. Zeit also, die Leere zu füllen.
Für fehlende Alt-Texte hat übrigens Anita im letzten Newsletter für Dich gute Tipps formuliert. Du kannst mir aber auch gern schreiben, wenn Du Accessibility-Unterstützung brauchst. Ich freue mich auf Deine Nachricht!