Unsere Tipps für mehr Barrierefreiheit im Web

Mann hält Smartphone mit angeschaltetem Screenreader ans Ohr

Als sehende und hörende Person mit Deutsch als Muttersprache fällt es manchmal schwer, Texte, Social Media Posts oder ganze Webseiten barrierefrei zu gestalten, weil man sprichwörtlich nicht das Auge dafür hat. Dabei ist es so wichtig, dass Menschen mit Beeinträchtigungen die Inhalte auch auf bestmögliche Art und Weise konsumieren können. In diesem Blogbeitrag haben wir mal alle unsere Tipps zusammengetragen.

Übrigens für Online-Shops, E-Books, Apps und viele weitere digitale Angebote gilt ab Mitte 2025 die Verpflichtung zur Barrierefreiheit. Das regelt das Barrierefreiheitsstärkungsgesetz. Mehr dazu findet ihr bei der Bundesfachstelle Barrierefreiheit.

Barrierefrei im Web – was heißt das eigentlich?

Barrierefrei, da denken viele an Fahrstühle oder Rampen an Eingangstüren etc. Barrierefreiheit ist aber auch im Web unglaublich wichtig für Menschen mit Sehbehinderung, Schwerhörige, Gehörlose und Blinde, aber auch diejenigen, die aus den unterschiedlichsten Gründen auf Inhalte in leichter Sprache angewiesen sind.

Zum Einstieg ein Bullshit-Bing übers Blindsein – unbedingt anschauen!

Barrierefreie Texte

  • Verständlichkeit – Setzt lieber auf kurze, prägnante Sätze, statt verschachtelte Wortgebilde.
  • Gendern – Hier wird es schwierig. Der Doppelpunkt galt lange als besonders inklusiv, der Deutsche Blinden- und Sehbehindertenverband e.V. (DBSV) rät allerdings davon ab. Am besten sind neutrale Formen, zum Beispiel Studierende statt Student*innen. Vorlese-Programme lesen Student:innen aber nicht unbedingt mit einer Pause vor, sondern erwähnen das Sonderzeichen mit. Sehbehinderte Menschen wiederum lesen schnell darüber, weil der Doppelpunkt zu schmal ist. Wenn es gar nicht anders geht, sollte man also lieber das * verwenden. Screenreader können darauf eingestellt werden und er ist optisch klarer verständlich.
  • Überschriften – In HTML als H-Element einstellen, so lassen sich auch nur Überschriften vorlesen
  • Abkürzungen – Diese sollten bei erstem Gebrauch eingeführt werden, zum Beispiel so: Suchmaschinenoptimierung (SEO).
  • Farben – Achtet auf hohe Kontraste für eine gute Lesbarkeit.
  • Ironie – Ist etwas sarkastisch oder ironisch gemeint, sollte das entsprechend gekennzeichnet werden.
  • Emojis – Stammen diese aus dem Unicode-Standard, werden diese mit Text-Beschreibung vorgelesen und benötigen keinen Alternativtext. Es sollten allerdings nicht zu viele Emojis aufeinanderfolgen und im besten Falle am Satzanfang oder -ende stehen.
  • Hashtags – Was liest sich leichter #blacklivesmatter oder #BlackLivesMatter? Genau, deshalb sollten Hashtags barrierefrei mit Binnenmajuskeln (so ein lustiges Wort) geschrieben werden – übersetzt: mit Großbuchstaben innerhalb der Wortfolge.
  • Außergewöhnliche Schriftarten – Sehen vielleicht schön aus, barrierefrei ist es aber leider ganz und gar nicht.
Balkendiagramm von Statista, welches zeigt, dass es 71.544 Blinde, 46.858 Personen mit einer hochgradigen Sehbehinderung und 230.507 Menschen, mit sonstigen Sehbeeinträchtigungen 2019 in Deutschland gab.
Quelle: Statista

Barrierefreie Bilder

  • Alternativtexte (Alt-Texte) – Hier solltet ihr kurz beschreiben, was oder wer auf dem Bild zu sehen ist. Quellenangaben oder Fotograf:innen-Tags sollten hier nicht isoliert stehen, dafür dient die Bildbeschreibung. In dieser wiederum sollte nicht dasselbe stehen, wie im Alt-Text.
  • Kontraste/Farben – Besonders Grafiken und Diagramme sollten nicht durch Farben verständlich sein, sondern auch durch Symbole und Strukturen leicht zu erfassen sein.
  • Informative Bilder – Ist das Bild wichtig, weil sonst Informationen fehlen, wie bei einem Diagramm zum Beispiel, dann sollte die Kernaussage des Graphen auch im Alt-Text stehen.
  • Dekorative Bilder – Hierbei ist es nicht unbedingt notwendig, einen Alt-Text zu schreiben.
  • Bilder mit Menschen – Wenn die abgebildeten Personen wichtig für den Kontext sind, dann sollte deren Name genannt werden. Auch die Emotionen können beschrieben werden. Beispiel: Ministerpräsident Kretschmer steht mit ernster Miene am Rednerpult. Ist die Optik der abgebildeten Menschen wichtig, so sollte auch diese beschrieben werden.
  • Nicht mehr als 80 Zeichen – Ein guter Alt-Text enthält nur die wirklich notwendigen Informationen zur Verständlichkeit.
  • Bilder mit Aufschrift – Hierbei muss selbstverständlich auch die Aufschrift im Alt-Text niedergeschrieben werden.
  • Verlinkte Bilder/Grafiken/Icons – Im Alt-Text immer die jeweilige Zielseite nennen.
  • Humor – Ist etwas Lustiges dargestellt, sollte das natürlich in Text übersetzt werden.
Beitragsbild: Mann hält Handy mit laufendem Sreenreader ans Ohr

Barrierefreie Videos und Audio-Dateien

  • Untertitel – Entweder direkt im Schnittprogramm im Video einbrennen oder später automatisch erstellen lassen. Das machen einige Social Media Plattformen inzwischen. Aber Achtung: Besser immer nochmal überarbeiten. UND: Im besten Falle nutzt ihr nur 2 Zeilen und lasst diese entsprechend lange eingeblendet.
  • Bildbeschreibung – In den Sequenzen, in denen nicht gesprochen wird, kann das Gezeigte beschrieben werden. Dabei gelten wieder die Regeln wie oben bei den Bildern.
  • Audiodateien – Ein ausführliches Transkript mit Beschreibungen von Tonalität, Emotionen ist hier besonders hilfreich.

Soweit unsere Tipps, die wir – zugegeben – auch noch viel öfter beherzigen müssten! Mehr Informationen zu diesem spannenden Themenfeld erhaltet ihr zum Beispiel bei Aktion Mensch – Dort könnt ihr auch Fördergelder für barrierefreie Websites erhalten. Bei Instagram folgen wir @barrierefreiposten und lernen viel dazu.

The following two tabs change content below.

Anastasia

Hallo, mein Name ist Anastasia und ich bin seit Februar 2015 bei den Klickkomplizen tätig. Mein Herz schlägt für alles, was mit Google Ads oder Social Media zu tun hat. Gern dürft ihr meine Artikel kommentieren.

Das könnte dich auch interessieren: