Inhalt

8 einfache Tests

Barrierefreies Internet ganz einfach selbst testen

Barrierefreiheit ist Expertensache? Vielleicht, aber Barrierefreies Internet in seinen Grundzügen kann wirklich jeder testen. Mit den acht nachfolgenden einfachen Tests kommt jeder den grundlegenden Fehlern der Barrierefreiheit auf die Spur.

Vorneweg: Es gibt immer verschiedene Möglichkeiten die bestimmte Aspekte, die für barrierefreies Internet relevant sind, zu testen. Experten wissen, dass sie für die meisten BITV-Tests, die wir hier beschrieben haben, im Prinzip immer auf zwei-drei Multifunktions-Werkzeuge zurückgreifen können. Eins der Werkzeuge ist die Webdeveloper Toolbar. Wer sich dafür interessiert, kann die „All-In-One-Lösung“ für Firefox und Chrome als Browser-Erweiterung installieren und für viele der nachfolgenden Tests verwenden.

Da die einzelnen Stufen der hier aufgeführten Tests möglichst einfach und nicht nur für Experten nachvollziehbar sein sollten, haben wir für jeden Prüfschritt allerdings zumeist ein einzelnes, leicht zu bedienendes, Werkzeug herausgesucht.

1. Test: Tastatursteuerung

Nicht nur blinde Menschen, sondern auch Menschen mit motorischen Einschränkungen können häufig keine Computermaus als grafisches Eingabegerät verwenden. Legen Sie deshalb einfach mal ihre Computermaus zur Seite. Nutzen Sie nur die Tastatur vor Ihnen um die komplette Internetseite zu steuern. Übliche Tasten zur Tastatursteuerung sind die Pfeiltasten, die Tabulatortaste, die Space‐Taste und die Escape‐Taste. Zum Testen reicht in der Regel die Tabulator‐Taste: Dabei vor allem auf einen sehr gut sichtbaren Tastatur-Focus achten. Um nicht zu mogeln, kneifen Sie einfach Ihre Augen zusammen und versuchen Sie dem Focus zu folgen. Diesem Test sollten Sie vor allem auch in interaktiven Elementen, wie Formularen durchführen. Sie werden überrascht sein, 95 % aller vermeintlich „barrierefreien Internetauftritten“ fallen hier durch.

2. Test: Benennung (Label) von Formularfeldern verknüpft

Interaktionen und Transaktionen finden im Internet über Formulare statt. Diese können durchaus einen gewissen Komplexitätsgrad erreichen. Nicht alles davon lässt sich als Laie prüfen. Ein ziemlich einfacher Test ist aber, ob Formularfelder korrekt mit ihren Labels (das ist die Benennung daneben, beispielsweise Vorname, Nachname, et cetera) verknüpft sind. Dazu müssen Sie einfach Ihrem Browser auf das Label klicken, der Cursor muss dann sofort in das korrespondierende Formularfeld springen. Ist das an irgendeiner Stelle nicht gegeben, ist das für blinde Menschen eine hundertprozentige Barriere. Ein Formular wird dadurch für Screenreader-Nutzer unbrauchbar.

3. Test: Kontraste

Ob Farbkombinationen von Vordergrundfarbe zu Hintergrundfarbe ausreichend Kontrast im Sinne der BITV aufweisen lässt sich einfach überprüfen. Installieren Sie sich dazu für Ihren Firefox Browser die Erweiterung „Juicy Studio Accessibility Toolbar“. Mit dieser Erweiterung können Sie sämtliche Farbkombination auf einer Seite mit einem Klick überprüfen. Bevor Sie allerdings zum Telefonhörer greifen und bei Ihre Agentur anrufen und Farbkontraste bemängeln, sollten Sie folgendes beachten: Der gemessene Farbwert (das Kontrastverhältnis) ist abhängig von der Schriftgröße, was ja auch Sinn macht (ab 18,7 Pixel fett bzw. 24 Pixel normal gilt der Wert für „Großer Text“). Um die Schriftgröße herauszubekommen gibt es ebenfalls eine Browser-Erweiterung für Chrome namens WhatFont.

Mit dem Farbkontrast-Tester der „Juicy Studio Accessibility Toolbar“ müssen Sie übrigens ein wenig aufpassen. Das Test-Werkzeug prüft gegen die drei Konformitätslevel der WCAG (A, AA und AAA). Da die BITV die ersten beiden Level in Priorität 1 zusammengefasst hat (AAA entspricht Priorität 2), können Sie sich in der Regel auf Farbkombinationen konzentrieren, die AA-Konform sind. Mehr dazu beim BITV-Lotsen.

Wichtig: Der Farbkontrast-Tester überprüft nur CSS-Farbdefinitionen von HTML-Elementen. Wenn Sie beispielsweise eine Vordergrund-Grafik als Funktions-Element mit zu geringem Kontrast verwenden, bemerkt der Farbkontrast-Tester dies nicht. Achten Sie also auch auf solche Details. Hierfür können Sie den Farbkontrast-Tester von WOB11 herunterladen.

4. Test: Seitentitel pro Seite vergeben?

Ein selbst erklärender Seitentitel für jede einzelne Seite ist eine der wichtigsten Möglichkeiten zur Standort‐Identifikation für Screenreader-Nutzer (Stichwort: Tab‐Browsing). Ein gutes Tool, um schnell die Seitentitel von verschiedenen URLs zu testen (ohne in den Quellcode schauen zu müssen), findet sich unter www.exadium.com/tools/metadata. Eigentlich dient das Werkzeug SEO-Zwecken, aber Ihnen hilft es bei diesem Test ebenfalls. Sie sehen, dass Bemühungen in Sachen Barrierefreiheit manchmal auch in anderen Bereichen Vorteile verschafft. „Viel sagende“ Seitentitel sind gut für Suchmaschinen und werden in den organischen Suchergebnissen deutlich hervorgehoben. Zudem helfen sie auch dabei, Seiten zu identifizieren, wenn Sie als Bookmarks abgelegt sind.

Die Frage, was ein guter Seitentitel ist, ist ähnlich konkret zu beantworten, wie die Frage, was einen guten Alternativtext für Bilder ausmacht. Zumal hier manchmal Disziplinen gegeneinander spielen. SEO-Experten sehen gerne suchmaschinenrelevante Begriffe vorne. Die WAI empfiehlt für Screenreader-Nutzer das „Frontloaded-Konzept“ nach dem Prinzip „Kontaktformular anatom5 – kontaktieren Sie die auf Barrierefreiheit spezialisierte Agentur aus Düsseldorf“. Das wiederum torpediert aber gute Bookmarks. Es empfiehlt sich den Absender immer an erste Stelle zu stellen. Also: „anatom5 Kontaktformular – kontaktieren Sie die auf Barrierefreiheit spezialisierte Agentur aus Düsseldorf“. Entscheiden Sie selbst.

5. Test: CSS abschalten – linearisierte Ansicht prüfen

Wir testen seit vielen Jahren barrierefreie Internetseiten. Seit geraumer Zeit ist festzustellen, dass sich massive Probleme hinsichtlich der Barrierefreiheit durch falschen, beziehungsweise unbedachten Einsatz von CSS-Techniken verbreitet haben. Die Hauptprobleme entstehen durch Icon-Fonts, CSS-Background-Images und durch CSS generierten Content für Pseudo-Elemente. Das klingt jetzt erstmal technisch, erklärt sich aber gleich.

Ursprünglich war der Einsatz von CSS generiertem Content (zum Beispiel CSS-Background-Images) nur für Schmuckelemente gedacht. Mittlerweile findet der Einsatz dieser Techniken aber auf breiter Ebene für zentrale und vor allem funktionale Elemente statt. Vor allem im mobilen Bereich werden Navigations-Elemente aufgrund des Platzmangels fast durchgängig auf diese Weise „ersetzt“. Wenn es dann im HTML dafür kein „unsichtbares“ Äquivalent gibt, ist eine solche Seite bei abgeschaltetem CSS nicht mehr brauchbar.

