Barrierefreies Webdesign - Chance für alle Websites

Handelt es sich bei barrierefreiem Webdesign lediglich um Vorschriften, die technisch erfüllt werden müssen? Wer genauer hinschaut erkennt, barrierefreies Webdesign eröffnet viele Chancen und Möglichkeiten, im Internet erfolgreicher zu sein - und zwar für jeden Betreiber und jede Website.

• Mehr Kunden erreichen
  Mit einer barrierefrei gestalteten Website, erreichen Sie eine breitere Zielgruppe und damit mehr potentielle Kunden. Digitale Barrierefreiheit ist eine wichtigste Grundlage, um im Internet erfolgreich zu kommunizieren.
• Zufriedenere Kunden
  Die Benutzerfreundlichkeit ist ein entscheidender Faktor für den Erfolg von Webseiten. Eine gute Bedienbarkeit und Nutzerführung macht Ihre Inhalte zugänglich für alle und steigert die Zufriedenheit der Nutzer Ihrer Web-Angebote.
• Reichweite erhöhen
  Google & Co. bevorzugen Barrierefreiheit im Web: Bei Suchmaschinen wird Ihre Webseite leichter gefunden, wenn diese nutzerfreundlich und für alle zugänglich gestaltet ist.
• Image verbessern
  Gesetzliche Anforderungen an die Zugänglichkeit von Websites werden immer komplexer.
  
  Da Barrierefreiheit ein immer wichtigeres gesellschaftliches Thema wird, verbessert eine Beachtung der Zielgruppen und Grundsätze insgesamt auch Ihr Image. Zeigen Sie, wie erfolgreich Sie damit sind!
• Digitale Teilhabe
  Mit Ihrer barrierefreien Webseite zeigen Sie soziale Verantwortung. Durch digitale Teilhabe erreichen Sie mit Ihren Inhalten alle Menschen, egal ob mit und ohne Behinderung!

Wie ist es um die Barrierefreiheit Ihrer Website bestellt? Einen ersten Einblick erhalten Sie über die 6 folgenden Punkte.

Der menschliche Körper ist gut sortiert angelegt. Die Hände dienen dazu, um die nahe Umwelt zu steuern bzw. manipulieren. Die Sinne für die Wahrnehmung wie Sehen und Hören befinden sich im Kopf.

Das sind auch genau die Werkzeuge, die wir als Menschen für das Surfen im Internet brauchen. Die Webseite wird über den Gesichtssinn wahrgenommen. Video und Podcast zusätzlich über das Hören. Mit den Händen geben wir über die Tastatur und die Maus Befehle ein – beim Smartphone und Tablet direkt mit den Fingern auf dem Monitor.

Mit dem Smartphone und Tablet sind wir auch schon beim ersten Beispiel für Barrierefreiheit. Beide dieser Endgeräte haben keine körperliche Tastatur oder Maus. Die Tastatur wird über eine Anzeige auf dem Monitor simuliert. Dazu wird der Monitor zusätzlich für die Berührung der Fingerspitzen empfindlich gemacht - eine assistive Technologie, die über diese Endgeräte verbreitet wurde.

Bleiben wir einen Moment beim Smartphone. Das Smartphone hat einen deutlich kleineren Bildschirm als ein Laptop. So kann man es in die Hosentasche stecken und bequem bei sich tragen. Wie passt aber die große Webseite auf das Handy?

Tatsächlich erstellt der Webdesigner keine weiteren Webseiten, sondern passt des Designs der Webseite so an, dass dieses für die Nutzung auf mobilen Endgeräten optimiert ist. Dabei werden gern pfiffige Ideen umgesetzt. Wenn man z.B. das Menü nicht benötigt, macht es sich von alleine klein, wenn man es braucht, kann man es ausklappen. So wird der kleine Monitor des Smartphones besser genutzt und mehr Platz für die Präsentation wichtiger Inhalte frei.

Das ist ein Beispiele, wie durch erfindungsreiches Webdesign die Hürden einer fehlenden Tastatur und eines kleinen Monitors überwunden werden. Barrierefreies Webdesign befindet sich bereits in unserem Alltag. Wir setzen es jeden Tag ein, ohne es zu bemerken.

Bei Barrierefreiheit denkt man automatisch auch an behindertengerecht. Die Barrierefreiheit ist ein Begriff, der behindertengerecht mit einschließt – und darüber hinausgeht.

Telefonfunktionen oder Navigationsysteme beim Autofahren lassen sich steuern, ohne das Telefon oder Display berühren zu müssen. So wird der Fahrer weniger abgelenkt. Die Barriere ist die Situation beim Autofahren. Die Barriere wird versucht mit einer Sprachsteuerung zu umgehen.

Ein anderes Beispiel, wie assistive (unterstützende) Technik in den Alltag Einzug hält, sind Siri und Alexa. Diese sprachgesteuerten künstlichen Intelligenzen von Apple und Amazon bedeuten Komfort. Suchanfragen werden komplexer und lassen sich schneller aussprechen als schreiben. Die SEO-Spezialisten nennen diese längeren Suchanfragen Long Tail Keywords. Sie haben bereits eine eigene Bedeutung im Bereich der Suchmaschinenoptimierung. Mit Siri und Alexa braucht eine Suchanfrage mit mehreren Begriffen nicht umständlich über eine Tastatur eingegeben zu werden; die Suchanfrage wird einfach in einem Satz ausgesprochen.

Unter User Experience versteht man die Erfahrung, die ein Besucher beim Surfen innerhalb eines Webauftrittes macht. Dazu zählt z.B. Übersichtlichkeit, die gute Lesbarkeit der Webseite, funktionelle Bedienbarkeit, Mehrwert des Inhaltes und wie schnell der Besucher zum Ziel kommt.

Mit guter Lesbarkeit und Bedienung sind wir direkt beim Thema Barrierefreiheit. Wenn der Besucher einer Webseite eine angenehme Erfahrung macht, wird er sich dort länger aufhalten. Dadurch wird das Ziel der Webseite unterstützt. Zusätzlich fließen die User Experience und Verweildauer auf einer Webseite in die Bewertung für die Suchmaschine ein. Die Barrierefreiheit nutzt demnach auch dem Webseiten-Betreiber.

Wahrnehmbarkeit

Für Personen mit eingeschränktem oder fehlendem Gesichtssinn können Texte maschinell vorgelesen werden. Dazu müssen die Texte z.B. bei Bildern aber zuerst hinterlegt werden. Die technische Bezeichnung für einen solchen Text ist der sogenannte „ALT Text“. Dieser alternative Text beschreibt sachlich den Inhalt des Bildes.

Tipp: In der Praxis zeigt sich, dass aussagefähige beschreibende Texte zu den Bildern oft fehlen. Hier kann mit relativ kleinem Aufwand ein großer Mehrwert geschaffen werden. Nur: jemand muss sich auch darum kümmern. Manchmal übernimmt diese Aufgabe der Texter der Webagentur.
Überlassen Sie diese Aufgabe nicht dem Zufall. Bestimmen Sie eine klare Zuordnung dieser Aufgabe oder sprechen Sie sich hierzu mit Ihrer Webagentur ab. Gern sind wir Ihnen hierbei behilflich.

Die Erstellung einer ALT Bildbeschreibung diszipliniert auch hinsichtlich der Bildauswahl. Bilder sollen für den Webseitebesucher einen Mehrwert bieten. Die Aufmerksamkeit des Besuchers ist begrenzt. Da müssen Sie ihm schon etwas bieten, das ihn interessiert.

Kontrast

Ein immer wieder "gern" gemachter Fehler beim Webdesign...

Haben Sie sich einmal in einem leeren Raum befunden, wo die Wände und der Fußboden ebenfalls weiß sind? Dies verunsichert. Man hat gelernt, die Wände sind hell und der Fußboden dunkler. Ein Kontrast.

