Vergangene Woche meldete sich ein Mitglied unseres Verbands mit Fragen zum Barrierefreiheitsstärkungsgesetz bei mir. Er zeigte mir das Angebot seiner Webagentur, die für die Umsetzung des betroffenen Webshops knapp 6.000 € veranschlagte. Das war für mich Grund genug, mich intensiver mit dem Thema zu befassen, da auch meine Blogs mit Sicherheit „Nachholbedarf“ haben.
Bestandsaufnahme
Zunächst habe ich die Änderung der Darstellungsgröße getestet.
Mit [Strg] + [+] bzw. [Strg] + [-] kann man diese schnell ändern und prüfen, ob dadurch das Layout zerstört wird.
Danach ging ich zur Tastatursteuerung über. Ich schaute mir die Kurzbefehle meines Vivaldi-Browsers an (ich nutze sonst keine Kurzbefehle) und prüfte, wie weit ich ohne Maus auf meinen Blogs komme.
Für den nächsten Schritt benötige ich einen kostenlosen Screenreader. Das ist ein Tool, das mir den Inhalt meiner Webseiten vorliest. NVDA ist hier wohl die erste Wahl: Ein kleines Tool, das kostenlos geladen werden kann und sogar als portable Version verfügbar ist.
Die folgenden Tests gehen etwas tiefer in die Materie:
Mithilfe von drei verschiedenen Browser-Plug-ins habe ich meine Webseiten auf weitere Mängel überprüft.
1. WAVE – Web Accessibility Evaluation Tool (Firefox, Chrome)
2. Axe DevTools (Firefox, Chrome)
3. Silktide (Chrome).
Diese Browser-Erweiterungen prüfen meine Webseiten. Dabei werden die WCAG 2.1-Richtlinien berücksichtigt. Konkret geht es um die Konformität mit Stufe AA. Außerdem werden Farben und Kontraste geprüft. Ebenso das Schriftbild und die Schriftgrößen. Auch alternative Beschriftungen von Bildern, Videos und Links werden berücksichtigt. Und nicht zu vergessen die Überschriftenstruktur. Mithilfe der Tools lassen sich die Stellen, die optimiert werden sollten, schnell finden.
Was wurde nun geändert und verbessert?
Ich habe mit dem Theme angefangen. Auch wenn mir mein Newsophy-Theme gut gefallen hat, ist es hinsichtlich der Barrierefreiheit nicht gut genug. Ich habe mich deshalb für ein schlankeres und gut strukturiertes Theme entschieden.
Als Nächstes habe ich alle Schriften auf die speziell entwickelte Schriftart Atkinson Hyperlegible geändert, die für alle gut lesbar ist. Zudem habe ich die Schriftgröße in den Menüs deutlich vergrößert. Farben und Kontrast habe ich komplett geändert. Im Netz gibt es viele Tools, die das Kontrastverhältnis berechnen.
Mit ein wenig CSS-Code sind nun alle Links unterstrichen, sodass sie auch für Menschen mit Farbschwäche als Links erkennbar sind. Das sieht in manchen Bereichen nicht wirklich schön aus, doch mir ist Barrierefreiheit wichtiger.
Auch beim Kontaktformular musste ich Änderungen vornehmen, da die Felder weiß auf weiß waren. Nun heben sie sich mit einem Grau deutlich ab und sind leichter zu erkennen.
Ein weiteres Problem war ein Stück Inframe-Code von Pictrs.com, das ich als Widget eingebunden hatte. Da die Prüftools mehrere Fehler meldeten, habe ich es einfach entfernt. Den Betreibern von Pictrs.com habe ich bereits eine E-Mail diesbezüglich geschrieben. Ich bin gespannt, ob nachgebessert wird.
Mein größtes Manko waren jedoch die alternativen Beschreibungen, auch ALT-Texte genannt. Hier war ich in der Vergangenheit stinkfaul und habe keine gepflegt. Egal, ob Bild oder Link, ich habe keine Beschreibung gepflegt. Auf Pixelboomer habe ich über 350 Bilder ohne passende Beschreibung! Doch auch hierfür gibt es für WordPress-Nutzer Hilfe:
Mit dem Plugin und Dienst AltText.ai können Fotos mithilfe von KI erkannt und beschriftet werden. Und das funktioniert wirklich genial. Mit den 25 Probe-Credits habe ich das Plugin ausprobiert und war schnell überzeugt, die fehlenden Beschreibungen mithilfe des Plugins zu erstellen. Für 19,00 US-Dollar habe ich mir 500 Credits, also 500 Bilder, gekauft, einen API-Schlüssel erstellt und alle Fotos in kurzer Zeit via KI beschriften lassen. Mega! Top!
Für die Zukunft schwöre ich hier vor Zeugen, dass ich meine ALT-Texte anständig pflegen werde.
Zum Schluss habe ich noch einen weiteren Plugin-Tipp für dich: AccessYes!
Das Plugin fügt deinem Blog ein kleines Overlay-Icon hinzu. Wenn man darauf klickt, werden die verschiedensten Möglichkeiten angeboten, um dein Blog anzuzeigen. Das Plugin ist kostenlos und meiner Meinung nach ein absolutes Muss!
Testergebnisse
Fazit
Alle meine Änderungen ließen sich schnell, einfach und kostengünstig umsetzen.
Eine Zusammenfassung findest du bei meinen Rechtstexten unter dem Punkt „Barrierefreiheit“. Falls dir noch etwas auffällt, das man besser machen könnte, zögere bitte nicht, mir zu schreiben. Auch wenn es für private Blogger:innen keine Verpflichtung gibt, diese Maßnahmen zu ergreifen, fordere ich dich trotzdem auf, es mir gleichzutun. Am Ende profitieren wir alle davon.
Dieser Artikel erschien zuerst auf Pixelboomer.de. Dort veröffentliche ich regelmäßig Beiträge über Fotografie und Themen aus dem Internet. Falls Dich das Thema interessiert, schau gerne dort vorbei!
Der offizielle Fediverse-Kanal des Blogs Pixelboomer.de von Patric Rossmeisl.
Abonniere diesen Kanal und Du verpasst keine neuen Beiträge mehr.
