Barrierefreiheit im Web, das ist für viele Menschen schwer zu erfassen. Als einigermaßen gesunder, sehender Mensch kann man sich kaum vorstellen, wie man Websites besuchen kann ohne sie tatsächlich sehen zu können.
Was für viele nicht klar ist: Beim Thema Barrierefreiheit geht es bei weitem nicht nur um Menschen, die nicht oder schlecht sehen können.

Wer profitiert von meiner barrierefreien Website?

Tatsächlich begegnet uns der Bedarf nach Barrierefreiheit sehr viel häufiger als wir denken. Denn nicht nur Menschen mit starken Einschränkungen sind darauf angewiesen, dass wir ihre Bedürfnisse im Blick haben. Wir alle profitieren davon, wenn eine Website keine künstlichen Hindernisse aufbaut.

Screenreader, aber auch Suchmaschinen

Für Menschen, die nur sehr wenig oder gar nicht sehen können, kann fehlende Barrierefreiheit bedeuten, dass sie eine Website nicht besuchen können. Sie sind darauf angewiesen, dass der Screenreader den Inhalt einer Website sinnvoll erfassen kann.

Gleichzeitig lesen Suchmaschinen die Inhalte Ihrer Website ganz ähnlich wie ein Screenreader. Wenn diese Inhalte mit Hilfe eines Screenreaders gut zu verstehen sind, ist auch für Suchmaschinen-Bots schneller klar, worum es auf Ihrer Website geht. Und damit haben Sie schon einmal den Grundstein gelegt für eine positive Bewertung durch Google und Co.

Smartphones und Tablets

Barrierefreiheit bezieht sich auch auf Farbkontraste, Schriftarten und Schriftgrößen. Hier profitieren alle, die mit dem Smartphone oder Tablet bei ungünstigen Lichtverhältnissen versuchen, einen Text auf Ihrer Website zu lesen. Oder ältere Menschen, die Schwierigkeiten mit dem Lesen in der Nähe haben.

Mit guten Kontrasten und leicht zu lesendem Schriftbild funktioniert das. Mit einer zarten dunkelgrauen Schrift auf hellgrauem Hintergrund – nicht mehr wirklich.

Website bedienen im Ein-Hand-Betrieb

Haben Sie sich schon einmal den Arm gebrochen? Oder versucht, mit einem Kind auf dem Arm eine Website zu bedienen? Sie wissen, was ich meine. Hier gibt es viele Möglichkeiten, Besucherinnen und Besuchern das Leben einfacher zu machen. Große Bedienelemente, um sie zielsicher auf mobilen Geräten zu treffen oder auch eine gut funktionierende Navigation via Pfeiltasten oder Tabs am Desktop-Computer können einem hier das Leben leichter machen.
„Nebenbei“ können sich so Menschen, die aufgrund einer Erkrankung motorisch eingeschränkt sind, leichter durch Ihre Website bewegen.

Fremde Sprache? Übermüdet? Schwieriges Thema?

Sprache kann ein großes Hindernis sein. Zum einen, wenn die Website in einer Sprache verfasst ist, die wir nicht flüssig sprechen. Aber auch ein Text in unserer Muttersprache kann unverständlich sein: Sehr lange Sätze, viele Fremdwörter aus einem Bereich, der uns nicht geläufig ist oder eine unklare Struktur behindern uns beim Erfassen. Noch dazu, wenn wir zusätzlich abgelenkt oder müde sind.

Was ich hier tun kann? Texte klar strukturieren. Sätze möglichst klar und kurz formulieren. Außerdem kann ich überlegen, welche Fremdwörter wirklich notwendig sind, und im Zweifelsfall eine kurze Erklärung liefern. Die Website muss deswegen nicht gleich in leichter Sprache verfasst sein.

Slider, Videos und bewegte Inhalte

Slider und andere bewegte Inhalte können für Screenreader zur Sackgasse werden, aus der sie nicht wieder herauskommen. Auf viele sehende Menschen wirken bewegte, „zappelige“ Elemente irritierend und ablenkend. Bei einer entsprechenden medizinischen Vorgeschichte können sie sogar epileptische Anfälle auslösen.

Für alle bedeuten sie zumindest eine längere Ladezeit als nötig. Bei einem schlechten Mobilnetz kann das heißen, dass die Website extrem langsam geladen wird. Viele Besucherinnen und Besucher brechen an dieser Stelle ab. Abgesehen davon brauchen diese Ladevorgänge jede Menge Energie. (Zum Artikel Klimafreundliche Website)

Viele Menschen empfinden Slider und Co. außerdem als störend. Und ganz ehrlich, schauen Sie sich einen Slider komplett an und prüfen, ob dort wichtige Inhalte versteckt sind? Untersuchungen zeigen, dass gerade einmal 1% der Besucher auf einen Slider klickt.

Wie mache ich meine Website barrierefrei?

Mit WordPress ist das relativ einfach, da WordPress schon eine gute Basis mitbringt. Die WordPress Standard-Themes sind beispielsweise immer barrierefrei. Das bedeutet, sie bieten viele Features, die für eine Bedienung via Tastatur oder Screenreader wichtig sind. Auch die Kontraste und Schriften sind entsprechend ausgewählt. Sollte es Farbvarianten geben, die diese Standards nicht erfüllen, wird das in der Dokumentation erwähnt.

Die technische Basis genügt leider nicht

Diese technische Basis gibt uns eine sehr gute Grundlage. Ohne die wird es überhaupt nicht funktionieren.
Allerdings können wir die Barrierefreiheit beim Anlegen der Struktur und beim Erstellen der Inhalte gründlich kaputt machen.

Texte klar strukturieren

Hierarchische Überschriften und Unterüberschriften machen allen das Leben leichter. Wenn ein Text durch verschiedene Überschriften in sinnvolle Abschnitte unterteilt ist, kann man schneller erfassen, worum es geht. Besucherinnen möchten einfach „scannen“, wo im Text die für sie relevanten Informationen stehen.

Wer mit dem Screenreader arbeitet, kann sich zunächst die gekennzeichneten Überschriften vorlesen lassen. Wenn da keine sind, wird es sehr mühsam, in der Website Informationen zu finden.

Inhalte in unterschiedlichen Formaten präsentieren

Manche Menschen erfassen graphische Inhalte leichter, andere lesen lieber. Wieder andere schauen sich eher ein Video an als einen längeren Text zu lesen. Je nachdem, welche Art von Inhalten Sie vermitteln wollen, kann es hilfreich sein, diese unterschiedlich aufzubereiten.

Das kann heißen, zusätzlich zum Text eine Infographik anzubieten. Oder ein Video kombiniert mit einer kurzen textlichen Zusammenfassung. Bewegte Inhalte wie Videos oder Slider sollten jedoch nicht automatisch abspielen. Jede Besucherin soll selbst entscheiden können, ob sie den Inhalt sehen möchte.

Formulare

Formulare sind eine spezielle Art von Bedienelementen. Für WordPress gibt es unzählige Formular-Plugins. Leider erzeugen die meisten dieser Plugins von Hause aus keine barrierefreien Formulare. Häufig kann man sie noch nicht einmal entsprechend einrichten. Dabei ist es nicht schwer, ein Formular barrierefrei einzurichten, wenn man weiß, worauf man achten muss. Und es dauert kaum länger, als ein nicht-barrierefreies Formular zu erzeugen.

Fazit

Das Wichtigste beim Thema Barrierefreiheit ist meines Erachtens, dass man sich der Problematik bewusst ist und weiß, welche Vorteile eine barrierefreie Website hat. Dann kann man mit wenig Mehraufwand eine weitgehend barrierefreie Website erstellen.

Es ist uns sehr wichtig, die Websites für unsere Kundinnen und Kunden so weit wie möglich barrierefrei zu gestalten. Wie weit das am Ende geht, kommt sehr auf das Projekt und dessen Anforderungen an. Falls Sie dazu Fragen haben sprechen Sie uns gerne an.

The post Barrierefreie Website – ist das wirklich nötig? has first been published on start the loop_.

Für welche Arten von Webseiten bringt Accessibility finanzielle Vorteile?

