t3n News Design

„Nicht meine Zielgruppe“ ist Schwachsinn: Auf diese Accessibility-Aspekte solltet ihr eure Website prüfen

„Nicht meine Zielgruppe“ ist Schwachsinn: Auf diese Accessibility-Aspekte solltet ihr eure Website prüfen

Wichtige Aspekte der Accessibility beziehungsweise Barrierefreiheit zu berücksichtigen, sollte eigentlich Standard sein – ist es aber nicht. Hier zeigen wir auf, wie ihr eure Website auf einige grundlegende Dinge testen könnt, die eigentlich selbstverständlich sein sollten.

Gleich zuerst: Dieser Artikel vermittelt kein Wissen an Webentwickler, wie barrierefreie Websites umgesetzt werden können – zu diesem Thema gibt es einen sehr lesenswerten Beitrag von Marco Zehe auf seinem Blog. Der Beitrag möchte sich mehr damit auseinandersetzen, wie ihr eure bestehende Website auf bestimmte Punkte überprüfen könnt, auch ohne euch bestens mit Webentwicklung auszukennen. Natürlich gibt es daneben noch einige Punkte mehr, die geprüft werden können – einen weiterführenden Link dazu findet ihr am Ende des Artikels, oder ihr schaut in dem bereits verlinkten Artikel von Marco Zehe vorbei.

Selbst ist der Nutzer: Auf Accessibility testen

Barrierefreiheit ist nicht gerade ein Thema, das tief im Bewusstsein des „normalen“ Nutzers verankert ist. Wenn ihr euch eine Website erstellt oder eine Website erstellen lasst, dann vermutlich meist nicht mit gesonderter Berücksichtigung der Accessibility. Vielleicht denkt ihr bei Accessibility oder Barrierefreiheit im Web nur an blinde Nutzer und sagt euch, dass das erstens nur ein kleiner Teil und zweitens nicht eure Zielgruppe ist. Diese Denkweise ist aber falsch, und außerdem hilft Barrierefreiheit beispielsweise auch Personen mit motorischen Einschränkungen, die auf die Tastatur angewiesen sind, oder Menschen mit Fehlsichtigkeiten.

Natürlich ist es am besten und einfachsten, eine Website gleich mit dem Thema Barrierefreiheit im Hinterkopf zu erstellen. Nachträgliche Anpassungen können eventuell aufwendig werden, weshalb die Thematik bereits in die Planung mit einfließen sollte. Doch gehen wir von dem nicht ganz unwahrscheinlichen Fall aus, dass ihr aktuell eine oder mehrere Websites betreibt, bei deren Erstellung nicht extra auf die Barrierefreiheit geachtet wurde, oder ihr habt ein fertiges Design für ein CMS in der Nutzung. Wenn das der Fall ist, dann schaut euch die folgenden Punkte an und überprüft eure Websites.

Sinnvolle Dokumentstruktur?

Nicht schön, aber ohne CSS bietet sich ein guter Blick über die Dokumentstruktur – wichtig im Bereich Accessibility. (Screenshot: W3C)
Nicht schön, aber ohne CSS bietet sich ein guter Blick über die Dokumentstruktur – wichtig im Bereich Accessibility. (Screenshot: W3C)

Wenn ihr die Stylesheets in eurem Browser deaktiviert, dann seht ihr das HTML so, wie es im Dokument vorliegt – für die meisten Browser gibt es Erweiterungen, die CSS deaktivieren können. Hier könnt ihr prüfen, ob die Reihenfolge der Inhalte sinnvoll ist. Wenn die Sidebar vor dem Hauptinhalt kommt, dann ist da vielleicht etwas falsch gelaufen, was behoben werden müsste.

Einen großen Schritt in Richtung Barrierefreiheit macht eine Seite allein durch die korrekte Nutzung von HTML. Das ist natürlich nichts, was jemand bis ins kleinste Detail überprüfen kann, der nicht viel Ahnung davon hat. Ihr könntet aber beispielsweise schauen, ob Überschriften auch mit deaktiviertem CSS noch Überschriften sind, oder wie ein normaler Absatz aussehen. Dabei könnt ihr auch schauen, ob Listen wirklich Listen sind, also ohne CSS Aufzählungspunkte haben. Um zu prüfen, ob Alternativtexte für Bilder angelegt sind, ist die schnellste Möglichkeit, die Anzeige der Bilder zu deaktivieren.

Es gibt beispielsweise für Firefox aber auch ein Plugin, dass euch bei der Prüfung unterstützt. Mit AInspector könnt ihr prüfen, ob alt-Attribute angelegt sind und ob Überschriften richtig verwendet wurden.

Per Tastatur bedienbar?

Eine Prüfung, die sehr einfach durchzuführen ist, ist die auf Tastaturbedienbarkeit. Ruft einfach eure Website auf und testet, ob sie sich komplett mit der Tastatur bedienen lässt. Beliebte Auffälligkeiten sind hier beispielsweise Drop-Down-Menüs, deren Unterpunkte entweder überhaupt nicht mit der Tastatur zugänglich sind, oder bei denen der Fokus zwar auf die Unterpunkte geht, sich das Untermenü aber nicht öffnet.

Ein weiterer Punkt, auf den ihr achten solltet, ist die Hervorhebung des aktuell angesteuerten Links. Manchmal wird der focus-Zustand im CSS vergessen, wodurch der Nutzer keine Ahnung hat, bei welchem Link er sich gerade befindet.

Formulare mit korrekten Beschriftungen?

Eigentlich ist es nicht so schwer: Zu einem Formular-Element gehört immer eine Beschriftung, die mit dem label-Element beziehungsweise über dessen for-Attribut mit dem Feld verbunden ist. Wenn ihr eine Beschriftung eines Feldes anklickt und dann der Fokus im Feld liegt, sodass ihr gleich losschreiben könnt, wurde es vermutlich richtig gemacht.

Farbkontraste ausreichend?

Teilweise gibt es ja Farbkombinationen, bei denen auch Leute ohne irgendeine Farbfehlsichtigkeit sich die Frage stellen, wie die zu Stande gekommen sind. Es ist generell keine gute Idee, auf einem weißen Hintergrund eine hellgraue Schrift zu verwenden, oder ähnlich. Um auf ausreichende Farbkontraste zu testen, könnt ihr beispielsweise den Colour Contrast Analyser nutzen. Alternativ hilft euch auch hier ein Browser-Plugin, beispielsweise der oben genannte AInspector für Firefox.

Härtetest: Screen-Reader installieren

Das ist nicht mal eben gemacht, kann aber sehr lehrreich sein. Ich selbst habe beispielsweise in dem (naiven) Glauben, Accessibility-Standards von SVGs würden meist schon unterstützt, ein SVG-Social-Media-Menü so umgesetzt, wie es meist gezeigt wird. Als ich das dann mehr spaßeshalber mal mit NVDA im neuesten Firefox getestet habe, war es vorbei mit lustig. Letztlich musste auf versteckte span-Elemente für Screen-Reader-Nutzer zurückgegriffen werden, damit es korrekt ausgegeben wird.

Hier kann es beispielsweise sinnvoll sein, sich auf bestimmte Bereich der Website zu beschränken, wie eine Drop-Down-Navigation, einen Slider, ein Icon-Menü, et cetera. Sofern semantisches HTML genutzt wurde, sollten „normale“ Bereiche, wie Absätze, Links, Listen, und Überschriften eigentlich kein Problem darstellen.

Meine Website ist teilweise nicht zugänglich – was mache ich jetzt?

