Sie sind hier:

Adventskalender der Zentralstelle für barrierefreie Informationstechnik

Täglich wird es im Advent einen Tipp oder ein Thema geben, damit digitalen Angebote barrierefrei und für alle zugänglich gestalten werden.
Die Serie wird tagesaktuell auf Twitter gepostet.
Twitterauftritt des Landesbehindertenbeauftragten

Kalender mit 12 Monaten, für jeden Monat ist eine andere Barriere die bei der Nutzung von Online-Kalendern auftreten kann, visualisiert. Mangelnde Kontraste, abgeschnittene Texte, nicht ausgezeichnete Tage, viele hier-Links etc.
Quelle: Einfach für Alle – Das Angebot der Aktion Mensch für ein barrierefreies Internet

Tag 1 auf Twitter

Bereits in 2007 waren die meisten digitalen Barrieren bekannt, wie dieser Kalender beweist.

Setzt dem endlich ein Ende und hebt die Barrieren auf. Es ist nicht so schwer!
In den nächsten Tagen gibt es hier ein paar grundlegende Tipps.

Kalenderbild mit 12 Barrieren zum Ausdrucken herunterladen

Ein schwarzes Rechteck

So sieht für blinde Menschen ein Bild ohne Alternativtext (Bildbeschreibung) aus.

Tag 2 auf Twitter

In allen digitalen Anwendungen, auch in sozialen Medien, brauchen Bilder Bildbeschreibungen.
Wenn Ihr mit Euren Bildern eine Botschaft senden wollt, dann garantiert mit Bildbeschreibungen, dass diese auch von allen Menschen wahrgenommen werden kann.

Wie das am Besten geht lest ihr z.B. hier:
Artikel Bildbeschreibung (Alternativtext) in Social Media – vier einfache Regeln des DBSV

Bildausschnitt aus dem Erklärvideo der Zentralstelle auf Youtube mit dem Untertitel: Ein Problem, das sich lösen lässt. Alle können schließlich ihr Recht auf Teilhabe durch barrierefreie Kommunikation einfordern.
Quelle: Erklärvideo der Zentralstelle

Tag 3 auf Twitter

Wenn Ihr Videos veröffentlicht, sollten diese zuschaltbare Untertitel haben.
Bei Youtube zum Beispiel könnt ihr einfach die automatisch erzeugten Untertitel nachbearbeiten und Inhalte, Satzzeichen und Großschreibung anpassen.
Anleitung für Untertitel auf Youtube

Tag 4 auf Twitter

Auf Webauftritten veröffentlichte Dokumente müssen ebenso barrierefrei sein, wie der Webauftritt selbst. Dies lässt sich am besten sicherstellen, wenn in allen Prozessen die Barrierefreiheit von Dokumenten bereits berücksichtigt wird. Achte dabei auch auf eine verständliche Sprache und gute Überschriftenstrukturen.
Tipps, Tools und Anleitungen für barrierefreie Dokumente

Tag 5 auf Twitter

Wie gendert man barrierefrei? Es gibt noch keine technisch barrierefreien Genderzeichen.
Die Handreichung Gendersensible Sprache in der Bremer Verwaltung hilft weiter.

Bitte verwendet in Zukunft besser lesbare Kontraste!

Tag 6 auf Twitter

Die Schriften einer digitalen Anwendung sollten mindestens einen Kontrast von 4.5:1 zum Hintergrund haben. Besser wäre 7:1.
Überprüfen könnt Ihr es z.B. mit diesem Tool:
Colour Contrast Analyser (CCA)

Im Firefox könnt ihr z.B. über die "Werkzeuge für Webentwickler – Barrierefreiheit – Simulieren" in der Menüleiste oben eure Webseite betrachten, wie manche Farbfehlsichtige sie sehen.

Tag 7 auf Twitter

Sowohl im Webauftritt als auch bei Euren Dokumenten gilt:
Zeichnet Überschriften auch als Überschriften aus!

Nicht nur visuell fett machen, sondern z.B. in Office dem Text die passende Formatvorlage Überschrift zuweisen.
In Webauftritten h1 bis h6 verwenden.
In geordneter Reihenfolge.
Überschriften sollten eindeutig sein, sich nicht wiederholen.
Es sollte nur eine Hauptüberschrift h1 je Seite/Dokument geben.
Das erleichtert deutlich die Übersicht und ermöglicht es, gewünschte Inhalte gezielt anzusteuern.

Umfassendere Informationen findet ihr z.B. in diesem alten aber noch immer gültigen Artikel aus dem Jahr 2009 (überarbeitet in 2013):
Großer fetter Text macht noch lange keine Überschrift

Beispielhafter Text in zwei Spalten. Links sind nur die Worte Hier und PDF sowie eine extrem lange URL verlinkt. Rechts sind die Worte Telefonverzeichnis, Raumplan (PDF) und Handreichungen der Geschäftsstelle verlinkt.

Tag 8 auf Twitter

