7 einfach umsetzbare Tipps für eine barrierefreie Website

Zuletzt geändert am 13. Januar 2022

Hast du dich schonmal gefragt, wie eine blinde Person Blogartikel liest? Oder wie ein gehörloser Mensch Videos schaut? Barrierefreie Websites machen es möglich! Die Umsetzung beginnt natürlich schon beim Webdesign. Aber auch im redaktionellen Alltag kannst du deine Website oder deinen Blog mit einfachen Mitteln zugänglicher machen. Ich zeige dir 7 Wege, die wirklich jede*r umsetzen kann!

Wie genau Websites barrierefrei zu gestalten sind, regeln die BITV (Barrierefreie-Informationstechnik-Verordnung) und die von der EU verabschiedeten Web Content Accessibility Guidelines (WCAG). Verpflichtend gelten diese bislang nur für Behörden und Verwaltungen. Aber auch Unternehmen müssen ihren Arbeitnehmer*innen beispielsweise ein barrierefreies Intranet zur Verfügung stellen. Nur so erfüllen sie das Allgemeine Gleichbehandlungsgesetz (AGG). Warum auch du eine barrierefreie Website haben solltest? Weil in Deutschland 7,8 Millionen schwerbehinderte Menschen leben – das sind 9,4 % der Bevölkerung! (Stand: 2017, Statistisches Bundesamt) Auf dieses Potenzial an Besucher*innen und Leser*innen willst du doch nicht verzichten, oder?

Los geht’s also mit Tipps, für die du kein ganzes Regelwerk durchzuarbeiten brauchst:

1. Wähle ein barrierefreies WordPress-Theme

Wenn du deine Website zum Beispiel mit WordPress selbst erstellst, kannst du ein barrierefreies Theme verwenden. Klicke einfach im Dashboard unter dem Reiter „Design“ auf „Themes“ und dann auf „Hinzufügen“. Dort kannst du deine Suche „nach Funktion filtern“. Setze einfach ein Häkchen bei „für Barrierefreiheit geeignet“ und dir werden nur Themes angezeigt, die grundsätzlich für Menschen mit Behinderungen zugänglich sind.

Mit einem solchen Theme ist deine Website nicht automatisch barrierefrei. Beachtest du die übrigen Tipps in diesem Artikel nicht und nutzt beispielsweise keine Alternativtexte für deine Bilder, sind deine Inhalte nicht für alle zugänglich. Lässt du deine Website vom Profi erstellen, bitte ihn*sie einfach darum, explizit auf Barrierefreiheit zu achten. Es gibt auch Expert*innen, die sich auf barrierefreies Webdesign spezialisiert haben. Sie können dir besonders gut weiterhelfen.

2. Gestalte deine Texte barrierefrei – mit großer Schrift und klarer Überschriftenstruktur

Eine Website mit barrierefreien Texten – geht das so einfach? Es kommt drauf an. Menschen mit Lernbehinderungen und Verständnisschwierigkeiten profitieren von Texten, die in einfacher oder leichter Sprache geschrieben sind. Aber auch, wenn du diese stark vereinfachte Form der deutschen Sprache nicht beherrschst, kannst du versuchen, so verständlich wie möglich zu schreiben. Verzichte auf Fremdwörter, lange und komplizierte Sätze. Das macht deine Texte für alle leichter und entspannter lesbar.

Auch sehbeeinträchtigte Besucher*innen deiner Website sind auf eine barrierefreie Textgestaltung angewiesen. Nutze eine kontrastreiche Schriftfarbe und eine große Schriftgröße. Das entlastet auch die Augen der vielen kurzsichtigen Leser*innen, zu denen auch ich gehöre. Blinde Menschen bewegen sich oft mit einem Screenreader durch das Internet. Diese Software liest ihnen alle Texte vor. Sie weist auch auf Links oder Bilder hin und gibt die entsprechenden Alternativtexte in Sprache aus. Wie deine Augen kann ein Screenreader einen Text überfliegen – anhand der Überschriften. Die müssen dazu aber auch als Überschriften formatiert sein und nicht einfach als Fettzeile.

Wenn du dich ein bisschen mit HTML auskennst, weißt du, dass es auf einer Website meist eine H1 (Hauptüberschrift) und mehrere Zwischenüberschriften (H2 bis H6) gibt. Im Editor von WordPress und den meisten anderen Editoren heißen sie Überschrift 1, 2 usw. Auf jeder Seite steht genau eine Überschrift 1. Diese kannst du durch H2s untergliedern. Die H2s kannst du wiederum mit H3s weiter unterteilen usw. Dabei solltest du keine Überschrift überspringen oder durch eine Fettzeile ersetzen, nur weil es besser aussieht. Übrigens: Auch Google berücksichtigt die Überschriftenstruktur beim Ranking. Ein weiterer Faktor also für eine barrierefreie Website.

 

3. Alternativtexte machen deine Website barrierefrei und erfreuen Google

Grafiken und Bilder sind für sehbeeinträchtigte Menschen nicht oder nur eingeschränkt sichtbar. Auch Suchmaschinen können den Inhalt von Bildern bislang nicht erfassen. Deshalb brauchen Mensch und Maschine Alternativtexte. Eingeführt wurde das sogenannte Alt-Attribut übrigens, als noch nicht alle Browser Bilder darstellen konnten und die Ladezeiten mitunter ziemlich lang waren. Damals konnte jede*r auf einen Alternativtext angewiesen sein. Und auch heute werden Bilder bei schlechtem Internetempfang (zum Beispiel am Handy) nicht geladen. Stattdessen taucht der Alt-Text auf.

