Zurück zum Blog
Datum
  • Okt. 20, 2020
  • --
Autor
Kategorie Business
Themen
Teilen
Hände gestalten perfektes UX-Design auf Papier
Barrierefreie Websites: Kleine Optimierungen mit großer Wirkung

Barrierefreie Websites: Kleine Optimierungen mit großer Wirkung

Was haben U-Bahnhöfe mit Websites gemeinsam? Sie sollten beide barrierefrei, also für jedermann leicht zugänglich sein. Jeder weiß, wie wichtig Barrierefreiheit im öffentlichen Raum ist. Bei digitalen Angeboten fristet das Thema nach wie vor ein Schattendasein.

Die Standards für Barrierefreiheit umfassen eine lange Liste an kleinteiligen Vorgaben. Sie scheinen kompliziert, der Nutzen begrenzt. Ist das so? Warum gehört Barrierefreiheit unbedingt zur digitalen Customer Experience? Wie können Sie Ihre Webseite optimieren, ohne aufwendige Extraarbeiten und Tests?

Warum sollte IHRE Website barrierefrei sein?

Seit September 2020 müssen alle Websites von öffentlichen Stellen des Bundes barrierefrei sein, laut Behindertengleichstellungsgesetz (BGG). Das trifft wahrscheinlich nicht auf Ihr Unternehmen zu. Also alles gut – das muss Sie nicht interessieren?

Laut European Statistical Office (Eurostat) gab 2015 jede vierte Person in der EU an, dass sie bei alltäglichen Aktivitäten von gesundheitsbedingten, andauernden Einschränkungen betroffen sei. Diese Menschen befinden sich unter Ihren Zielgruppen. Wollen Sie es einem Viertel Ihrer Zielgruppen extra schwer machen, Ihre Website zu benutzen – und Ihr Kunde zu werden?

Darüber hinaus profitieren alle Nutzer, wenn Ihre Website gut gestaltet und leicht bedienbar ist. Ihre Navigation ist unübersichtlich? Schriften sind schwer leserlich? Buttons sind so klein, dass man sie auf einem Smartphone kaum mit dem Finger trifft? Die meisten Website-Besucher werden entnervt aufgeben und schnell wieder weg sein.

Die vier Prinzipien der Barrierefreiheit sind wichtige Faktoren einer guten, digitalen Customer Experience. Sie werden sich positiv auf die Ihr Google-Ranking, auf Kundenzufriedenheit und Conversion Rate auswirken – und damit auf den finanziellen Erfolg Ihrer digitalen Kanäle.

Was bedeutet Barrierefreiheit für Websites?

Barrierefreiheit (“Accessibility”) bedeutet, dass Einrichtungen oder Angebote von allen Menschen leicht genutzt werden können; auch von Menschen mit dauerhaften körperlichen, seelischen, kognitiven oder Sinnesbeeinträchtigungen.

Websites müssen dafür vier Prinzipien erfüllen:

  • Die Inhalte müssen für alle Nutzer wahrnehmbar sein – sichtbar, hörbar oder lesbar. 

  • Alle Bestandteile der Webseite müssen einfach bedienbar sein.

  • Texte (und alle Inhalte allgemein) müssen leicht verständlich sein.

  • Die Website muss robust sein: das heißt, sie muss mit möglichst allen Geräten und mit allen Browsern zuverlässig genutzt werden können (auch mit Hilfsmitteln für zum Beispiel Sehgeschädigte)

Was heißt das im Einzelnen? Beispiele sind:

  • Der Farbkontrast zwischen Schrift und Hintergrund darf nicht zu niedrig sein.

  • Web-Formulare müssen mit der Tastatur nutzbar sein (ohne Verwendung der Maus).

  • Sie müssen Videos mit Untertitel versehen und/oder eine Mitschrift (Transkript) des Textes anbieten.

  • Die Navigation durch die Website muss übersichtlich und auf allen Geräten nutzbar sein, zum Beispiel durch ein responsives Menü.

In den Web Content Accessibility Guidelines (WCAG) 2.0 werden die Anforderungen an barrierefreie Websites ausführlich erklärt.

Wie vermeiden Sie aufwendige Barrierefreiheit-Checks?

Es gibt nicht den einen großen Hebel, um Ihre Website barrierefrei zu gestalten. Sie müssen viele kleine Dinge beachten: beim Navigationskonzept, beim Layout und Design – und bei den Elementen und Inhalten für jede einzelne Ansicht Ihrer digitalen Kanäle. Sie müssen Alt-Texte für jedes Bild pflegen oder Texte sprachlich überarbeiten, damit sie für jedermann und jedefrau einfach verständlich sind.