Menschen mussten im Laufe der Evolution die Umrisse eines Raubtieres oder eines Feindes vor dem hellen Himmel erkennen, um schnell darauf zu reagieren und zu überleben. Ein weiterer Kontrast.

Starke Kontraste werden besser wahrgenommen als eine Darstellung, wo der Kontrast nicht so ausgeprägt ist. Die am besten ablesbaren Armbanduhren haben weiße Zeiger und schwarze Ziffernblätter. - Das Bild des Fernsehers ist flau? Man verstärkt den Kontrast.

Bei einem soliden Webdesign wird eine kontrastreiche Darstellung automatisch berücksichtigt.

Tipp: Falls eine Bildbeschreibung nicht unter dem Bild erscheint, sondern in ein Bild eingefügt wird: Weiße oder schwarze Schrift wird schnell unlesbar, wenn das Bild der Schriftfarbe ähnelt oder bestimmte Muster hat. Wie kann man diesen Fehler vermeiden? In einer kleinen Webagentur oder bei Freelancern liegen Bildauswahl und die Platzierung der Schrift meist in einer Hand. Dadurch sollte das eigentlich nicht vorkommen.

Größe

Die Bildschirme von Laptops sind im Vergleich zu einem Monitor deutlich kleiner. Schrift und Schriftgröße sollten so gewählt werden, dass sie dort noch prima lesbar sind. Entsprechendes gilt für Thumbnails (stark verkleinerte Vorschaubilder).

Tipp: Ein Webdesign mit aufgeräumter Darstellung lädt eher zum Surfen ein als ein überfüllter Bildschirm oder tief verschachteltes Menü. Auch wenn Sie ein breit gefächertes Angebot an Produkten oder Dienstleistungen haben, lässt sich das über eine geschickt gewählte Struktur attraktiv darstellen. Die Struktur einer Webseite sollte wenn möglich immer aus Sicht des Kundennutzens erstellt werden.

Bedienbarkeit

Bislang funktioniert die Bedienung über Tastendrücken, Maussteuerung, Gesten (Daumenwischen) oder Sprachsteuerung. Man darf gespannt sein, ob Webseiten in naher Zukunft auf Gesichtsausdrücke oder Blickrichtungen reagieren. Bislang ist die Bedienbarkeit noch auf die vier oben genannten Möglichkeiten beschränkt. Ist eine Bedienung z.B. über Tasten nicht möglich, weicht man auf eine der anderen Möglichkeiten aus - wie die Sprachsteuerung.

Verständlichkeit

Die Webseite sollte den Besuchern keine Rätsel aufgeben. Die Besucher kommen mit einer bestimmten Absicht. Sie möchten eine Information erhalten oder ein Produkt ordern. Dieses Ziel soll direkt erreichbar sein. Das beginnt mit der Struktur und der Navigation der Webseite. Die Bezeichnung der Menüpunkte muss selbsterklärend sein. Das Angebot der Webseite soll schnell und ohne Aufwand erkennbar sein.

Halten Sie die Sätze kurz und die Formulierungen verständlich. Was Sie sagen, sollte für den Leser einen Mehrwert haben. Setzen Sie auf Information anstatt auf Werbung.

Stabilität

Verschieben sich ungewollt Textblöcke oder Bildelemente, wenn die Webseite geladen wird oder man etwas auf der Webseite anklickt oder diese durchscrollt? Das widerspricht dem Gedanken eines robusten Webdesigns. Solche ungewollten Verschiebungen irritieren und lenken unnötig vom Inhalt der Webseite ab.

Wie erreicht man ein stabiles Webdesign? Langjährige Webdesigner haben sich bereits einen Werkzeugkasten mit Tools angelegt, von denen sie wissen, dass sie funktionieren und miteinander harmonieren.

Die Stabilität einer Webseite ist, wie auch die Ladezeit und Reaktionszeit, seit Juni 2021 Bestandteil des Google Updates Core Web Vitals.