Wie du treffende Alternativtexte schreibst, habe ich dir schon in einem weiteren Blogartikel aufgeschrieben. Dort findest du auch Anleitungen, wie du Alternativtexte im HTML-Code, auf WordPress oder in den sozialen Medien hinterlegst. Das ist denkbar einfach, dauert nur eine zusätzliche Minute und hilft vielen Menschen, deine sorgfältig erstellten oder recherchierten Fotos und Grafiken zu erfassen.

4. Nutze Untertitel in deinen Videos und Storys

Wenn du Videos auf deiner Website hast, solltest du auch diese barrierefrei gestalten. Untertitel helfen Menschen mit eingeschränktem Hörvermögen, deine Videos zu verfolgen. Wenn du bedenkst, dass über 13 Millionen Menschen in Deutschland schwerhörig sind, lohnt sich der Aufwand! Und auch von Untertiteln profitieren alle deine Zuschauer*innen:

• Sprachbarrieren: Menschen, deren Muttersprache nicht Deutsch ist, verstehen Videos mit Untertiteln besser.
• Mobile Nutzung: Immer mehr Menschen schauen Videos zum Beispiel in der Bahn oder im Wartezimmer. Dabei schalten viele den Ton aus oder befinden sich in einer lauten Umgebung. Zudem starten Facebook-Videos oder Instagram-Storys mit Ton oft automatisch. Dank Untertiteln erfahren Nutzer*innen auch in solchen Situationen, worum es geht.
• Aufmerksamkeit: Internetnutzende haben eine immer kürzer werdende Aufmerksamkeitsspanne. Untertitel helfen ihnen, sich besser auf den Inhalt deines Videos zu konzentrieren.
• SEO: Videos mit Untertiteln erzielen ein höheres Engagement und eine längere Verweildauer. Zudem indexiert Google selbst erstellte Untertitel. Untertitel machen dein Video also auch nach Kriterien der Suchmaschinenoptimierung erfolgreicher.

5. Ein Glossar verhilft zu einer barrierefreieren Website – auch ohne leichte Sprache

Wie schon erwähnt, hilft einfache oder leichte Sprache Menschen mit Lernbehinderungen und Verständnisschwierigkeiten sowie Nichtmuttersprachler*innen, Inhalte besser zu verstehen. Du kannst natürlich eine*n Dienstleister*in damit beauftragen, deine Texte in leichte Sprache zu übersetzen. Alternativ bietet es sich an, ein Glossar zu erstellen. Darin führst du alle schwer verständlichen oder Fachbegriffe zu deinem Thema auf. Taucht so ein Begriff auf deiner Website auf, setzt du einfach einen Link zum entsprechenden Glossareintrag. Ich nutze dafür das Plugin Glossary. Damit ist es auch möglich, die Erklärungen beim Hovern über einen Begriff direkt als Sprechblase einzublenden.

6. Stelle deinen Content in verschiedenen Formaten zur Verfügung

Du willst die Inhalte auf deiner Website nicht nur barrierefrei, sondern auch ansprechend gestalten? Dann mach sie doch für verschiedene Sinne zugänglich! Transkribiere deine Videos oder Podcasts und mache Blogartikel daraus. So machst du sie auch für Suchmaschinen indexierbar und sparst dir eine neue Blogidee. Und wem es schwerfällt, Untertitel zu verfolgen, kann deinen Content einfach nachlesen.

Natürlich funktioniert das auch umgekehrt. Vertone deine Texte! So lernen deine Leser*innen auch mal deine Stimme kennen. Und die hört sich mit Sicherheit etwas schöner an als die Maschinenstimme des Screenreaders. 😉 Auch verständlicher wird manch komplexes Thema, wenn du es in eigenen Worten erklärst oder mit einem Video und animierten Grafiken vereinfachst.

7. Bonus-Tipp: So gestaltest du deine Social-Media-Kanäle barrierefrei

Eine barrierefreie Website ist schön und gut. Viel Kommunikation und Marketing spielen sich aber auch in den sozialen Medien ab. Deshalb verrate ich dir als kleinen Bonus noch ein paar Tipps für deine Social-Media-Kanäle:

• Alternativtexte: Vor allem auf Instagram und Pinterest, aber auch auf Facebook, Twitter oder LinkedIn postest du regelmäßig Bilder. Auch die benötigen natürlich Alternativtexte. Denn selbst bildlastige Netzwerke dienen vor allem der Kommunikation und dem Austausch mit Freund*innen und anderen Nutzer*innen. Aber viele wissen gar nicht, dass und wie sie ihren Bildern Alternativtexte hinzufügen können. Anleitungen findest du im Alternativtexte-Blogartikel.
• Untertitel: Storys, Facebook-Videos, YouTube-Clips – Video-Content ist aus den sozialen Medien nicht wegzudenken. Deshalb solltest du immer Untertitel verwenden. Ein hilfreiches Tool für Instagram ist die iOS-App Clipomatic, die aus deinem Sprechen automatisch Untertitel macht.
• Zusammenfassungen: Bei Storys oder Carousel-Postings mit textlastigen Schriftgrafiken ist es manchmal wirklich nervig, ausführliche Untertitel und Alternativtexte zu verfassen. Damit deine Follower*innen mit Sinnesbeeinträchtigung trotzdem wissen, worum es geht, schreibst du einfach eine kleine Zusammenfassung deines Posts. Die kannst du als separate Story hochladen oder in die Bildbeschreibung einfügen.

Na, kanntest du einige meiner Tipps schon? Oder fallen dir noch weitere ein?  Schau dir gerne auch meine allgemeinen Tipps für eine Vielfalt wertschätzend gestaltete Website an. Teile diesen Artikel jetzt mit deinem Netzwerk, wenn du glaubst, dass wir mehr barrierefreie Websites brauchen!