Im Dezember öffne ich jeden Tag ein virtuelles Türchen und teile praxisnahe Tipps aus der Welt der digitalen Barrierefreiheit. Von barrierefreien Formulare über zugängliche Bilder bis hin zu inklusiver Kommunikation – der Kalender bietet kleine, umsetzbare Schritte, die einen großen Unterschied machen können. Freu dich auf kompakte Tipps, spannende Infos und konkrete Anleitungen, die zeigen, wie einfach es sein kann, digitale Barrierefreiheit zu erreichen und Barrieren abzubauen.
Türchen 1 – zurück zum Anfang
Advent, Advent, ein Lichtlein brennt. Erst eins, dann zwei, dann drei, dann vier, dann steht das Christkind vor der Tür. Und wenn das fünfte Lichtlein brennt, dann… würden wir gern von vorn beginnen.
Zeitreisen sind aktuell nicht möglich, auf Websites können wir uns diesen Wunsch aber erfüllen. Sogenannte „To-Top“-Buttons, also Buttons, die einen von ganz unten wieder zum Seitenanfang bringen, sind weit verbreitet. Sie scrollen mehr oder weniger gemütlich wieder zurück an den Anfang.
Was dabei leider oft vergessen wird: auch Nutzer von Screenreadern und anderen Assistenzsystemen, die auf die Tastaturnavigation angewiesen sind, müssen wieder zurück zum Anfang kommen. Meist befindet sich der Fokus noch auf dem Button und beim nächsten „Tab“ ist man wieder zurück im Footer.
Aber wohin dann mit dem Fokus? Dafür gibt es keine klaren Vorgaben. Je nach Aufbau der Seite und Kenntnis der eigenen Zielgruppe bieten sich an:
- Das
<main>Element und damit der Hauptinhalt - Der Beginn der Hauptnavigation
- Falls vorhanden die Sprunglinks, mit denen man direkt zu bestimmten Seitenbereichen (Inhalt, Suche, Hauptnavigation) springen kann
Ein gut platzierter Fokus macht den „To-Top“-Button zum echten Wichtel der Barrierefreiheit und sorgt dafür, dass alle Nutzer und Nutzerinnen den Zauber des Anfangs noch einmal genießen können.
Links zu noch mehr Informationen:
Türchen 2 – Sind Komplementärfarben wirklich so unterschiedlich?
Weihnachten ist die Zeit, in der alles in grün und rot leuchtet. Geschenkpapier, Baumdekoration und Adventskränze, alles erleuchtet zur Weihnachtszeit.
Leider sind sie zwar für die meisten Menschen gut unterscheidbar, aber ganz und gar nicht barrierefrei. Unabhängig von der weit verbreiteten Rot-Grün-Sehschwäche ist der Kontrast von Komplementärfarben bei weitem nicht so groß, wie man denkt.
Nehmen wir diese 2 Farben:
Rot #DE1B1B
Grün #008554
Scheinbar sind beide sehr gut unterscheidbar. Misst man allerdings einmal den Kontrast wird man erschrecken. Denn man kommt auf einen Kontrastwert von 1.04:1, eine Zahl nur knapp über „absolut identisch“. Wie kommt das?
Das liegt daran, dass der Kontrastwert vor allem auf der Helligkeit von Farben beruht, der tatsächliche Farbwert spielt kaum eine Rolle. Konzentrieren Sie sich also darauf, Farben miteinander zu kombinieren, deren Helligkeit sich stark unterscheidet. Am Ende müsste die Darstellung auch in Grautönen funktionieren.
Auf dem Weihnachtstisch dürfen Rot und Grün also gern eine wohlige Stimmung verbreiten. Setzen Sie sie auf Websites aber nur dann an ein, wenn es ok ist, sie nicht voneinander unterscheiden zu können.
Links zu noch mehr Informationen:
- 3:1, 7:1 – Wie berechnet sich eigentlich der Kontrast zwischen Farben?
- Barrierefreie Farben gibt es nicht
Türchen 3 – Internationaler Tag der Menschen mit Behinderung
Alex, Jona und Sam freuten sich auf ihre jährliche Weihnachtstour durch das zauberhafte Weihnachtsmanndorf. Die funkelnden Lichter des Marktes erhellten die Schneelandschaft, während der Duft nach Zimt und frischen Pfefferkuchen die Luft erfüllte.
Alex, die stets den Plan für den Abend fest im Blick hatte, führte die Gruppe mit Zuversicht. Jona hielt sich sicher an Alex‘ Arm, geleitet von den vertrauten Geräuschen der fröhlichen Besuchern und den klingenden Glöckchen der Elfen. Plötzlich wurde Jona aufmerksam, als das spezielle Läuten der Glocken erklang, das aus der Richtung des geheimnisvollen Marktplatzes kam. „Lasst uns dorthin gehen!“, schlug Jona mit einem erwartungsvollen Lächeln vor.
Doch auf dem Weg dorthin geriet ihre Tour ins Stocken: Ein Rentierschlitten, beladen mit funkelnden Geschenken, blockierte den Zugang zu einer der verwunschenen Gassen. Alex spürte kurz Unruhe, doch Sam, der immer einen Lösung parat hatte, schlug vor, die Umgehung durch den schneebedeckten Elfenweg zu nehmen. Kein leichtes Unterfangen.
Als sie schließlich den Marktplatz erreichten, wurden sie von einem wahrhaft magischen Anblick begrüßt. Über ihnen schwebten leuchtende Schneeflocken, die in einem sanften Tanz eine himmlische Melodie spielten. Die Töne, die wie durch Zauberei die Luft erfüllten, breiteten eine warme Magie aus, die jeden Winkel des Platzes einhüllte.
Fasziniert sahen und hörten Alex, Jona und Sam zu, wie die funkelnden Lichter sich zu einem riesigen, strahlenden Weihnachtsbaum formten und ein friedliches Leuchten zurückließen. Die Melodie verklang, aber ein zauberhaftes Gefühl blieb in ihren Herzen zurück.
Auf dem Heimweg, unter dem Sternenhimmel des Weihnachtsmanndorfes, lachten sie und tauschten Geschichten aus. Die Erlebnisse dieses Abends hatten ihnen gezeigt, dass in der Magie der Freundschaft und der kleinen Wunder die schönsten Weihnachtsgeschichten entstehen.
Sie haben sicher ein Bild dieser kleinen Weihnachtsgeschichte im Kopf bekommen. Wie sahen die drei Personen für Sie aus? Was, wenn ich Ihnen sage, dass Alex Autist ist, Jona blind und Sam im Rollstuhl sitzt?
Heute ist Tag der Menschen mit Behinderung. Ich möchte das zum Anlass nehmen um zu zeigen, dass wir in unseren Köpfen immer noch in Stereotypen denken und auch bei Ihnen vermutlich alle drei kerngesund und hellhäutig waren. In unserer Phantasie werden Menschen mit Behinderung aber nur dann einziehen, wenn sie auch Teil der Literatur sind. Und das eben nicht nur dann, wenn ihre Behinderung das Thema ist, um das es geht. Sondern weil sich eben auch Personen mit einem Rollstuhl verlieben, zur Schule gehen oder Abenteuer erleben.
Türchen 4 – Die 4 Prinzipien der WCAG
Wir genießen jedes Jahr vier Adventssonntage bei Kerzenschein und Plätzchenduft. Genauso wie diese traditionellen Sonntage, die uns in festliche Stimmung versetzen, bilden auch die vier Prinzipien der WCAG den Rahmen für digitale Barrierefreiheit im Web.
Zunächst die Wahrnehmbarkeit: Inhalte müssen für mindestens zwei Sinne zugänglich sein. Das bedeutet, Texte sollten auch über Screenreader erfassbar sein und Videos mit Untertiteln versehen werden. Auch Alternativtexte für Bilder gehören dazu.
Es folgt die Bedienbarkeit: Nutzer müssen eine Webseite problemlos navigieren können, sei es mit Maus, Tastatur oder über Touchscreen.
Die dritte Säule ist Verständlichkeit: Informationen sollten klar und deutlich präsentiert werden. Dazu gehört, dass Texte gut lesbar sind und interaktive Elemente logisch und leicht zu bedienen sind.
Schließlich die Robustheit: Inhalte müssen auf verschiedenen Geräten und mit unterschiedlichen Technologien zugänglich sein. Eine Webseite sollte sich an verschiedene Browser, Bildschirmgrößen und Hilfsmittel anpassen können und den aktuellen technischen Standards entsprechen.
Wenn im Design, der Konzeption, der Entwicklung und der Pflege die vier Prinzipien der WCAG beachtet werden, steht einer festlich barrierefreien Webseite doch eigentlich nichts mehr im Wege.
Türchen 5 – Hat jeder Mensch einen Nachnamen?
Die Vielfalt der Namensgebung weltweit ist ebenso faszinierend wie die unterschiedlichen Traditionen zur Weihnachtszeit. In vielen Ländern und Kulturen weichen die Namenskonventionen von dem ab, was man hierzulande gewohnt ist.
In Ungarn beispielsweise wird der Nachname traditionell vor dem Vornamen genannt, ähnlich wie in Teilen Ostasiens, etwa in China, Japan und Korea. Dort steht der Familienname auch an erster Stelle, gefolgt vom persönlichen Namen. Ist es dann also überhaupt noch ein Vorname und Nachname?
Außerdem gibt es Kulturen, in denen Menschen sogar nur einen einzigen Namen haben. In Teilen Indonesiens und in Myanmar beispielsweise haben viele Menschen keinen Familiennamen, sondern nur einen persönlichen Namen – auch in offiziellen Dokumenten.
In Island gibt es zwar Nachnamen, aber keine festen Familiennamen. Hier tragen die Menschen oft Patronyme oder Matronyme, die sich vom Vornamen eines Elternteils ableiten (beispielsweise Johansson. Kennt man, oder?). Der Nachname wird also nicht weitergegeben wie in vielen anderen Kulturen, sondern individuell gebildet.
Wir sehen, dass die weit verbreitete Abfrage von Vorname und Nachname in Formularen nicht wirklich ideal ist. Ein einziges Namensfeld reicht als inklusive Lösung also völlig aus. Es berücksichtigt die vielen unterschiedlichen Varianten und erleichtert Menschen aus verschiedenen Kulturen die Eingabe ihrer Namen, ohne sich in unsere deutschen Muster zwängen zu müssen.
Links zu noch mehr Informationen:
Türchen 6 – weißer Text auf Winterlandschaft
Weiße Schrift auf einer funkelnden Winterlandschaft – das klingt auf den ersten Blick zauberhaft und stimmungsvoll, doch in der Praxis kann es zur eisigen Herausforderung werden. Während der Schnee glitzert und der Himmel strahlt, geht der Text schnell im magischen Anblick verloren, besonders wenn der Kontrast nicht stimmt.
Gerade auf Startseiten sieht man es oft: große, Stimmungsvolle Bilder mit kurzen Teasertexten oder der Hauptüberschrift direkt auf das Bild gesetzt. Ein häufiger Fehler ist, dass der Kontrast zwischen dem Text und dem Hintergrundbild nur an bestimmten Stellen ausreichend erscheint. Der Kontrast muss jedoch an der schlechtesten Stelle gemessen werden, denn selbst ein kleiner Teil des Textes, der schlecht lesbar ist, kann die gesamte Botschaft unverständlich machen. Das gilt besonders, weil Bilder und Texte auf unterschiedlichen Geräten und Auflösungen variieren können. Was auf einem großen Desktop-Monitor gut aussieht, kann auf einem kleinen Smartphone-Bildschirm schwer zu entziffern sein.
Um sicherzustellen, dass der Text überall lesbar bleibt, sollte der Hintergrund des Textes möglichst gleichmäßig sein. Eine gute Methode ist, mit CSS eine opake oder halbtransparente Farbfläche über das Bild zu legen, die als Hintergrund für den Text dient. Alternativ können Text und Bild auch gut nebeneinander gezeigt werden. Dadurch sorgen Sie dafür, dass der Text auf einem gleichmäßigen, kontrastreichen Hintergrund erscheint und nicht von der Winterlandschaft verschluckt wird.
Türchen 7 – Überflieger oder stiller Assistent
Im Winterwunderland der digitalen Barrierefreiheit gibt es zwei Werkzeuge, die immer wieder miteinander verwechselt werden: Accessibility Overlays und Accessibility Toolbars. Doch während das Overlay oft als magisches „Ich-mach-deine-Website-barrierefrei“-Tool angepriesen wird, zeigt sich bei genauerem Hinsehen, dass es die Erwartungen selten erfüllt.
Ein Accessibility Overlay legt eine zusätzliche Ebene über die bestehende Webseite und verspricht, automatisch Barrieren zu beseitigen. Klingt verlockend, als ob man einfach einen Zauberstab schwingt und alles ist perfekt. In der Praxis sind diese Overlays jedoch oft nutzlos. Sie können bestehende Probleme nur oberflächlich angehen und schaffen oft sogar neue Barrieren für Nutzer mit Einschränkungen. Sie ändern nichts am eigentlichen Code oder der Struktur Ihrer Seite und sind somit keine nachhaltige Lösung für echte Barrierefreiheit.
Eine Accessibility Toolbar hingegen bietet eine Reihe von zusätzlichen Optionen direkt auf der Webseite an. Sie kann Usern ermöglichen, die Darstellung der Seite nach ihren Bedürfnissen anzupassen, zum Beispiel durch eine Hochkontrastversion, größere Schrift oder einen alternativen Navigationsmodus. Diese Toolbar kann extrem nützlich sein, da sie den Nutzenden echte Wahlmöglichkeiten bietet und die Wahrnehmbarkeit und Bedienbarkeit der Webseite verbessert.
Während also Overlays mit dem Versprechen kommen, Barrieren mit einem Schlag zu beseitigen, hat eine gut konzipierte Toolbar das Potenzial, den Nutzern echte Werkzeuge an die Hand zu geben, um ihre Erfahrung zu verbessern.
Türchen 8 – Braucht es eine Erklärung zur Barrierefreiheit?
Laut dem Barrierefreiheitsstärkungsgesetz (BFSG) und der Barrierefreien-Informationstechnik-Verordnung (BITV) ist es wichtig, eine Erklärung zur Barrierefreiheit auf Webseiten zu haben. Diese Erklärung ist wie ein offenes Türchen im Adventskalender – sie erlaubt uns einen Blick darauf, wie zugänglich eine Seite wirklich ist.
In dieser Erklärung finden Nutzende Antworten darauf, welche Teile der Website barrierefrei sind und welche Bereiche noch Nachholbedarf haben. Wenn etwas nicht ganz den Standards entspricht, wird auch erklärt, warum das so ist. Vielleicht gibt es technische Hürden oder der Prozess der Verbesserung ist noch nicht abgeschlossen.
Erklärt wird auch, wie die Barrierefreiheit geprüft wurde. Welche Tests wurden gemacht und welche Schritte stehen an? So kann man als Betreiber sehr gut zeigen, welche Maßstabe man setzt um die Zugänglichkeit für Menschen mit den verschiedenen Einscränkungen zu erreichen.
Natürlich können Nutzer selbst auch auf Probleme hinweisen. Eine Kontaktmöglichkeit ist Teil der Erklärung, damit sich Ihre Kunden bei Bedarf Unterstützung holen oder auf Barrieren aufmerksam machen können. Ebenso ist ein Link zur Schlichtungsstelle vorhanden, falls es mal haken sollte und eine Lösung gebraucht wird.
Eine solche Erklärung zur Barrierefreiheit ist also vor allem ein Zeichen dafür, dass einem digitale Barrierefreiheit und Zugänglichkeit für alle wichtig ist.
Türchen 9 – Schwindelig vor Vorfreude
Bewegliche Weihnachtspyramiden ziehen uns mit ihren sanft drehenden Szenen und Figuren in den Bann – ein faszinierender Anblick. Das sorgt im Wohnzimmer für Gemütlichkeit, ist bei Webseiten aber nicht immer angenehm. Schnelle Animationen und plötzliche Bewegungen können für manche unangenehm oder sogar störend sein. Der inzwischen immer öfter zu sehende Parallax-Scrolling-Effekt, der unterschiedliche Tiefen simuliert, kann sogar Schwindel hervorrufen.
Für Menschen mit bestimmten Seh- oder Gleichgewichtsstörungen kann der Tanz der Bilder und Effekte also zu einer echten Herausforderung werden. Hier kommt die Einstellung „prefers-reduced-motion“ ins Spiel. Sie erlaubt es Nutzern, in ihren Geräteeinstellungen zu hinterlegen, dass sie lieber keine bewegten Inhalte sehen wollen.
Dies auch zu respektieren ist aber Aufgabe der Webentwickler. Webseiten, die darauf Rücksicht nehmen, passen ihre Animationen entsprechend an. Sie sorgen dafür, dass die Seiten stabil und ruhig bleiben, wenn „prefers-reduced-motion“ aktiviert ist. Abgerufen werden kann diese Einstellung sowohl im CSS als auch im JavaScript.
Lassen wir also den Nutzern die Wahl, wie viel Bewegung sie erleben möchten. So wird das Surfen für alle entspannter und zugänglicher.
Links zu noch mehr Informationen:
- Barrierefreie Animationen – wann Bewegung hilft und wann sie schadet
- Mit Autismus im Internet – Digitale Barrierefreiheit für neurodivergente Menschen
- Websites optimieren – Konzentration fördern bei ADHS-Symptomen
Türchen 10 – Der Countdown läuft
Stellen Sie sich vor, Weihnachten kommt dieses Jahr mit ein wenig Verspätung – in genau 200 Tagen. Am 28. Juni, bringt das Barrierefreiheitsstärkungsgesetz (BFSG) seine Geschenke mit sich. Aber keine Socken oder Krawatten, sondern etwas viel Wertvolleres: mehr digitale Barrierefreiheit.
Für wen gilt das BFSG? Kurz gesagt, für die, die digitale Dienstleistungen und Produkte bereitstellen, sogenannte Digitale Geschäftsprozesse besitzen. Also kurz: digital die, die irgendetwas verkaufen. Das Gesetz zielt darauf ab, den Zugang zu Websites, Apps und digitalen Geräten für alle Menschen einfacher zu gestalten. Damit kommt es nicht nur den Nutzern zugute, sondern auch den Unternehmen, die von einem barrierefreien Angebot profitieren können und ihre Zielgruppe erheblich erweitern.
Hier noch einmal die wichtigsten Kriterien, ob Sie vom BFSG betroffen sind oder nicht:
- Betroffene Bereiche:
- Unternehmen, die Produkte und Dienstleistungen im B2C-Bereich anbieten, also unter anderem alle E-Commerce-Plattformen
- Finanzdienstleistungen (z. B. Banken)
- Öffentlicher Personennahverkehr (ÖPNV)
- Telekommunikationsdienste
- Ausnahmen:
- Kleine Unternehmen mit weniger als 10 Mitarbeiter*innen UND einem Jahresumsatz unter 2 Millionen Euro
- Kriterien:
- Produkte und Dienstleistungen, die öffentlich zugänglich sind
Betroffene erhoffen sich vom BFSG endlich die schon lange notwendige Zugänglichkeit. Unternehmen sind aber gut damit beraten, nicht bis zum 28.6. zu warten. Nicht nur werden die Fachleute rar, ihnen entgeht auch ein entscheidender Wettbewerbsvorteil. kümmern Sie sich also am Besten schon jetzt, schließlich sind 200 Tage schneller vorbei, als man denkt.
Links zu noch mehr Informationen:
Türchen 11 – Wieso hat Opa ein Speichern-Symbol?
Wir alle kennen die Diskette als das Symbol fürs Speichern, auch wenn manche von uns nie eine solche in der Hand gehalten haben. Dieses kleine, quadratische Icon hat sich bei den Millenials fest in der digitalen Kultur verankert. Für die Generation Z ist es einfach ein altbekanntes Symbol für „Speichern“, ohne jemals die physische Vorlage gesehen zu haben. Disketten sind etwas, worüber Opa bald in den Geschichten von früher erzählen wird.
Ähnlich verhält es sich mit dem Burger-Icon, das sich über die Zeit als Menü-Symbol etabliert hat. Drei übereinanderliegende Linien, die an ein gestapeltes Sandwich erinnern – auch wenn das Original nichts mit Fast Food zu tun hat. Beide Beispiele zeigen, dass Icons erlernt werden müssen und nicht immer sofort verständlich sind.
Beim Gestalten neuer Icons ist es wichtig, sich zu fragen, ob sie wirklich intuitiv und für alle verständlich sind. Ein neues Symbol mag klare Assoziationen für die Designer haben, doch für andere kann es verwirrend sein. Minimieren Sie potenzielle Missverständnisse indem sie neue Symbole vorher testen.
Falls möglich, kombinieren Sie Icons mit erläuterndem Text. Dadurch wird sichergestellt, dass die Bedeutung klar ist, selbst wenn das Bild selbst Fragen aufwirft. Schließlich geht es darum, eine visuelle Sprache zu schaffen, die alle Nutzer einschließt.
Türchen 12 – Syn…dingsisch?! Was waren nochmal syntaktisch und semantisch?
Stellen wir uns einmal eine Weihnachtskarte vor. Der syntaktische Aspekt wäre, dass die Karte sauber und ordentlich gestaltet ist – die richtigen Farben, die passenden Bilder, alles hübsch angeordnet. Doch wenn wir den Text auf der Karte lesen, könnte da auch nur „Blablabla, Frohes Fest“ stehen. Der Zweck wäre erfüllt, aber die Botschaft bleibt unklar und wenig festlich.
Ähnlich verhält es sich mit Quelltext auf Webseiten: syntaktisch korrekt bedeutet, dass der Code fehlerfrei ist und technisch funktioniert. Alles ist am richtigen Platz, genau wie die Schmuckstücke am Weihnachtsbaum. Doch was tun, wenn der Code nur formal richtig ist, aber nicht die richtige Bedeutung vermittelt?
Hier kommt die semantische Korrektheit ins Spiel. Semantisch korrekter Quelltext sorgt dafür, dass die Struktur und die Elemente einer Webseite auch für Maschinen und Hilfsprogramme wie Screenreader logisch und sinnvoll sind. Überschriften, Absätze und Bilder bekommen eine eindeutige Rolle und Bedeutung, die über die reine Darstellung hinausgeht.
Semantik verleiht dem Web seine eigentliche Stimme. Ein Abschnitt, der korrekt als Überschrift gekennzeichnet ist, wird von Screenreadern als solcher erkannt und hilft Nutzern, sich besser zu orientieren. So wird Ihr Quelltext nicht nur ein hübscher Weihnachtsschmuck, sondern eine echte Geschichte, die erzählt wird und verstanden werden kann.
Links zu noch mehr Informationen:
Türchen 13 – Quadratisch, praktisch, gut
QR-Codes sind diese kleinen, pixeligen Quadrate, die mittlerweile fast überall zu finden sind – von Flyern über Verpackungen bis hin zu Tickets. Vieles, was dieses Jahr unterm Weihnachtsbaum liegt, wird einen haben. Auf den ersten Blick wirken sie vielleicht nicht besonders barrierefrei, doch bei genauerem Hinsehen bieten sie durchaus Potenzial für Inklusion und praktische Anwendungen.
Nehmen wir zum Beispiel Visitenkarten. Mit einem QR-Code kann man Kontaktdaten direkt ins Smartphone einscannen. Das spart nicht nur das manuelle Abtippen, sondern ermöglicht es auch, die Informationen von einem Screenreader vorlesen zu lassen. Menschen mit Sehbehinderungen können so die Kontaktdaten einfach erfassen und speichern.
Doch wie steht es um die Barrierefreiheit von QR-Codes selbst? Hier liegt die Herausforderung darin, dass die Codes erst einmal gefunden werden müssen. Um sie auch für blinde Nutzer zugänglich zu machen, können gedruckte QR-Codes mit einem fühlbaren Rahmen versehen werden. Doch sobald sie gescannt sind, können sie Zugang zu barrierefreien Inhalten bieten, wie beschreibenden Texten, Audioaufnahmen oder direkt abrufbaren digitalen Informationen. Auch Erklärungen in Leichter Sprache wären möglich.
QR-Codes sind also mehr als nur praktische kleine Helfer für Faule. Sie können die Barrierefreiheit realer Gegenstände durch digitale Medien unterstützen.
Links zu noch mehr Informationen:
Türchen 14 – Ich hab da mal was vorbereitet
Stellen Sie sich vor, Sie könnten den Kindern (oder auch jung gebliebenen Erwachsenen) auf Ihrer Webseite ein Wunschzettel-Formular bereitstellen, das direkt an den Weihnachtsmann geht. Mit dem Autocomplete-Attribut wird das Ausfüllen zum Kinderspiel.
Unser Formular könnte Felder für den Namen, die Adresse und natürlich die Wünsche enthalten. An jedem Eingabefeld wird im Attribut „autocomplete“ festgelegt, welche Daten vom Nutzer erwartet werden. Der Browser erkennt, was schon gespeichert wurde, und vervollständigt die Felder beinahe wie von Zauberhand. So müssen die Kleinen und Großen nicht jedes Mal mühsam ihre Daten eingeben. Ein Klick und der Name erscheint, ein weiterer und die Adresse ist auch schon ausgefüllt.
Wichtig ist aber, dass autocomplete kein Label ersetzt. Die Angabe dient nur der technischen Information an den Browser und nicht der Beschriftung von Eingabefeldern für die Nutzer.
Das Beste daran: Das Autocomplete-Attribut spart nicht nur Zeit, sondern sorgt auch für Vorfreude. Wenn der Wunschzettel schneller ausgefüllt ist, bleibt mehr Raum, um sich über die eigenen Wünsche Gedanken zu machen. Besonders im Hinblick auf digitale Barrierefreiheit bietet diese Funktion einen großen Vorteil: Nutzer, die bei der Eingabe Unterstützung benötigen oder technische Hilfsmittel verwenden, finden es einfacher, ihre Daten bereitzustellen.
Und wer weiß, vielleicht erfüllt sich der eine oder andere Wunsch noch schneller, als Sie „Ho Ho Ho“ sagen können.
Links zu noch mehr Informationen:
Türchen 15 – Ziiiiiiiiieeeeeehhhh… oder?
Skispringen ist der Sofa-TV-Sport des Winters. Auch an der Schanze wird jeder Sprung mit einem langen Ziiiiiiiiieeeeeehhhh begleitet, bis die perfekte Telemark-Landung sitzt. Aber wie ist das eigentlich auf Websites mit dem Ziehen und Landen? Websites werden immer interaktiver. Über Drag’n’Drop-Bewegungen können Nutzer Inhalte verschieben oder Slider bedienen.
Doch was, wenn das nicht geht? Wenn die Feinmotorik nicht präzise genug ist oder gleich gar keine Maus verwendet wird? Häufig stehen Tastatur-Nutzer vor dem Problem, dass komplexe Mausgesten wie Drag’n’Drop benötigt werden um eine Funktion richtig zu bedienen. Sie sind dann automatisch ausgeschlossen.
Dabei ist die Lösung relativ einfach: schaffen Sie Alternativen. Inhalte per Drag’n’Drop zu sortieren ist für Nutzer von Mäusen wunderbar unkompliziert. Aber fügen Sie doch zusätzliche Buttons hinzu um Elemente Schrittweise zu verschieben. Mit den passenden Beschriftungen versehen verstehen auch Nutzer von Screenreadern, wie das Element funktioniert.
Man sieht: Barrierefreiheit bedeutet nicht, dass man auf Funktionalität zugunsten anderer verzichten muss. Meist reicht es, mehrere Sinne, Ausgabegeräte oder wie hier Eingabegeräte zu unterstützen damit jeder Nutzer seinen Weg finden kann.
Türchen 16 – Wie Screenreader die Welt sehen
Wenn die Weihnachtszeit naht, schmücken wir voller Freude unseren Weihnachtsbaum – jedes Detail hat seinen festen Platz, von der Spitze bis zu den funkelnden Lichtern. In der Barrierefreiheit haben wir stattdessen den Accessibility Tree, der die Zugänglichkeit einer Webseite für unterstützende Technologien wie Screenreader sicherstellt.
Der Accessibility Tree ist eine vereinfachte Darstellung des Document Object Model (DOM), die speziell für Screenreader und andere Hilfsmittel erstellt wird. Während der DOM-Tree die gesamte Struktur und den Inhalt der Webseite enthält, konzentriert sich der Accessibility Tree auf die für Barrierefreiheit relevanten Elemente. Er strukturiert die Inhalte so, dass Hilfsmittel diese effizient interpretieren und wiedergeben können.
Aufgebaut wird der Accessibility Tree vom Browser selbst. Dabei werden ARIA-Attribute und andere semantische HTML-Elemente berücksichtigt, um den Baum mit bedeutungsvollem Inhalt zu füllen. So enthält er am Ende nur die wesentlichen Informationen wie Überschriften, Listen, Formularelemente und deren Eigenschaften, während dekorative oder redundante Details weggelassen werden. Damit wird klar, wieso es so wichtig ist, semantisches HTML zu schreiben.
Der Accessibility Tree ist also ein gut gestalteter Weihnachtsbaum für Assistenzsysteme – klar strukturiert und auf das Wesentliche fokussiert (ohne komisches Lametta).
Links zu noch mehr Informationen:
Türchen 17 – Hier geht es zur Überraschung!
Wer liebt nicht eine gute Überraschung? Ob hinter dem nächsten Adventskalendertürchen oder unterm Weihnachtsbaum – Überraschungen können großartig sein. Auf Websites dagegen sind Überraschungen eher eins: anstrengend. Für viele Menschen mit Einschränkungen sind überraschende Änderungen eher ein Stolperstein als ein Geschenk.
Stellen Sie sich vor, Sie klicken auf „Hier geht’s zur Überraschung!“ und landen… irgendwo. Ein neuer Tab öffnet sich, oder es startet plötzlich ein Download. Die Verwirrung ist groß und möglicherweise werden die neuen Tabs und heruntergeladenen Dateien auch nicht bemerkt. Die Lösung ist denkbar einfach: kündigen Sie alles unerwartete an.
Drei Tipps, um Links für alle zugänglich zu machen:
- Deutliche Kennzeichnung: Links sollten klar benannt sein. Anstelle von „Hier klicken“, sagen Sie lieber „Laden Sie den Weihnachtsgruß herunter“.
- Dateiformat und Dateigröße: Fügen Sie bei allem, was keine Website ist, das Dateiformat und (vor allem bei großen Dateien) die Dateigröße hinzu. so wissen Nutzer genau, was sie erwartet und ob es sich auch unterwegs lohnt, die Datei herunterzuladen.
- Vermeidung von Überraschungen: Wenn ein Link ein neues Fenster öffnet oder auch nur von der eigenen Seite wegführt, sollten Nutzer darauf hingewiesen werden. Sonst suchen sie vielleicht vergeblich nach der neuen Seite. Ein kleiner Hinweis wie „(externer Link)“ oder „(öffnet im neuem Tab)“ verhindert Überraschungen.
Ein guter Adventskalender bringt Vorfreude, statt Frust. Ein guter Link auch.
Links zu noch mehr Informationen:
- Einen barrierefreien Linktext verfassen – von „Hier klicken“ zu Klartext
- Button oder Link – wann verwende ich was?
Türchen 18 – Internationaler Tag der Migranten
Wie wäre es, wenn die Weihnachtsgeschichte in der Sprache der Weihnachtselfen erzählt werden würde? Der Zauber ginge für uns vermutlich verloren, wir würden kaum ein Wort verstehen.
Am heutigen Tag der Migranten schauen wir uns an, wie Sprache dabei helfen kann, Seiten inklusiver zu gestalten.
Genau hier kommt die Einfache Sprache ins Spiel – ein wahres Geschenk für alle, die Deutsch nicht als Muttersprache sprechen. Sie hilft, Inhalte zugänglich und verständlich zu machen, ohne den Kern der Botschaft zu verlieren. Einfache Sprache ist eine vereinfachte Form der Alltagssprache. Sie kürzt Sätze und nutzt bekannte Wörter. Sie ist besonders nützlich für Menschen, die neu in einer Sprache sind.
Oft verwechselt wird sie mit der Leichten Sprache. Es gibt aber große Unterschiede. Leichte Sprache geht noch einen Schritt weiter und ist speziell standardisiert. Sie richtet sich an Menschen mit kognitiven Einschränkungen und verwendet sehr kurze Sätze ohne Nebensätze sowie klare, einfache Wörter. Daneben gibt es viele weitere Regeln, die von speziell ausgebildeten Übersetzern genutzt werden um vorhandene Inhalte völlig neu aufzubereiten. Beide Konzepte sind wichtige Bausteine der digitalen Barrierefreiheit.
Wie Sie sehen richtet sich digitale Barrierefreiheit nicht nur an Menschen mit Behinderungen oder chronischen Krankheiten. Am Ende helfen wir mit unseren Maßnahmen sehr vielen Menschen, an die man zunächst womöglich nicht dachte.
Links zu noch mehr Informationen:
- Für alle verständlich – Was ist der Unterschied zwischen Leichter und Einfacher Sprache?
- Leichte Bilder für Leichte Sprache – Barrierefreiheit ohne Kopfzerbrechen
- Regeln für Leichte Sprache – In Leichter Sprache
Türchen 19 – Kein Fan vom Fanblock
Die Weihnachtskarten sind inzwischen sicher verschickt, die letzten Geschenke beschriftet. Doch haben Sie sich je darüber Gedanken gemacht, wie Sie den Text ausrichten und ob eine Variante leserlicher ist als die andere?
Von Hand würden wir längere Texte (im Deutschen) nie anders schreiben als linksbündig. Damit überrascht es nicht, dass das auch die Schreibweise ist, die unser Gehirn am einfachsten lesen kann. Gerade im Druck hat sich aber der Blocksatz durchgesetzt um ein aufgeräumteres Design zu erreichen. Das funktioniert dort auch relativ gut, denn man kennt die exakten Zeilenlängen. Außerdem sorgt der Blocksatz auch optisch dafür, dass der zusammenhängende Text ohne Trennlinien erkannt werden kann.
Die unterschiedlichen Verhältnisse im Web und moderne responsive Layouts machen es aber unmöglich, vorherzusehen, wie der Text gerade dargestellt wird. Das Ergebnis? Bei kurzen Zeilen, recht langen Wörtern oder fehlender Worttrennung entstehen möglicherweise unangenehm große Wortabstände. Die können vor allem für Menschen mit Lese- und Sehbehinderungen zum echten Problem werden und das Lesen zusätzlich erschweren.
Auch wenn es also ein klein wenig unaufgeräumter aussieht: Bleiben Sie bei linksbündig gesetztem Fließtext damit Ihre Inhalte auch wirklich bei Ihren Lesern ankommen.
Links zu noch mehr Informationen:
- Barrierefreie Schriftarten – damit Schrift nicht zum Hindernis wird
- Schriftgröße und Barrierefreiheit – kein Kleingedrucktes mehr
- Beispiele für typische Fehler schlecht lesbarer Texte von Phillip Roth
Türchen 20 – Sind Soziale Medien gar nicht so sozial?
In der Weihnachtszeit, wo Heimlichkeit und Überraschungen groß geschrieben werden, könnte man meinen, die Kunst des Postings in sozialen Medien sei ein wohlgehütetes Geheimnis. Doch anders als der geheime Rezepttipp für Omas Plätzchen, sollte Barrierefreiheit kein Geheimnis bleiben!
Ein weit verbreiteter Mythos ist, dass Preformatter dabei helfen können, Texte besser lesbar zu machen. Zwischenüberschriften und Hervorhebungen werden plötzlich möglich. Aber Vorsicht! Die Verwendung solcher Tools kann Texte für Screenreader unlesbar machen und so Barrieren schaffen, statt sie abzubauen.
Aber wieso? Das liegt daran, dass die Preformatter keine semantische Formatierung vornehmen, sondern die Schriftzeichen durch Sonderzeichen ersetzen. Screenreader lesen aber nur einen Teil der Schriftzeichen vor, die meisten Sonderzeichen werden schlicht ignoriert.
Nehmen wir uns ein Beispiel an folgendem Satz:
Screenreader lesen diesen 𝐮𝐧𝐬𝐢𝐜𝐡𝐭𝐛𝐚𝐫𝐞𝐧 Weihnachtsgruß 𝐧𝐢𝐜𝐡𝐭 vor.
Was Sie erwarten würden: Screenreader lesen diesen unsichtbaren Weihnachtsgruß nicht vor.
Was wahrscheinlich vorgelesen wird: Screenreader lesen diesen Weihnachtsgruß vor.
Das kann je nach Verwendung für völlig andere Sätze und große Missverständnisse sorgen. Meistens wird Ihren Lesern aber einfach der vermutlich wichtigste (weil hervorgehobene) Teil Ihres Posts fehlen. Indem Sie auf Preformatter verzichten und stattdessen auf natürliche Textstrukturen setzen, fördern Sie die Barrierefreiheit auf LinkedIn und anderen Plattformen und können Ihren Weihnachtsgruß dieses Jahr auch wirklich an alle Follower verschicken.
Links zu noch mehr Informationen:
Türchen 21 – Tippen Sie diesen Text ab
Stellen Sie sich vor, der Weihnachtsmann steht vor der Tür, bereit, die Geschenke zu verteilen. Um die zu bekommen müssen Sie aber erst die letzten drei Ziffern von Pi ansagen. Unmöglich für Sie? So fühlt es sich für Nutzer von Screenreadern und Braillezeilen, wenn sie auf ein visuelles Captcha stoßen. Diese kleinen Prüfungen werden eingesetzt, um zwischen Mensch und Maschine zu unterscheiden und Bots fernzuhalten. Doch sie stellen für Menschen mit Sehbehinderungen oder kognitiven Einschränkungen oft eine unüberwindbare Hürde dar. Ganz im Gegensatz zu Bots übrigens: die können viele dieser Aufgaben problemlos lösen.
Visuelle Captchas widersprechen dem Gedanken der Barrierefreiheit, denn sie verlassen sich auf die visuelle Wahrnehmung. Es geht darum, kaum lesbare Buchstaben zu erkennen oder winzige Ampeln auf Fotos zu finden.
Zum Glück gibt es Alternativen! Textbasierte oder akustische Captchas bieten eine barrierearme Lösung und reduzieren die Frustration. Die weitaus bessere Möglichkeit aber sind unsichtbare Captchas, die im Hintergrund arbeiten, ohne dass Nutzer es bemerken. Diese Technologien schätzen ein, wie natürlich Nutzer sich auf der Website verhalten. Bewegen Sie sich langsam, verweilen auch mal an Stellen um diese zu lesen?
Wichtig ist aber: Captchas sollen ausschließen. Am Ende wird es kein Captcha geben, dass nicht aus Versehen einen Menschen ausschließt oder einen Bot durchlässt. Für Unternehmen, die ihre Webseiten inklusiver gestalten wollen, ist der Verzicht auf visuelle Captchas trotzdem ein erster Schritt in die richtige Richtung.
Links zu noch mehr Informationen:
Türchen 22 – Ein Geschenk für SEO
Wie wäre das: es ist Weihnachten und statt Socken oder Parfum finden Sie das perfekte Geschenk unterm Baum: Alternativtexte und Untertitel. Nein, das ist kein Scherz! Diese kleinen Helferlein sind nicht nur ein Schritt in Richtung digitale Barrierefreiheit, sondern auch ein wahrer Segen für Ihr SEO-Ranking.
Doch warum sind Alternativtexte so wertvoll? Ganz einfach: Sie beschreiben Bilder und ermöglichen Menschen mit Sehbehinderungen, den Inhalt wahrzunehmen. Gleichzeitig hilft das den Suchmaschinen, den Inhalt Ihrer Webseite besser zu verstehen.
Untertitel wiederum sorgen dafür, dass auch Menschen, die nicht hören können oder gerade in ihrer Umgebung keinen Ton anschalten können, jedes Wort eines Videos mitbekommen. Und: Google liebt es, wenn Inhalte gut verständlich sind. Ihr Video könnte also blitzschnell auf der Wunschliste der Suchergebnisse ganz oben stehen.
Im Übrigen gilt das auch für viele weitere Maßnahmen. Durch höhere Verweilzeiten erkennt auch Google die verbesserte Zugänglichkeit und Relevanz der Inhalte und belohnt das mit einem besseren Ranking.
Digitale Barrierefreiheit ist damit ein doppeltes Geschenk: Sie schafft ein inklusives Umfeld für alle Nutzer und verbessert gleichzeitig die Sichtbarkeit Ihrer Inhalte. Das ist wie der Weihnachtsmann, der zwei Fliegen mit einer Klappe schlägt – oder besser gesagt, zwei Schlitten mit einem Rentier zieht.
- Barrierefreiheit und SEO – Freund oder Feind?
- Alternativlos gut – Wie sie barrierefreie Alternativtexte schreiben
- Alternativtext-Duplikate – doppelt hält besser?
- Wie nutze ich Untertitel für mein Video richtig?
Türchen 23 – Einschränkung oder Behinderung?
In der Presse und auch unter Fachleuten wird eine Diskussion hitzig geführt: Sollte man jetzt Menschen mit Behinderung oder Einschränkung sagen? Erst letztens laß ich von der Empfehlung, Dinge beim Namen zu nennen und nicht schönzureden. Nur dann schaffen wir Sichtbarkeit. Eine nachvollziehbare Perspektive.
Heute soll es darum gehen, weshalb auf stolperfrei.digital trotzdem an den meisten Stellen von Menschen mit Einschränkung die Rede ist. Das hat einen einfach Grund: Die Behinderung einer Person ist ziemlich egal, sie hat auf die Arbeit an einer barrierefreien Website keinen Einfluss (auch wenn Barrierefreiheit offiziell über die Zugänglichkeit für Menschen mit Behinderung definiert ist, ich weiß).
Um das zu verstehen müssen wir damit beginnen, welche Einschränkungen es geben kann.
- Permanente Einschränkungen, also Einschränkungen die üblicherweise ein Leben lang bestehen. Dazu zählen Behinderungen und chronische Krankheiten.
- Temporäre Einschränkungen, also solche die zwar länger bestehen, aber wieder vergehen werden. So könnte man sich beispielsweise den Arm gebrochen oder gerade eine Augen-OP überstanden haben.
- Situative Einschränkungen, die nur in einem kurzen Moment auftreten. Die Mutter, die mit dem Kind auf dem Arm einhändig noch fix etwas organisieren muss während die Sonne auf dem Handydisplay blendet.
Alle drei Arten haben unterschiedliche Ursachen, können aber zur selben Anforderung führen. Bei der Auswahl von Farbkontrasten ist es nicht von Bedeutung, weshalb Nutzer diese brauchen. Nachlassende Sehschwäche im Alter, frische Augen-OP oder blendende Sonne? Es spielt keine Rolle für die Barrierefreiheit der ausgewählten Farben.
Wenn wir uns weniger auf die Behinderungen von Menschen konzentrieren, sondern vielmehr auf deren Anforderungen, dann können wir wirkliche Unterstützung schaffen und verschenken dieses Jahr vielleicht ein wenig Inklusion statt Diskussion über Worte.
Türchen 24 – Die Weihnachtsgeschichte, etwas alltagsnaher
Die Weihnachtsgeschichte lehrt uns von Hoffnung, Demut und Glaube – doch wie sähe diese Geschichte aus, wenn wir von den Barrieren erzählen, vor denen viele Menschen auch über 2000 Jahre später noch stehen?
Vielleicht in etwa so:
Maria und Josef hatten es schwer auf ihrer Reise nach Bethlehem. Die holprigen Straßen waren schlecht markiert, und der Esel stolperte immer wieder über lose Steine. Für Marias Rollstuhl war das ein echtes Problem.
In Bethlehem angekommen, begann die nächste Herausforderung: Jede Herberge war voll, und selbst wenn Platz gewesen wäre, gab es keine barrierefreien Zugänge über Rampen. Maria, die kaum noch gehen konnte, musste von Josef getragen werden. Schließlich fanden sie Unterschlupf in einem Stall – mit schmalem Eingang und hoher Schwelle.
Die Geburt fand in der Dunkelheit statt, ohne medizinische Unterstützung. Josef tat, was er konnte, doch seine eingeschränkte Sicht machte die ohnehin unsicheren Bedingungen noch schwieriger.
Auf den Feldern erschien den Hirten ein Engel. Doch ein Hirte, der schwerhörig war, konnte die Botschaft nicht verstehen. Ohne seinen Gebärdesprachedolmetscher war er auf die Hilfe der anderen angewiesen. Auch die Weisen aus dem Morgenland kämpften – bei bedecktem Himmel verloren sie den Stern und wünschten sich dringend Wegweiser.
Trotz all dieser Hindernisse wurde Jesus geboren. Maria sah ihr Kind an und flüsterte: „Vielleicht ist dies seine Botschaft: Eine Welt ohne Barrieren, in der jeder seinen Platz hat.“
Ich wünsche frohe Weihnachten und einen hoffentlich stolperfreien Rutsch ins Jahr 2025.