Wenn ihr euch selbst mit Webentwicklung auskennt, dann schaut euch den bereits erwähnten Artikel „Die Grundregeln zugänglicher Webseiten“ auf dem Blog von Marco Zehe an. Falls ihr euch nicht auskennt, dann müsst ihr nun entscheiden, ob euch das Thema wichtig genug ist (was es sein sollte), um jemanden zu beauftragen, nachzubessern. Und falls ihr ein WordPress-Theme oder ein Design für ein anderes CMS nutzt, das nicht für euch angefertigt wurde, dann könnt ihr ja einfach mal beim Entwickler nachfragen und ihn darauf hinweisen.

Fazit

Natürlich ist es eigentlich nicht in erster Linie Aufgabe des Kunden, sich um die Barrierefreiheit zu kümmern, sondern die des Entwicklers. Wenn aber im Voraus nicht geklärt wurde, dass bestimmte Aspekte der Barrierefreiheit bei der Website unbedingt erfüllt werden sollen, dann ist es – obwohl es selbstverständlich sein sollte – nachher nicht umgesetzt. Von daher muss manchmal leider von Seite des Kunden beispielsweise die Ansage kommen, dass die Seite natürlich nachher auch komplett mit der Tastatur bedienbar sein soll.

Und wenn ihr beispielsweise fertige Themes für WordPress nutzt, und bei der Wahl bisher immer nur nach dem Aussehen gegangen seid, dann versucht doch mal, ab jetzt noch ein paar Tests in der Demo durchführen, wie beispielsweise die Bedienbarkeit mit der Tastatur.