Links immer aussagekräftig gestalten!
Nicht einfach nur Wörter wie "HIER" oder "DOWNLOAD" verlinken, sondern stets das Ziel/Zweck verlinken.
Das hilft nicht nur bei Screenreadernutzung und Sprachsteuerung sondern verbessert auch allgemein die Lesbarkeit Eurer Angebote.

Beginn der Erklärung in Leichter Sprache. Jeder soll Internet-Seiten und Apps gut nutzen können. Das soll so sein für alle Menschen. Also zum Beispiel auch für blinde Menschen, gehörlose Menschen, Menschen, die nicht alle Finger bewegen können.  Darum sollen Internet-Seiten und Apps barrierefrei sein.

Tag 9 auf Twitter

Wie muss eine Erklärung zur Barrierefreiheit aussehen?
Was gehört alles hinein?

Besonderheit: Die ZenbIT stellt zentral für alle bremischen Angebote kostenfrei die zugehörige Version in Gebärdensprache und Leichter Sprache zur Verfügung.

Weitere Infos unter dem passenden Aufklappmenüpunkt bei der
Zentralstelle für barrierefreie Informationstechnik

Auf dem Bild ist eine Captcha-Buchstabenfolge zu sehen, daneben zwei Buttons "Code vorsprechen" und "Neuer Code"

Tag 10 auf Twitter

Ich bin kein Roboter – Komplizierte visuelle Ratespielchen (Captchas) kommen in Formularen zum Einsatz und sollen sicherstellen, dass nur Menschen die Formulare befüllen. Das können aber nicht alle Menschen und einige Roboter können diesen Schutz inzwischen umgehen!

Oft wird zusätzlich zu unleserlichen Zeichen eine Audiovariante angeboten. Schlechtestenfalls passiert das in einem Player, der selbst nicht barrierefrei bedienbar ist oder die Ausgabe der Ziffern erfolgt auf englisch. Falls unbedingt erforderlich, setzt andere Methoden ein!

Ein Zeitlimit für die Eingabe größer als x Sekunden, einfache Fragen, für die man nur ein Textfeld ausfüllen muss (Ist Feuer heiss? Was ist eins plus eins?), visuell versteckte Eingabefelder (Honeypots) mit "nicht ausfüllen"-Hinweis für Screenreadernutzende im Label etc.

Es gibt viele andere Möglichkeiten. Fragt Euch auch, ob ein Captcha überhaupt erforderlich ist? Eine vernünftige Validierung der Eingaben reicht zur Sicherung eventuell auch aus.

Anbei ein bisschen Lesestoff zu dem Thema.

Tag 11 auf Twitter

Overlay-Tools, die versprechen, den Webauftritt per Mausklick barrierefrei zu machen, halten nicht das, was sie versprechen.
Dazu sind sie meist umständlich zu bedienen oder nicht tastaturzugänglich.
Behebt die Barrieren direkt auf euren Webauftritten!
Barrierekompass – Was können Overlays, Plugins und KI-Barrierefreiheit?

Oder auf englisch kurz gefragt und im Artikel sehr gut begründet:
Should I us an accesibility overlay?

Passendes Beispiel:
Möchtet Ihr einen Webauftritt voller Tipp- und Grammatikfehler sowie willkürlich geschwärzter Absätze sehen und anschließend eine Bedienfläche suchen, bei der ihr erst umständlich einstellen müsst, dass die Fehler behoben werden?
Nein?
Warum nicht?

Tag 12 auf Twitter

Im Advent blinken und blitzen viele Webseiten.
Aber das kann bei manchen Menschen epileptische Anfälle auslösen.
Andere Menschen werden dadurch so abgelenkt, dass sie sich nicht mehr auf die Texte konzentrieren können.
Wenn ihr Animationen und Transitionen einsetzt, dann bitte nur sehr moderat und mit nicht mehr als drei Blitzen pro Sekunde.
Achtet auf auf eure animierten Gifs.

In den Browser-Einstellungen kann man vorgeben, dass man keine Animationen sehen möchte.
Dazu muss das Webangebot jedoch ein passendes prefers-reduced-motion Stylesheet anbieten.

CSS prefer-reduced-motion Media Query – Bei Bedarf weniger Bewegung

Eine kleine Maus sitzt vor einem Stop-Schild

Tag 13 auf Twitter

Viele Menschen sind im Netz mit #Tastatur unterwegs.
Stellt sicher, dass alle Bereiche Eurer digitalen Angebote mit Tastatur erreichbar und bedienbar sind.
Dies gilt auch für mobile Ansichten und Apps!
Verzichtet an #Tag13 auf Mouse und nutzt Tab- und Pfeiltasten.
Na?
Klappt's?

Tag 14 auf Twitter

#Barrierefreiheit ist keine nette Zugabe sondern für digitale Angebote öffentlicher Stellen rechtlich verpflichtend.
Eine gute Übersicht über die rechtlichen Rahmenbedingungen Rechtslage in den einzelnen Bundesländern sowie weitere Informationen zu Verständnis, Verpflichtung und Verwirklichung bietet
Teilhabe 4.0