• Online-Shops, die etwas verkaufen möchten
• Non-profit Organisationen, die Spenden werben möchten
• Unternehmen, die ihren Marktanteil erhöhen wollen, indem sie bei Suchmaschinen besser gefunden werden (SEO)
• Unternehmen, die ihr Image verbessern möchten und die Reputation ihrer Marke aufwerten möchten
• Seiten aus dem Bildungssektor, also Universitäten und Colleges, die sich über Studiengebühren finanzieren und um Studenten werben

Wie hilft Accessibility Folge-Kosten zu senken?

• Der Aufwand für Support sinkt, wenn sich alle Besucher gut zurechtfinden
• Die Kosten und der Aufwand für technische Pflege der Seite sinkt
• Barrierefreie Texte sind besser zu übersetzen, die Übersetzungskosten sinken
• Personal wird entlastet: Kunden können bestimmte Transaktionen online statt schriftlich durchführen

Welche User gewinnt man mit Barrierefreiheit?

• Ältere Menschen (es werden immer mehr)
• Menschen, die vorübergehend beeinträchtigt sind durch Unfall oder Krankheit
• Menschen, die dauerhaft beeinträchtigt sind durch Unfall oder Krankheit
• Menschen, die sich gerade in einer sehr lauten Umgebung aufhalten
• Menschen, die gerade mit kleinen, mobilen Geräten arbeiten
• Menschen, die mit älterer Hardware zurechtkommen müssen
• Menschen, die gerade eine schlechte Datenverbindung haben

Was gewinnen die Betreiber der Website?

• Marktanteile, denn sie unterscheiden sich damit deutlich von der Konkurrenz
• Mehr Besucher
• Loyale Kunden, die immer wieder kommen, weil die Seite für sie gut funktioniert
• Geringere Folgekosten (Kundensupport, Maintenance, Verwaltung)

The post Checkliste: Finanzielle Vorteile einer barrierefreien Webseite has first been published on start the loop_.

Wer profitiert von einer barrierefreien Webseite?

• Menschen mit einer Sehbehinderung, die starke Kontraste auf ihrem Bildschirm brauchen
• Menschen, die im hellen Sonnenlicht eine Adresse auf ihrem Smartphone lesen wollen

• Menschen, die per Tastatur statt Maus navigieren, weil sie keine Arme haben
• Menschen, die per Tastatur statt Maus navigieren, weil sie Rheuma in den Händen haben oder ihr rechter Arm vorübergehend einen Gipsverband hat

• Menschen, die eine geistige Behinderung haben
• Menschen mit einem Hochschulabschluss, deren Muttersprache nicht Deutsch ist

• Menschen, die eine Aufmerksamkeitsstörung haben und sich schlecht konzentrieren können
• Menschen, die nach einem langen Arbeitstag müde sind und sich schlecht konzentrieren können

• Alte Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren
• Junge Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren

Barrierfreiheit = Zugänglichkeit

Barriere – das klingt irgendwie anstrengend. Barrieren aus dem Weg räumen erst recht. Auf Englisch heißt barrierefrei accessible, was man mit zugänglich übersetzen kann. Das klingt doch gleich viel besser. Eine barrierefreie Website lädt schnell, lässt sich leicht pflegen und ist einfach zu bedienen.

Die folgende Liste ist längst nicht vollständig, aber sie fasst die wichtigsten Aspekte einer barrierefreien Webseite zusammen.
Die Angaben beruhen auf Elisabeths Präsentation beim WordPress MeetUp München  und auf dem WordCamp in Köln 2015.

Tipps für barrierefreie Webseiten

1. Inhalte

• Texte schreiben, die alle Besucher verstehen
• Kurze Texte schreiben
• Texte „scanbar“ machen, mit Überschriften logisch strukturieren (h1 bis h6)
• Fachbegriffe vermeiden oder in einem Glossar erklären
• Kurze, klare Sätze bilden (keine Schachtelsätze)
• In direkter, aktiver Sprache schreiben (keine Passivkonstruktionen)
• Verben statt Substantive (Eine Entscheidung treffen » entscheiden)
• Komplexe Inhalte, die sich textlich schwer erklären lassen, in einer Grafik zeigen
• Für Videos Transscripte und Untertitel anbieten

