Eine blinde Person besucht deine Webseite oder Shop:
Was solltest du beachten, im Code, damit du blinde Personen nicht von deinem Angebot ausschließt.
Quelltext-Editor- Visual-Studio-Code – HTML-Gerüst.
Wenn eine blinde Person deine Webseite oder deinen Online-Shop besucht, dann ist folgendes extrem wichtig im Bildcode
Beispiel:
Stell dir vor, du hast auf deinem Shop Android-Handys und Iphones zu verkaufen. Eine blinde Person kann die Bilder, Texte etc, nicht sehen, sie nutzen eine Sprachsoftware, einen sogenannten Screenreader. Es gibt hier verschiedene . Sie lassen sich dein Angebot also vorlesen.
Häufig genutzt:
( kostenlos)
Voiceover
jaws ( kostenpflichtig) Job Access With Speech
Was solltest du als Entwickler hier unbedingt beachten, damit dein Angebot von diesem Screenreader auch vorgelesen wird?
Was passiert in Zeile 9 oben genau?
In Zeile 9 ist der Entwickler oder der Händler hergegangen und hat einen Bildcode eingefügt. Er möchte ein Handy verkaufen,.
img = bedeutet image = Bild
src = source = Quelle
handy.jpg = Der Name des Bildes
Was genau würde der Screenreader jetzt vorlesen?
Antwort: Der Screenreader liest hier folgendes vor: Alles was du im Alt-Text eingetragen hast, das liest der Screenreader also die Sprachsoftware vor. In unserem Falle „mustermannhandy1234“ und die betreffende Person weiß dann, ok, so heißt das Handy.
Die Problematik
Was heißt das konkret – Wenn der Entwickler hier nichts einträgt, innerhalb von diesem Alt-Text, dann wird auch nichts vorgelesen, die blinde Person weiß dann nicht in dem Moment, dass er dieses Handy gerade im Angebot hat und du schließt die Person von deinem tollen Angebot aus. Das ist natürlich fatal. Es ist also extrem wichtig, wenn du Bilder auf deine Webseite, oder deinen Shop nimmst, dass du hier Code-technisch z. B. die Bezeichnung eingibst. Diese wird dann auch vorgelesen.
Was bedeutet width und height?
Mit width=“500 und height=333, das ist die Pixelgröße des Bildes. Diese kannst du natürlich beliebig im Code anpassen.
img src=“handy.jpg“ alt=“mustermannhandy1234 “ width=“500″ height=“333″
Technische Anmerkung:
Am 28.06.2025 beginnt das Barrierefreiheitsstärkungsgesetz in Kraft zu treten. Das heißt, du solltest dich auf jeden Fall mit dieser Problematik beschäftigen, auch wenn es nicht alle betrifft. Eine riesige Übersicht findest du hier, was du alles beachten solltest im Bereich Barrierefreier Code schreiben.
Wenn du dich mit barrierfreiem Code befasst, oder aus rechtlichen Gründen befassen musst, ist es ratsam, dir mal den NVDA runterzuladen und zu schauen, was liest diese Sprachsoftware genau vor? Liest er nur die Hälfte von deinem Shop vor, so hast du oftmals ein Code-Problem.
Das Thema Barrierefreiheit ist riesig, hier eine kleine Zusammenfassung, was du wissen solltest
Zum Cyber-Raum 3 – Wie schreibe ich barrierefreien Code
Wie funktioniert das genau mit dem Vorlesen ?
1 Minute-Hörprobe youtube Video Screenreader-NVDA Video
WordPress – CMS-Systeme
Falls du WordPress nutzt oder andere Systeme, vielfach musst du da nicht extra in den Code, sondern suche einfach nach „Alt-Text“ Eingabe.