Wir ihr ja wisst sind nicht alle Menschen perfekt gesund 🙂 Ja und auch diese Menschen wollen ins Internet. Ich gehöre ja zu den Glücklichen die keine technischen Hilfsmittel brauchen – ich brauche nur eine Brille (sonst bin ich blind wie eine Kuh) – aber andere brauchen da schon mehr Hilfe. Ja und so sollte man seine Webseite auch so optimieren dass sie nicht nur für normale Menschen, Suchmaschinen sondern auch für „eingeschränkte“ Menschen angenehm verwendbar ist.

Die Schweizer Accessibility-Studie 2020 legt aufgrund des starken E-Commerce-Booms den Fokus auf die Barrierefreiheit von Onlineshops und stellt ernüchtert fest: 1,7 Millionen Menschen mit einer Behinderung treffen beim Einkaufen im Web auf teilweise unüberwindbare Hindernisse und werden so vom Onlineshopping ausgeschlossen. Kurz gesagt 20% der schweizer Bevölkerung hat Probleme im Internet.

Das hat in Deutschland auch die Regierung erkannt und hat ein Gesetz gemacht, dass Unternehmen ab 28. Juni 2025 zwingt ihre Online Shops und Webseiten barrierefrei zu machen.

Ich muss ehrlich zugeben – auch ich gehöre zu diesen bösen Webseitenbetreiber die sich darum nicht wirklich gekümmert haben. Ich versuche zwar mich und meine Kunden immer wieder daran zu erinnern – aber es ist unbequem und mühsam sich daran zu erinnern…

Aus diesem Grund hat mich letzte Woche ein Artikel im Fediverse interessiert, wo einer eine spannende Idee hatte und diese Idee musste ich gleich mal testen. Er hat nämlich gezeigt wie man Bilder mit CSS manipulieren kann, die nicht barrierefrei sind.

Es gibt ja Menschen die sehen entweder sehr schlecht oder gar nicht und brauchen darum einen Screen-Reader der ihnen die Webseite vorliest. Nun braucht er dafür aber einen Tag der das Gerät erkennt und vorlesen kann – noch gibts keine KI die Bilder in Sprache umwandeln kann (wenigstens heute noch nicht)…

Aus diesem Grund ist es wichtig, das ein Bild auch ein Alt-Tag hat und wenn möglich ein Title-Tag

Title Tag

Der Title-Tag eines Bildes, ist der Titel der angezeigt wird, wenn man mit dem Mauszeiger auf dem Bild stehenbleibt.

So wäre der HTML Befehl

1
2

<img src="https://www.chefblogger.me/images/desk.jpg" 
title="ein schreibtisch">

Alt Tag

Der Alt-Tag (für “Alternativer Tag”) wird von Suchmaschinen verwendet, falls Bilder oder Grafiken einmal nicht angezeigt werden und er wird von den Screen-Reader auch gerne erfasst und vorgelesen. Er ist also von den beiden Tag der wohl „wichtigere“ bei der Barrierefreiheit.

Natürlich wären beide wichtig 😛 Sag ich jetzt nur damit niemand getriggert wird 😛

So wäre der HTML Befehl

1
2

<img src="https://www.chefblogger.me/images/desk.jpg" 
alt="ein schreibtisch mit computer">

Aus diesem Grund wäre es eigentlich das Beste wenn man beides verwenden würde.

1
2
3

<img src="https://www.chefblogger.me/images/desk.jpg" 
title="ein schreibtisch" 
alt="ein schreibtisch mit computer">

Die Lösung

Damit man leich gezwungen wird sich auch wirklich daran zu halten, gibts nun ein CSS Psoydo Element das man verwenden kann um Bilder zu bestrafen die nicht barrierefrei angezeigt werden.

Hier habe ich diesen kleinen Code – mit dem könnt ihr allen Bildern einen roten Rahmen geben, wenn sie nicht barrierefrei sind oder umdrehen oder oder oder….

1
2
3
4

img[alt=""],
        img:not([alt]) {
           //deine aktion
        }

Eine andere radikale Methode wäre zum Beispiel – alle Bilder die nicht barrierefrei sind – werden komplett milchig und man kann gar nichts mehr richtig erkennen.

1
2
3
4

img[alt=""],
        img:not([alt]) {
            filter: blur(10px)
        }

So würde das dann zum Beispiel aussehen

WordPress

Um den Alt Text in WordPress einzugeben, könnt ihr einfach in der Mediathek die Bilder aufrufen und dann da sie eingeben

Und dann könnt ihr im Child Theme einfach noch dieses Snippet einbauen.