Tag 15 auf Twitter

Als Mindestgrundlage für barrierefreie digitale Angebote gilt die WCAG.
Diese englische Webseite erklärt die wichtigsten WCAG-Kriterien sehr anschaulich und bebildert mit Erläuterungen, warum dieses Kriterium wichtig ist und Tipps, wie man es berücksichtigt.

Accessguide

Tag 16 auf Twitter

Texte linksbündig setzen! Durch Blocksatz ergeben sich je nach Ausgabegerät große Lücken. Das erschwert die Lesbarkeit. Achtet auf ausreichenden Zeilenabstand, serifenlose Schriften. Relative Schriftgrößen im CSS verwenden, damit sich der Schriftgrad vergrößern lässt.

Weitere Informationen zur Schriftgestaltung für digitale Angebote findet Ihr z.B. hier:
https://leserlich.info

leserlich.info

Tag 17 auf Twitter

Jedem Topf sein Deckel und jedem Formular-Eingabefeld sein Label! Platzhaltertexte in Formularen sind nicht ausreichend. Kontraste sind schlecht, es fehlt die Übersicht, welche Felder bereits ausgefüllt worden sind (besonders bei autocomplete!). Eingabehinweise verschwinden bei der Eingabe. Selbst wenn für Screenreadernutzende aria-labels vorhanden sind, grenzen Platzhaltertexte dennoch aus.

Platzhalter in Formularfeldern sind schädlich

Tag 18 auf Twitter

Gebärdensprache wird oft vergessen bei digitalen Angeboten.
Weil: "Gehörlose können doch lesen!".
Ja, aber für manche ist #DGS einfach schneller zu verstehen als die Fremdsprache Schriftdeutsch.
Gerade bei komplizierten Inhalten.

Macht mehr DGS-Videos!

Checkliste zur Erstellung von DGS-Videos

Tatsächlich gibt es auch Dialekte in der Gebärdensprache, so dass empfohlen wird, regionale Sprecher einzusetzen, wenn Euer Zielpublikum aus dem Umkreis kommt.

Hinweis des Gehörlosenzentrums Bremen

Tag 19 auf Twitter

Viele #Barrieren in digitalen Angeboten fallen bei automatischer Testung (z.B. mit dem ARC Toolkit TPGi) auf und sollten, wie Tippfehler auch, umgehend behoben werden.

Unabdingbar sind dennoch zusätzliche #Nutzertests mit betroffenen Personen:
Vier Gründe warum Du behinderte Menschen bei der Barrierefreiheit einbinden solltest

Tag 20 bei Twitter

Leichte Sprache, ein Thema, um das sich viele drücken, da es (Kosten)-Aufwand verursacht, Texte von Profis geschrieben werden müssen und Nutzertests nötig sind.
Dennoch so wichtig, um Inhalte für alle verständlich anbieten zu können!

Köln legt vor:
Informationen in Leichter Sprache für viele Dienstleistungen der Stadt Köln

Tag 21 bei Twitter

Texte auf Webseiten vorlesen können moderne Browser gut.
Ihr braucht keine Extra-Funktion dafür.

Integrierte Vorlesefunktionen von Browsern nutzen

Zoomen und größerer Schriftgrad sind einstellbar, ihr braucht keine eigenen Buttons dafür.
Voraussetzung: Relative Schriftgrößen / gutes Reflow.
Testen!

Screenreader gehen über die reine Vorlesefunktion hinaus und lesen auch Strukturinformationen vor (Link, Schalter, Überschrift etc.)
Zum Testen eurer digitalen Angebote könnt ihr z.B. NVDA (Windows), JAWS (Windows), VoiceOver (Apple) oder Talkback (Android) nutzen.

Tag 22 bei Twitter

Überwachungsstelle, Durchsetzungsstelle, Zentralstelle, häh?
Wer sind die und was machen die?
Das haben wir euch mal kurz in einem Video erklärt.

Erklärvideo des Zentralstelle für barrierefreie Informationstechnik

Und wenn alle Stricke reißen, hilft die Schlichtungsstelle weiter.
Auch bei Beschwerden, bei denen es nicht um digitale Angebote geht.

Erklärvideo Schlichtungsstelle

Tag 23 bei Twitter

Kennt ihr schon das "Handbuch digitale Teilhabe und Barrierefreiheit"?
Renommierte Autor*innen beschreiben die aktuellen Grundlagen und bringen ihre jeweiligen Praxiserfahrungen in der Umsetzung Digitaler Teilhabe und Barrierefreiheit ein.
Lesen!

Artikel zum und Inhaltsverzeichnis des Handbuchs digitale Teilhabe und Barrierefreiheit

Tag 24 bei Twitter

Als Geschenk die wichtigsten Regeln der Barrierefreiheit leicht verständlich und bebildert als Poster zum Ausdrucken und an die Wand hängen.
Leider ist die PDF-Datei selbst nicht barrierefrei.