Die Augen werden mit dem Alter schwächer. Bei der Weitsichtigkeit ist kleine Schrift schlecht erkennbar. Bei Farbsehschwäche können bestimmte Farben nicht unterschieden werden. Je schlechter die Augen funktionieren und je schwieriger die Lichtverhältnisse sind, desto wichtiger wird ein barrierefreies Webdesign, das den Kontrast und eine großzügige Darstellung berücksichtigt.

Personen, bei denen der Gesichtssinn sehr stark eingeschränkt ist, profitieren von einer Vorlesefunktion.

Unbekannte Fremdsprachen bilden die gleiche Barriere wie ein schlechter oder fehlender Gehörsinn. Hier helfen eingeblendete Untertitel.

Bei einer eingeschränkten oder unzuverlässigen Motorik gibt es die Möglichkeit, auf Bedienalternativen wie Sprachbefehle auszuweichen.

Komplexe Sachverhalte bilden ein Hindernis. Trotzdem lassen sich die Inhalte Schritt für Schritt in kleinen Sätzen erklären. Wenn man dabei den Nutzen für den Leser mit berücksichtigt, bleibt die Aufmerksamkeit länger erhalten.

Tipp: Falls Sie den Eindruck haben, dass wichtige Inhalte auf Ihrer Webseite nicht hinreichend beachtet werden, sprechen Sie uns bitte an. Wir geben Ihnen Ideen mit, wie sich die Inhalte spannender aufbereiten lassen. Manche Personen haben Vorlieben für Texte, andere für Bilder oder grafische Darstellungen.

Von einem weltweiten Entwicklerverbund, der Web Accessibility Initiative (Abkürzung: WAI), werden Normen für ein barrierefreies Webdesign erarbeitet. Diese Normen haben noch keine rechtliche Verbindlichkeit. Sie dienen als Empfehlung. Die jeweiligen Staaten nehmen diese Empfehlung als Grundlage, um Gesetze für das barrierefreie Webdesign zu erlassen.

Die Empfehlungen der Entwickler sind unter dem Kürzel WCAG bekannt. Entscheidend ist aber das Gesetz des jeweiligen Landes. Für Deutschland gilt das BITV 2.0 vom 25. Mai 2019.

Nach dem BITV 2.0 ist die Barrierefreiheit in verschiedenen Levels möglich. Der einfachste Level ist der Basis-Level A. Hier sind bereits die wichtigsten Kriterien der Barrierefreiheit umgesetzt. Allerdings bleibt immer noch mindestens eine Nutzergruppe unberücksichtigt.

Beim mittleren Level AA sind weitere Anforderungen umgesetzt, allerdings noch nicht alle.

Vorbildlich berücksichtigt wird die BITV 2.0 im höchsten Level AAA.

Tipp: Das richtige Ausmaß an Barrierefreiheit sollte für jeden Webauftritt individuell bestimmt werden. Entscheidend für Ihren Webauftritt ist, welches Ziel Sie damit verfolgen. Falls das Ziel durch eine Barriere eingeschränkt oder verhindert wird, erscheint ein Handeln angesagt.

Der höchste Level AAA lässt sich nicht immer erreichen. Manche Anforderungen lassen sich nicht auf bestimmte Inhaltsformen anwenden.

Per Behindertengleichstellungsgesetz BGG § 12d werden öffentliche Stellen des Bundes verpflichtet, die Barrierefreiheit zu berücksichtigen.

Die Vorgaben sind unterschiedlich, je nachdem, ob es sich eine Institution des Bundes oder des Landes handelt. Beim Bundesland kommt es zusätzlich auf das jeweilige Bundesland an. Als in Dresden ansässige Webagentur sind wir fit, was die Umsetzung im Land Sachsen angeht.

Details können Sie nachlesen unter REVOSax Barrierefreie-Websites-Gesetz oder sich individuell für Ihre Webseite von uns beraten lassen. Beim oben genannten Barrierefreien-Websites-Gesetz finden Sie unter § 6 auch Hinweise auf die Umsetzungsfristen.