2. Coding

• Mobile First = Accessibility First
• Valides HTML benutzen
• Bereiche im Layout mit Aria-Roles eindeutig auszeichnen
• Keine Audio-/Video-/Slider-Elemente, die von selbst starten
• alt-Attribute nutzen, um die Aussage von Bilder zu beschreiben, die wichtig zum Verständnis der Inhalte sind; dabei nicht das Bild beschreiben, sondern die Aussage
• alt-Attribute für reine Deko-Bilder weg leer lassen
• Links sollten (zumindest im HTML) eine Information enthalten, wohin sie führen; eine Anleitung findet man bei Rian. Themes mit dem Tag Accessibility Ready bringen das das schon mit.
• Links immer im selben Fenster öffnen
• Flexibles Layout, so dass der Nutzer die Schriftgrößen verändern kann und die Seite weiter nutzbar ist

3. Gestaltung

• Buttons in ausreichender Größe und mit ausreichend Weissraum drumherum
• Auf richtige Farbkontraste achten
• Ausreichend große Schriftgröße anbieten
• Auf ausreichend großen Zeilenabstand achten

4. Orientierung

• Feedback anbieten
  (Beschriftung Formularfelder, Tooltips mit Fehlerhinweisen, farbliche Umrandung von aktiven Elementen)
• Unterschiedliche Wege anbieten, von A nach B zu navigieren z.B. über Querverweise oder die Suchfunktion
• Schnelle Wege und Abkürzungen für erfahrene Besucher, ausführliche und sorgfältig erklärte Wege für weniger erfahrene Besucher
• Konsistente UI-Elemente:
  Alle Links haben immer dieselbe Form, UI-Elemente verhalten sich wie gelernt, z.B. ein Klick auf ein Drucker-Symbol öffnet einen Druckdialog
• Wegweiser anbieten z.B. Breadcrumb-Navigation

5. Formulare

• Input-Felder mit verständlichen beschrifteten Labels versehen (dabei hilft die Accessible-Defaults-Erweiterung für Contact Form 7)
• Labels nicht durch Placeholder ersetzen
• Direkte Rückmeldungen über falsche Eingaben beim input-Feld geben,
  Klare Beschreibung des Fehlers, klare Anweisung was statt dessen zu tun ist
• Fehlermeldung nicht nur oben, sondern auch am Ende des Formulars ausgeben, so dass auch ein Screenreader die Fehlermeldung mitbekommt
• Kein zu enges Zeitlimit zum Ausfüllen des Formulars setzen bzw. Möglichkeit bieten, mehr Zeit anzufordern
• Auf ausreichend Farbkontrast achten (hellgrau umrandete Input-Felder auf weissem Hintergrund sind auf Monitoren mit hohem Kontrast unsichtbar)
• Lange Formulare unterteilen und Fortschritt darstellen (20%, 50% bearbeitet)

Tools zum Überprüfen einer Webseite

WordPress Accessibility Informationen des WordPress Accessibility-Teams mit Handbuch und Tipps
WordPress Plugin 
Farb-Kontraste prüfen
Farb-Kontraste prüfen, Tool von Lea Verou
Wave von WebAIM: Einfach URL eingeben und prüfen
Struktur der Überschriften prüfen

Links

einfach-fuer-alle.de
Web Accessibility Initiative
Accessible Rich Internet Applications Suite
ARIA-Roles (deutsch)
Webseiten, die mit dem Biene-Award ausgezeichnet wurden 
WebAIM z.B. zu Alt attribute 

The post Tipps für eine barrierefreie Webseite has first been published on start the loop_.

Mir ist keine Studie oder Statistik bekannt, aus der sich direkt ableiten ließe, wie sich der Traffic auf einer barrierefreien Website entwickelt. Aber es gibt reichlich Zahlenmaterial zu den unterschiedlichen Bevölkerungsgruppen, für die eine barrierefrei Website relevant ist.

Es sind mehr als man denkt – viel mehr

Da sind zunächst die Menschen, die einen offiziellen Schwerbehinderten-Status haben. Das sind immerhin 10% der Bevölkerung (Quelle). Aber auch Menschen, deren Muttersprache nicht Deutsch ist (13% Quelle) oder die eine eingeschränkte Lesekompetenz haben (17,5% Quelle), brauchen eine gut durchdachte, zugängliche Website. Auch wer älter als 70 Jahre ist, schätzt Angebote, die sich auch mit motorischen und visuellen Einschränkungen sicher bedienen lassen.

Man kann natürlich diese Prozentwerte nicht einfach addieren. Die Gruppen können sich überschneiden und es nutzen nicht alle dort erfassten Personen das Internet.
Dunkelziffer
Andererseits werden viele Handicaps in den Behinderten-Statistiken gar nicht erfasst. Beispielsweise Menschen mit Schreib- und Leseschwäche (5% Quelle) oder Personen, deren Konzentrations-Vermögen durch psychische Probleme wie Depressionen, Angst- und Suchterkrankungen eingeschränkt ist (25% Quelle).
Nimmt man noch diejenigen Besucher hinzu, die in einer extrem hellen oder lauten Umgebung auf einem kleinen Bildschirm nach Informationen suchen oder mit einer sehr schlechten Datenverbindung auskommen müssen, bleibt eine eindrucksvoll große Gruppe an potenziellen Kunden außen vor, wenn die Website ihnen Hindernisse in den Weg stellt.

Wettbewerbsvorteil Barrierefreiheit

Webseiten im B2C-Bereich kämpfen um jedes Prozent Marktanteil. Barrierefreiheit haben die Betreiber dabei erstaunlich oft nicht auf dem Zettel.

Eigentlich unverständlich, denn eine barrierefreie Seite hat enormes Potenzial. Mit ihr lassen sich Besucherschichten erschließen.
Die oben genannten Zahlen haben gewisse Unschärfen – nicht alle über 70-Jährigen sind motorisch eingeschränkt und eine amtlich anerkannte Schwerbehinderung lässt nicht automatisch darauf schließen, dass man Probleme im Internet hat. Andererseits sind die absoluten Zahlen eindrucksvoll hoch, dass ich annehmen würde, dass zwischen 30 und 40% der Internetnutzer eine barrierefreie Seite brauchen. Eine so große Besuchergruppe sollte sich in den Trafficzahlen deutlich bemerkbar machen.

The post Barrierefreie Website – lohnt sich das? has first been published on start the loop_.

<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

Diesen Link sieht man normalerweise nicht. Er wird erst sichtbar und aktiv, wenn jemand die Tastatur nutzt um durch die Seite zu navigieren. Probiert es mal aus, den Skip-Link gibt es auch hier auf dieser Seite.

Zugang per Tastatur

Die Navigierbarkeit per Tastatur ist ein zentrales Kriterium für Barrierefreiheit. Mit der Tastatur bewegen sich nicht nur Screenreader über die Seite. Auch Menschen, die keine Maus bedienen können, bewegen sich via Tab-Taste. Weil sie Arthritis in den Händen haben, weil sie keine Arme haben oder weil sie den rechten Arm vier Wochen lang im Gips tragen.

Und wozu braucht es diesen Link jetzt?

Angenommen, ich habe das Excerpt eines Artikels gelesen und möchte jetzt die ganze Version lesen. Ich steuere mit der Tastatur den Read-More-Link an, der Browser öffnet die Seite mit der Einzelansicht des Artikel.

Gäbe es nun den Skip-to-Content-Link nicht, müsste ich mich in der Einzelansicht erst mal durch den gesamten Header-Bereich durchackern. Ich müsste alle Elemente – Logo, Seitentitel, Navigation, Suchfeld – der Reihe nach anklicken bevor ich endlich beim Artikel landen würde. Die Tab-Taste arbeitet sich stur von links oben nach rechts unten durch den Code.
Ist dagegen ein Skip-Link vorhanden, kann ich sofort an die Stelle springen, die mich interessiert.

Aus diesem Grund sollte jede Webseite einen Skip-Link zur Verfügung stellen.
Ein Codebeispiel gibt’s im Accessibility-Handbuch.

The post Der “Skip to content”-Link has first been published on start the loop_.