Es gibt natürlich noch mehr Dinge, die getestet werden können, und wer sich intensiver damit auseinandersetzen möchte, der kann ja mal einen Blick auf die Seite „Easy Checks - A First Review of Web Accessibility“ des W3C werfen.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von Brillenträger gibts sehr viele am 21.02.2016 (15:54 Uhr)

    Ich würde sowas ja gerne automatisieren oder auch Cheatsheets für schnelle Umsetzung. Aber Abmahnungen und potentielle Rechtskosten machen es finanziell uninteressant.

    Qualitäts-Leistungs-Schutz-Medien haben oft A+/a--Buttons um die Schriftgröße zu ändern. Bei Wikipedia hat man bei Lynx den Content zuerst und nicht wie üblich die linke Navigation was natürlich schlau ist. Die Leute haben keine Brillen und sehen trotzdem schlecht oder haben glänzende Displays unterwegs usw.
    Man sollte jeden Monat über seine Webseite (als Kunde) drüberschauen und erkennt schnell falsche Fax-Nummern, alte Produkte, falsche Mitarbeiter-Zuordnungen usw. In dem Zusammenhang kann man dann natürlich Optimierungen ansetzen. Im Prinzip ist es wohl schlau es wie Staubfegen oder durch-kämmen oder Fenster-Wischen regelmäßig zu machen. Feedback-Systeme und Optimierungen durch Crowd der Mitarbeiter sollte auch normal sein. Fragen unter den Produktbeschreibungen usw. wie bei Amazon-China schon ewig und seit 1-3 Jahren bei Amazon-Deutschland zeigt auf wo Kunden was nicht verstanden oder gefunden haben.
    Dann erkennt man auch den Sinn von einfache Sprache, unklare Formulierunen usw.
    Speech-Checker wären leicht zu entwickeln und eine Ergänzung zur M$-Office-Rechtschreib-Prüfung. Rechtskosten, Patente und Abmahnungen machen es finanziell trotz der Nützlichkeit und Sinnvollen Einsetzbarkeit ("einfache Sprache" ist m.W. Behörden-Verordnung!) uninteressant obwohl es sogar recht einfach wäre weil man ja nicht die Semantik oder Tippfehler erkennen muss sondern nur andere nämlich messbare Aspekte wie Passiv-Formulierungen oder zu lange Sätze. US-Startups bekämen vermutlich Zillionen dafür wie schon Summly für eine verwandte Idee bewies...

    Es gibt Statistiken über die Browser und natürlich Pixel-Auflösungen der Kunden. Nett wäre welchen Font sie einstellen oder ob sie auf A+ oder a- drücken um zu sehen welche Fontsize die beliebteste ist. Daran lernt man es vermutlich besser als wenn man über ich glaube ein Prozent Rot-Grün-Blindheit o.ä. berichtet.
    http://www.golem.de/news/it-und-autismus-ich-suche-nicht-nach-fehlern-ich-finde-sie-1602-118945.html
    Was sagt die Statistik über Brillenträger in Korrelation mit Kaufkraft und steigendem Alter ? Das sollte vermutlich schnell überzeugen.
    Oder welche Worte die Eltern/Großeltern überhaupt verstehen sollte von klarem Deutsch schnell überzeugen.

    Wenn jeder Mitarbeiter die Firmen-Page auf den eigenen Geräten wie Phone, Tablett und natürlich SmartTV oder dem Gigagroß-Smart-TV in der Firmenzentrale lädt, erkennt man wohl schnell das Potential.
    Oder der Praktikant muss einen halben Tag lang Strichliste führen ob und wie oft die Rampe und wie oft die Treppe benutzt wird. Kinderwagen, Rentner ohne Rollator usw., Lieferanten, Einkaufswagen,... sind wohl Potential dafür.
    A/B Tests mit Aushängen in verschiedenen Schrift-Größen überzeugen evtl auch. Bloss wie zählen... Mit Bluetooth-Bacons. Gibts wohl leider nicht obwohl das auf Messen für verschiedene Produkte oder Produkt-Farben hilfreich wäre die Verweildauer statistisch zu erfassen weil/wo Eye-Tracking nicht so erwünscht ist.
    Auch bei Verkaufsmessen oder Supermarkt-Eingängen will man wissen welche Aktions-Waren am meisten angeschaut werden.

    Antworten Teilen
  2. von cgpro am 27.02.2016 (11:01 Uhr)

    Beim Thema Barrierefreiheit sollte auch auf ein entsprechend einfaches Design geachtet werden. Bestes Beispiel Button-Design für mobile Endgeräte, kann ich alle Links auch mit dem Daumen anklicken?

    Antworten Teilen
  3. von Blogger_Base am 08.04.2016 (11:53 Uhr)

    Hallo,

    sehr interessanter Artikel. Es gibt sicherlich auch Plugins für WordPress, die sich dem Thema Barrierefreiheit annehmen. So zum Beispiel das Plugin: WP Accessibility.

    Schöne Grüße

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema
Gartners „Hype Cycle 2015“: Diese Technologien solltet ihr beobachten (und diese nicht)
Gartners „Hype Cycle 2015“: Diese Technologien solltet ihr beobachten (und diese nicht)

Einmal mehr zeigt Gartner in seinem „Hype Cycle 2015“, welche aufstrebenden Technologien derzeit absolut überschätzt werden und welche sich bereits in sicheren Gewässern befinden. » weiterlesen

CeBIT 2016: Diese Startup-Highlights solltet ihr euch nicht entgehen lassen
CeBIT 2016: Diese Startup-Highlights solltet ihr euch nicht entgehen lassen

Ihr seid fleißig dabei, euren CeBIT-Besuch zu planen, und es fehlt euch noch das eine oder andere Startup-Highlight? Wir haben die Hotspots rund um das Messegelände für euch herausgesucht. » weiterlesen

Auf diese Startups solltet ihr einen Blick werfen: Hannoveraner Gründerwettbewerb prämiert Sieger
Auf diese Startups solltet ihr einen Blick werfen: Hannoveraner Gründerwettbewerb prämiert Sieger

Schon zum 13. Mal sind am gestrigen Abend Startup-Ideen aus Hannover beim Gründungswettbewerb Startup-Impuls prämiert worden. Wir stellen euch die Gewinner, auf die ihr ein Auge werfen solltet, … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?