Gesetz zur Umsetzung der Richtlinie (EU) 2016/2102
über den barrierefreien Zugang zu den Webseites und mobilen Anwendungen öffentlicher Stellen
(Barrierefreie-Websites-Gesetz – BfWebG) vom 10. April 2019

Kurz erwähnt sei an dieser Stelle der European Accessibility Act. Hiermit soll der Handel von barrierefreien Produkten zwischen EU-Mitgliedsländern unterstützt werden.

Für die nahe Zukunft ist ein Einfließen des Gedankens der Barrierefreiheit in weitere Bereiche des öffentlichen Lebens wahrscheinlich. Vermutlich geschieht dies bei Produkten und Dienstleisten in einer schrittweisen Umsetzung. Von daher macht es Sinn, sich bereits mit dem Thema Barrierefreiheit auseinanderzusetzen, Kompetenz aufzubauen und die Zuständigkeit innerhalb des Unternehmens geklärt zu haben.

Oben haben wir die Standards WCAG und BITV angesprochen. Diese entscheidenden Standards berücksichtigen wir bereits bei der Konzeption, wenn wir eine barrierefreie Webseite erstellen.

Falls Sie eine bestehende Webseite haben, können wir Ihren kompletten Webaufritt oder auch einzelne Seiten komfortabel von unserem Büro aus testen.

Barrierefreiheit hat viele Aspekte: Man muss sich in die verschiedenen Vorschriften einlesen. Dann überlegt man, wie man die Barrierefreiheit auf der eigenen Webseite realisiert. Wie bekommt man das technisch hin, welche Kompromisse muss eingegangen werden und wie setzt man dabei das begrenzte Budget möglichst effizient ein?

Weiterführende Informationen: Barrierefreiheit unter dem Marketing-Blickwinkel

Das barrierefreie Webprojekt wird durchsichtiger, wenn man es in einzelne Schritte aufteilt. Holen Sie FIZ soft, die Webagentur aus Dresden, mit hinzu. Wir bringen die Erfahrung zu barrierefreien Webseiten mit. Gemeinsam mit Ihnen prüfen wir Fördermöglichkeiten und bauen wir Ihre barrierefreie Webseite auf.

Dazu nehmen wir gern Ihre entscheidenden Kollegen mit ins Boot: In einer Schulung vermitteln wir die notwendigen Einblicke in die Barrierefreiheit. Das ist für die Teilnehmer angenehmer und effektiver, als wenn sich jeder Kollege das Wissen selbst aneignet. Mit einer Schulung oder einem Workshop haben alle die gleiche Wissensbasis, man hat das gleiche Vokabular und kann gut zusammenarbeiten.

Nicht jeder Webauftritt muss vollständig barrierefrei sein. Holen Sie sich einen Partner hinzu, der Sie berät und Ihnen Maßnahmen und Kosten transparent darstellt.

Gewichten Sie den Nutzen, den Sie aus der Barrierefreiheit gewinnen und vergleichen Sie, wieviel monetären Aufwand die Umsetzung für Sie bedeutet.

• Barrierefreie-Websites-Gesetz (BfWebG): gültig für Sachsen
• Barrierefreie-Informationstechnik-Verordnung (BITV 2.0): gültig für Bundeseinrichtungen; das BfWebG verweist teilweise auf BITV 2.0
• EU-Richtlinie 2016/2102: Grundlage der deutschen und sächsischen Gesetzgebung für Webseiten und Apps
• EU-Durchführungsbeschluss 2018/1523: Details der Erklärung zur Barrierefreiheit inklusive Muster
• EU-Durchführungsbeschluss 2018/2048: Festlegung der Norm EN 301 549 in Version 2.1.2 als verpflichtend.
  Hinweis: Demnächst wird die EU die Version 3.1.1 der Norm als verbindlich erklären, weshalb diese Version bereits weiter oben genannt ist.