Falls Sie sich jetzt fragen, wer denn CSS abschaltet: Fast 20 % aller Menschen mit starker Sehbehinderung setzen auf benutzerdefinierte Farben in Ihrem Betriebssystem oder verwenden so genannte Nutzer-Stylesheets (Studie von WebAIM). CSS können Sie ganz einfach im Firefox-Browser abschalten, ganz ohne Erweiterung. Gehen Sie dazu einfach unter Ansicht auf „Webseite-Stil“ und klicken Sie dann auf „keinen Stil“. Schauen Sie sich die Seite dann mal genau an und beurteilen Sie, ob die Seite noch nutzbar ist.

6. Test: Alternativtexte für Bilder

Über den richtigen Einsatz von Alternativtexten für Bilder lassen sich Seiten füllen. Was auf den ersten Blick trivial erscheint, stellt an den Redakteur (aber auch Entwickler müssen sich mit dem Thema auskennen) höhere Anforderungen, als man gemeinhin denkt. Webaim hat eine gute Zusammenfassung (in Englisch) erstellt, die Sie auf jeden Fall mal gelesen haben sollten. Alleine das Fazit trifft den Nagel auf den Kopf (Frei übersetzt): „Alternativtext zu Bildern hinzuzufügen ist eine der einfachsten Anforderungen, wenn es um Barrierefreiheit geht, aber es ist eine der schwierigsten Aufgaben, wenn es an die Durchführung geht.“

Mit dem nachfolgenden Tool können Sie sich mit einem Klick auf jeder beliebigen Seite sämtliche Alternativtexte für Bilder anzeigen lassen. Geben Sie unter varvy.com/tools einfach die gewünschte URL ein und im Handumdrehen werden Ihnen alle Alternativtexte aufgelistet. Auch dieses Tool ist originär ein SEO-Tool. Das Tool findet jedes Vordergrundbild und teilt Ihnen mit, ob ein Alternativtext vorhanden ist. Es zählt die Worte des Alternativtextes und Sie können sich das jeweilige Bild zusätzlich anzeigen lassen, um den Inhalt des Alternativtextes zu kontrollieren. Falls die genannte Seite mal nicht aufrufbar ist, können Sie sich auch für diesen Accessibility-Test eine Browser-Erweiterung (Firefox/Google Chrome) installieren: Das „WAVE Evaluation Tool“ von WebAIM ist dafür prädestiniert. Für „Nichteingeweihte“ aber gegebenenfalls etwas unübersichtlich.

Ob ein Alternativtext wirklich sinnvoll ist, können Sie nach folgenden Regeln relativ einfach überprüfen. Die Regeln sind nicht additiv zu verstehen. Der korrekte Alternativtext ist immer abhängig von Kontext, Bedeutung und Funktion der Vordergrund-Grafik.

  • Ein Alternativtext kann im ALT-Attribut oder im Kontext des Bildes zu finden sein
  • Jedes Bild muss eine ALT-Attribut aufweisen (es darf unter Umständen leer sein)
  • Alternativtext sollte:

    • den Inhalt und/oder die Funktion des Bildes repräsentieren
    • prägnant sein

  • Alternativtext sollte nicht:

    • überflüssig sein (beispielsweise identisch mit Überschrift, etc.)
    • mit Hinweisen wie „Bild ...“ oder „Grafik ...“ versehen werden

  • Der geeignete Alternativtext hängt stark vom Bildkontext ab
  • Alt-Text eines funktionalen Bildes (z. B. ein Bild innerhalb eines Links) sollte die Funktion als auch die Inhalte zu beschreiben. Funktionale Grafiken (z. B. Lupe als Button einer Suchfunktion) sollte nur die Funktion des „Buttons“ beschreiben (z. B. „In Inhalt suchen“)
  • Dekorative Bilder müssen auch ein ALT-Attribut haben, aber es sollte leer sein (alt = "")

7. Test: Überschriften-Struktur

Mit der Browser Erweiterung für Google Chrome namens HeadingsMap können Sie sich ganz einfach die Überschriften-Struktur für jede einzelne Seite anzeigen lassen.