Solche Kleinigkeiten sind leicht zu übersehen. Auf großen Websites summieren sich locker unzählige Fehler – und zerstören die User Experience. Diese ganzen Fehler manuell zu finden und zu beheben ist extrem aufwendig, wenn nicht unmöglich.

Sie können Ihre Website von Nutzergruppen mit verschiedenen Beeinträchtigungen testen lassen, auf verschiedenen Geräten und in verschiedenen Szenarien. Das Feedback spielen sie zurück an die Designer und Content-Autoren. Diese nehmen die Anpassungen vor, die sie wieder testen lassen. Viele Fehler bleiben unentdeckt und würden erst auffallen, weil sich zum Beispiel Kunden beschweren – die teuerste aller “Testmethoden”.

Je später Fehler entdeckt werden, desto mehr Kosten und Aufwand sind nötig, um sie zu beheben. Fehler, die sehr spät entdeckt werden, verursachen überproportional hohe Kosten, wie diese Grafik zeigt,

Am günstigsten ist, wenn Sie Fehler oder Schwachstellen bei der Barrierefreiheit möglichst früh identifizieren: bereits während ihre Designer und Content-Autoren die Webseiten erstellen. Wie erwähnt, manuell ist das kaum möglich. Designer und Marketer sollen sich darauf konzentrieren, großartige Customer Experiences zu schaffen – und nicht Tage damit verbringen, Fehler zu suchen.

Fehler bereits bei der Content-Erstellung finden und beheben

Wenn Sie Magnolia CMS nutzen, gibt es eine simple, effiziente Lösung für dieses Problem: das Siteimprove CMS Plugin. Damit nutzen Sie den Siteimprove Accessibility Checker direkt in der Autoren-Ansicht von Magnolia. Er prüft, ob eine Seite die strengen Standards der WCAG erfüllt und zeigt Ihnen Fehler an.

Das funktioniert so:

Wenn Sie eine Seite in Magnolia öffnen, sehen Sie in einem Widget eine Zusammenfassung des Accessibility Checks.

Der Digital Certainty Index Score (DCI) zeigt Ihnen durch eine Skala von 0 bis 10 an, wie gut Ihre Seite insgesamt optimiert ist. Neben der Barrierefreiheit (Accessibility) berücksichtigt Siteimprove weitere Faktoren wie SEO, Datenschutz und Ladezeiten. Auf einen Blick sehen sie die Anzahl toter Links, Schreibfehler und weitere kleinere und größere Fehler.

Durch einen Klick auf einen der Bereiche listet Siteimprove alle gefundenen Fehler im Detail auf; zum Beispiel fehlende Alt-Texte für Bilder oder Elemente mit zu geringem Farbkontrast.

Klicken Sie einen Fehler an, markiert Siteimprove das Element in der Seite, das den Fehler enthält – Sie müssen nicht danach suchen. Außerdem können Sie den HTML-Code des jeweiligen Elements ansehen und bearbeiten.

Nachdem Sie die Fehler behoben und die Seite aktualisiert haben, testet Siteimprove erneut. Sie sehen sofort, ob Sie alles erledigt haben oder nacharbeiten müssen. Durch diese Funktion sparen Sie als Autor enorm Zeit. Sie können den Aufwand für weiteres Testing reduzieren. Bereits bestehende, nicht barrierefreie Inhalte optimieren Sie ebenfalls viel schneller: Sie brauchen nicht jede einzelne Seite zu durchsuchen. Der DCI Score zeigt Ihnen, wo die größten Schwachstellen sind, auf die Sie sich konzentrieren sollten.

Kleine Optimierungen mit großer Wirkung

Barrierefreiheit ist kein Nischenthema und kein Nice-to-have. Wenn Sie den Begriff Customer Experience ernst nehmen, müssen Sie Ihre Nutzer und deren Bedürfnisse in den Mittelpunkt stellen – auch solche mit Einschränkungen. Mit dem richtigen Tool wird Barrierefreiheit ein ganz normaler Bestandteil Ihres Content-Prozesses. Schon mit kleinen Verbesserungen erzielen Sie große Wirkung: für alle Ihre Nutzer und Kunden und für den wirtschaftlichen Erfolg Ihrer digitalen Angebote.

Mit Magnolia und Siteimprove zur optimierten User Experience

Lassen Sie sich in einer persönlichen Demo zeigen, wie einfach der Siteimprove Accessibility Check in Magnolia CMS funktioniert.

Über den Autor

Dominik Dühning Head of Strategic Accounts EMEA bei Magnolia

Mehr erfahren