Das Thema digitale Barrierefreiheit und barrierefreie Webseiten ist ein wichtiges Thema, das aus der vermeintlichen Nische der Menschen mit Behinderung rauswachsen muss. Im folgenden Beitrag möchte ich Ihnen einige Punkte vorstellen, auf die Sie achten sollten, wenn Sie barrierefreie Webseiten mit WordPress erstellen möchten.

Warum ist das Thema wichtig?

Stellen Sie sich das Ganze bitte wie eine umgedrehte Pyramide vor: Wir chatten via Facebook oder Whatsapp und informieren uns ganz selbstverständlich im Netz über Gesetzesänderungen, aktuelle Nachrichten oder Kochrezepte.

Wir, die wir das Netz seit Jahren kennen und digitale Kommunikation täglich nutzen, möchten dies sicherlich auch im Alter nicht missen. Wenn wir später einmal schlechter sehen oder hören oder vielleicht andere Beeinträchtigungen haben, wollen wir weiterhin digital kommunizieren und uns informieren. Der Bedarf an barrierefreier Kommunikation und allgemein digitaler Barrierefreiheit steigt also jährlich an.

Unabhängig davon bin ich der Meinung, dass wir digitale Barrierefreiheit einfach erst nehmen sollten. Nicht, egoistisch, weil wir müssen, sondern einfach, weil wir es können.

Kurze digitale Geschichte

Digitale Barrierefreiheit ist keine neue Idee. Die technischen Voraussetzungen und Möglichkeiten sind schon seit vielen Jahren gegeben. Barrierefreiheit ist seit 2002 sogar in BITV für Bundesbehörden und öffentliche Einrichtungen verankert.

Damit im Internet, zumindest auf der Code-Ebene, einigermaßen einheitliche Strukturen gelten, wurde bereits 1994 das W3C, das Word Wide Web Consortium, gegründet. In diesem Konsortium sind Standards wie HTML und CSS festgelegt.

Ein wichtiger Teilbereich des W3C ist die WAI, die Web Accessibility Initiative. In der WAI wiederum werden die WCAG festgelegt, die Web Content Accessibility Guidelines. In diesen WCAG ist festgelegt, welche Anforderungen eine Webseite heutzutage erfüllen sollte, um barrierefrei zu sein.

Sie möchten mehr erfahren?

WCAG

Bei den WCAG Guidelines gibt es mittlerweile zwei Versionen. Hier einige Punkte die in den WCAG verankert sind.

abbildung-web-content-accessibility-guidelines

WCAG 1.0

  • Markup und CSS verwenden
  • Geräteunabhängiges Design (Responsive Designs)
  • W3C Richtlinien einhalten
  • Klare Navigation

WCAG 2.0
Webseiten sollen:

  • wahrnehmbar sein (z.B. durch Textalternativen bei Grafiken)
  • bedienbar sein (z.B. mittels Tastatur oder Screenreader bedienbar)
  • verständlich sein (z.B. durch einfache Sprache oder vorhersehbare Navigation)
  • robust sein (kompatibel)

Das Zwei-Sinne-Prinzip

Bieten Sie auf Ihrer Internetpräsenz bei Ihren Inhalten immer Alternativen für zwei verschiedene Sinne an:

  • versehen Sie Videos mit beschreibenden Untertiteln
  • fügen Sie Bildern und Grafiken Bildbeschreibungen hinzu
  • formulieren Sie Texte gut und strukturieren Sie diese mit (Zwischen)Überschriften

Inhalt und Design trennen

Trennen Sie den Inhalt vom Design. So können Sie z.B. mit verschiedenen CSS Varianten arbeiten und alternative Kontraste anbieten. WordPress macht das i.d.R. automatisch. So können Sie z.B. auch Ihr Template wechseln, ohne den Inhalt ändern zu müssen.

Verwenden Sie für eine barrierefreie Webseite möglichst hohe Kontraste für bessere Sichtbarkeit oder bieten Sie alternative Kontraste an.

Für WordPress gibt es auch Plug-Ins, sodass Ihre Besucher die Themes direkt selbst ändern können. Leider gibt es hier meines Wissens nach noch keine perfekte Lösung, sprechen Sie daher in diesem Fall mit einem Webdesigner oder setzen Sie gleich auf hohe Kontraste, so muss gar keine Alternative angeboten werden müssen.