Darauf sollten Sie bei der Überschriften-Struktur achten: Überschriften sind innerhalb eines Internetauftritts – gerade für Menschen, die auf Sprachausgabe (Screenreader) angewiesen sind – eines der wichtigsten Mittel zur Orientierung und tatsächlich auch Navigation. Überschriften strukturieren Text für sehende Menschen durch Hervorhebung. Ähnlich funktioniert das für blinde Menschen. Testen Sie also, ob die Inhalte, die für sie als sehenden Prüfer als Überschriften visuell erkennbar sind, auch mit dem Testwerkzeug HeadingsMap als solche erkannt werden.

8. Test: Lesbare URL

Beim Surfen im Internet sind Ihnen sicherlich auch schon mal unendlich lange und kryptische URLs aufgefallen. Diese dynamischen URLs bestehen aus der Domain (beispielsweise: www.anatom5.de) und dynamischen Variablen, die als URL-Parameter übergeben werden. So entstehen die unschönen URLs, die viel zu lang und weder für Menschen, noch für Suchmaschinen wirklich verständlich sind (Beispiel: www.domain.de/kategorie/artikel.php?language=de&inhalt=dynamische-urls). Lesen Sie dazu auch den Artikel über Dynamisch URLs und URL-Parameter.

Erklärung: Gut lesbare URLs sind vor allem für Screenreader-Nutzer wichtig für die Orientierung. Das Schöne ist, Sie können diese Anforderung ganz einfach selbst über die URL-Leiste in Ihrem Browser überprüfen. Lesbare bzw. sprechende URLs sind nicht nur gut für die Barrierefreiheit, sondern auch ein wichtiger Baustein für Suchmaschinenoptimierung. Eine gute „sprechende“ und lesbare URL kann so aussehen:

www.anatom5.de/leistungen/barrierefreiheit/barrierefreies-webdesign.html

Fazit:

Mit diesen acht einfachen Tests können Sie schnell überprüfen, ob Ihre Seite tatsächlich zumindest schon mal im Grundsatz den Vorgaben der BITV für barrierefreies Internet entspricht. Natürlich bilden diese einfachen Tests nur einen Ausschnitt aus dem gesamten BITV-Test ab. Aber wenn diese Aspekte bereits nicht berücksichtigt wurden, dann sieht es für die gesamte Barrierefreiheit der getesteten Seite nicht gut aus. Noch mehr mögliche Schnelltest finden Sie beim W3C als sogenannte Easy Checks.

Wichtig: Für die unterschiedlichen Bereiche einer Seite sind in der Regel unterschiedliche Ansprechpartner verantwortlich. Der Einfachheit halber unterscheiden wir in Backend-Technik (Server, CMS, Shop, Weblog, etc.), Frontend-Technik (Design, Farbkontraste, HTML-Gerüst, CSS, JavaScript, etc.) und Redaktion (Texte, Bilder inklusive ALT-Texte und Bildkompression, Struktur inklusive Überschriften, Listen, Datentabellen, etc., sprechende Navigationspunkte, barrierefreie PDF, Video-Untertitel und Transskripte, etc.).

Sie sehen, dass auch die Redaktionen für die Barrierefreiheit der Inhalte eine große Verantwortung trägt. Die Backend-Technik sollte den Redakteur dabei unterstützen (Stichwort: Sprechende URLs, automatische Befüllung des Seitentitels aus dem Navigationspunkt und dergleichen mehr). Die Frontent-Technik muss den validen und entsprechend BITV barrierefreien Rahmen bieten. Und die Redaktion hat die schwierige Aufgabe für nachhaltige Barrierefreiheit im Content-Bereich zu sorgen.

Agentur anatom5

Keine Agentur in Nordrheinwestfalen wurde bisher mit mehr BIENE-Awards ausgezeichnet als anatom5. Nicht nur wenn Sie die BITV erfüllen müssen, brauchen Sie einen Partner, dem Sie vertrauen können. Die Leistungen der Agentur anatom5 im Bereich Barrierefreis Webdesign sind im Einzelnen:

  • Gestaltung von Internetauftritten und Portalen
  • Intranet- und Mitarbeiterportale
  • Entwicklung von Navigations-Konzepten
  • Einsatz unterschiedlicher Redaktions-Systeme
  • Entwicklung und Überarbeitung von Texten
  • HTML5, CSS3, ARIA
Button mehr Informationen