Ein interessantes WordPress-Plug-In, das ich allerdings selbst noch nicht getest habe, ist MDC Theme Switcher.

abbildung_mdc-theme-switcher

Weitere Informationen zu MDC Theme Switcher

Metadaten verwenden

Verwenden Sie Metadaten, denn sogenannte Screenreader lesen blinden oder sehbehinderten Besuchern Ihrer Webseite Texte vor. Wenn Sie Ihre Texte mit Metadaten versehen, können die Screenreader problemlos dazu genutzt werden, um durch Text und Webseite zu navigieren. Der Editor in WordPress ist hier eine große Hilfe und bietet viele Möglichkeiten, Metadaten zu verwenden.

Hier die wichtigsten Punkte:

  • definieren Sie Überschriften als “Überschrift”, anstatt sie nur “fett” zu formatieren
  • strukturieren Sie Texte und anordnen Sie diese logisch, z.B. mittels H1…H2…H3 etc.
  • definieren Sie Bilder als “Bild” und denken Sie immer auch an Bildbeschreibungen

Verständlichkeit

Klingt eigentlich logisch, wird aber oft nicht eingesetzt. Verwenden Sie eine einfache und verständliche Sprache. Lieber kurze Sätze als lange verschachtelte Satzketten.

Konkrete Umsetzung

Wie sieht dies nun in der konkreten Umsetzung aus? Um Webseiten wirklich zu 100% barrierefrei zu bekommen, ist tatsächlich sehr viel Aufwand und individuelle Beratung nötig. Aber eine Webseite barrierearm zu gestalten ist mit wenigen Handgriffen und einfachen Regeln auch ohne viel Aufwand machbar. Gerade WordPress bietet hier von Haus aus schon viele Möglichkeiten:

  • Durch den Editor im „Beitrag erstellen“ und „Seiten erstellen“ Bereich können Sie z.B. Überschriften als Überschriften definieren, ähnlich wie bei einem Texteditor.
  • In der Mediathek oder direkt beim Einfügen eines Bildes in einen Beitrag oder eine Seite können Sie sowohl Alternativ-Text als auch Bildbeschreibungen hinzufügen.
  • Videos sollten sowieso z.B. via Youtube eingebettet werden. Youtube bietet hier eine Möglichkeit zur Untertitelung von Videos an. Dies ist in deutscher Sprache zugegeben noch nicht perfekt, aber ich denke, dass hier in den nächsten Jahren noch einiges passieren wird.

Tipps für eine barrierefreie Webseite

  • Wenn Sie als Unternehmen Ihre Webseite barrierefrei gestalten möchten, sprechen Sie mit Ihrem Webdesigner.
  • Lassen Sie Ihre Webseite von Endanwendern testen. Der Blinden- und Sehbehindertenverband stellt hier gerne auch Kontakte her und bietet auch selbst Prüfungen an.
  • Testen Sie Ihre Webseite auch selbst hinsichtlich einer barrierefreien Bedienung, in dem Sie z.B. Screenreader-Software wie NVDA installieren und Ihre Webseite mit ausgeschaltetem Monitor besuchen. Haben Sie wirklich eine barrierefreie Webseite erstellt? Probieren Sie es aus: diese Erfahrung ist durchaus interessant.

Linktipps

Es gibt im Netz viele weiterführende Informationen und Tools, um die eigene Webseite auf Zugänglichkeit hin zu überprüfen. Hier ein paar davon:

Übersicht über geprüfte und barrierefreie Webseiten:

  • Liste 90plus

Weiterführende Informationen zur Erstellung einer barrierefreien Webseite finden Sie auch auf folgenden Seiten:

Screenreader Software

Prüftools

Blinden und Sehbehindertenverband

  • Deutscher Blinden- und Sehbehindertenverband e.V. (DBSV)

Sie haben Anregungen oder Fragen zum Thema: „barrierefreie Webseite“? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.

Fotografie: Juri Gottschall

Johannes Mairhofer
Letzte Artikel von Johannes Mairhofer (Alle anzeigen)

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten