Easy Checks: Barrierefreiheit einfach testen

Mit diesen einfachen Barrierefreiheits-Tests bekommen Sie eine erste Idee, wie es um die Barrierefreiheit bei Ihrem Webangebot bestellt ist. Die Easy Checks wurden von der Web Accessibility Initiative (W3C) entwickelt und sind bewusst reduziert gehalten. Aufgenommen sind Prüfpunkte, die einfach zu testen sind. Auch wenn diese ersten Tests erfolgreich sind, können Barrieren bestehen, die Menschen mit Behinderung den Zugang verwehren. Anders herum kann es auch sein, dass Sie Barrieren finden, die real gar nicht bestehen, da die Barrierefreiheits-Anforderung über eine andere als die hier beschriebene Technik erfüllt wurde. Wer sein Webangebot umfassend testen möchte, sollte die Selbstbewertung nutzen oder einen Expertentest beauftragen.

Grundsätzlich können Sie die Easy Checks mit jedem Browser durchführen. Da Hintergrundwissen (z.B. Umgang mit HTML-Code) und Vorlieben unterschiedlich sind, beschreiben wir häufig eine alternative Methode der Prüfung.

Dokumenttitel

Der Dokumenttitel erscheint

  • im Reiter der Titelleiste des Browsers,
  • in den Ergebnissen der Suchmaschinen und
  • in den Bookmarklets (Lesezeichen).

Gute Dokumenttitel fassen den Inhalt einer Webseite zusammen. Sie helfen bei der Unterscheidung mehrerer offener Seiten im Browser. Der Dokumenttitel ist das erste, was ein Screenreader vorliest.

Anforderungen an Barrierefreiheit:

  • Der Dokumenttitel bezeichnet den Inhalt einer Webseite kurz und angemessen.
  • Er ist zusammengesetzt aus der individuellen Bezeichnung einer Seite, z. B. „Über uns“ oder „Aktuelles“, und einer allgemeinen Bezeichnung des Auftritts, z. B. dem Firmennamen.

Prüfung:

Öffnen Sie mehrere Webseiten des Internetauftritts. Prüfen Sie die Tabs des Browserfensters. Gibt es im jeweiligen Tab eine individuelle und eine allgemeine Bezeichnung der Webseite?

Im Quellcode steht der Dokumenttitel innerhalb des title-Elements <title>...</title> innerhalb von <head>...</head>.

Bildschirmausschnitt mit zwei offenen Browserfenstern, ein Dokumenttitel ist hervorgehoben

Der Dokumenttitel ist im Reiter des Browserfensters zu sehen.

Alternativtexte für Grafiken

Ob Foto, Illustration, Schaubild oder Grafik: Blinde Menschen können Bilder nicht sehen – für sie ist der Alternativtext der Zugang zum Bild, er wird vom Screenreader ausgegeben. Der Alternativtext (alt-Text) steht im HTML-Code und ist nicht sichtbar.

Anforderungen an Barrierefreiheit:

Der Alternativtext sollte den Zweck des Bildes vermitteln. Folgende Grafiken können unterschieden werden:

  • Ist die Grafik verlinkt, z.B. ein Teaser-Bild, steht das Linkziel im alt-Text (wohin führt der Link?).
  • Wird die Grafik für eine Funktion eingesetzt, z.B. ein Suche-Absenden-Button, wird der Zweck vermittelt (was passiert?).
  • Ist die Grafik nicht verlinkt und informativ, z.B. ein Foto, beschreibt der alt-Text das Bild (was ist zu sehen?).
  • Ist die Grafik rein dekorativ, bleibt der alt-Text leer (alt=““).

Vertiefende Informationen zum Thema Alternativtexte für Grafiken finden Sie in unserem Leitfaden für Online-Redakteure.

Prüfung:

Rufen Sie mit der Taste F12 das Entwicklerwerkzeug des Browsers (Inspektor) auf. Dadurch wird der HTML-Code der Seite eingeblendet. Klicken Sie links in der Menüleiste des eingeblendeten Inspektors auf das Auswahlwerkzeug (Icon mit Cursor-Pfeil auf einem Rechteck). Fahren Sie mit der Maus über ein Bild oder klicken Sie es an. Der entsprechende Bereich des Quellcodes wird hervorgehoben. Je nach Art der Grafik (siehe Abschnitt "Anforderung an Barrierefreiheit") sollte ein passender Alternativtext vorhanden sein.

'Screenshot einer Grafik mit eingeblendetem HTML Code, der Alternativtext ist hervorgehoben

Ist ein Alternativtext im Code vorhanden, gibt der Screenreader aus: „Grafik: Junge Frau in einem Konferenzraum, auf den Knien ein Laptop".

Alternative Prüfung mit Werkzeugen:

Die Web Developer Toolbar ist eine Browser-Erweiterung, u.a. für Firefox, und kann die Prüfung erleichtern. Um die Toolbar zu installieren, wählen Sie auf der Seite Web Developer (Add-ons für Firefox) den Button „Zu Firefox hinzufügen“ und starten Sie den Browser neu. Es erscheint eine Symbolleiste mit Werkzeugen unterhalb des Menüs des Browser.

Die Funktion Bilder > Alt-Attribute anzeigen aufrufen. Die Alternativtexte werden eingeblendet. Je nach Art der Grafik (siehe Abschnitt "Anforderung an Barrierefreiheit") sollte ein passender Alternativtext vorhanden sein.

Screenshot von einer Grafik, der Alternativtext ist mit Hilfe einer Browser-Erweiterung eingeblendet

Der Alternativtext kann auch mit Hilfe einer Browser-Erweiterung eingeblendet werden.

Überschriften

Es ist sinnvoll, Webinhalte mit Überschriften zu strukturieren. Visuell sind Überschriften beispielsweise mit einer größeren Schrift gestaltet. Damit auch Nutzer von Hilfsmitteln, z.B. blinde Menschen, wahrnehmen können, dass es sich um eine Überschrift handelt, müssen diese im HTML-Code als solche ausgezeichnet sein.

Um eine Überschrift auszuzeichnen, verwendet man den Tag <h> für „heading“. Genauso wie man visuell unterschiedliche Überschriftenebenen durch Schriftgröße, Farbe etc. unterscheiden kann, so ist dies auch im HTML Code möglich. Die Hauptüberschrift ist die Überschrift erster Ordnung <h1>, die nächste Überschrift ist die der zweiten Ordnung <h2> usw. bis <h6>. Wenn die Abfolge von <h1> nach <h6> der inhaltlichen Logik entspricht, kann der Nutzer sich anhand der Überschriftenstruktur orientieren und mit Tastaturbefehlen navigieren (z.B. von Überschrift zu Überschrift springen).

Anforderungen an Barrierefreiheit:

  • Seiten sind mit Überschriften gegliedert.
  • Jeder Text, der aussieht wie eine Überschrift, ist auch als HTML-Überschrift ausgezeichnet.
  • Jeder Text, der als HTML-Überschrift ausgezeichnet ist, ist auch tatsächlich eine Überschrift.
  • Die Überschriften-Hierarchie von <h1> bis <h6> entspricht der Logik des Inhalts.

Vertiefende Informationen zum Thema Strukturierung von Textinhalten finden Sie in unserem Leitfaden für Online-Redakteure.

Prüfung:

Rufen Sie mit der Taste F12 das Entwicklerwerkzeug des Browsers (Inspektor) auf. Der HTML-Code wird eingeblendet. Klicken Sie links in der Menüleiste des eingeblendeten Inspektors auf das Auswahlwerkzeug (Icon mit Cursor-Pfeil auf einem Rechteck). Klicken Sie anschließend eine Überschrift an und prüfen Sie, ob sie als <h1> oder <h2> usw. ausgezeichnet ist. Prüfen Sie auch, ob über- und untergeordnete Überschriften mit dem entsprechenden Überschriftenelement ausgezeichnet sind.

Ausschnitt einer Website mit eingeblendetem HTML Code, eine Überschrift der Ebene 2 ist hervorgehoben

Korrekt: Die Überschrift "Zielgruppe erweitern" ist mit <h2> als Überschrift zweiter Ebene ausgezeichnet.

Alternative Prüfung mit Werkzeugen:

Wer nicht den Quellcode prüfen möchte, kann sich auch das Bookmarklet „Inhalte gegliedert“ herunterladen. Es kann die Prüfung erleichtern.

Das Bookmarklet „Inhalte gegliedert“ ist eine von BIK zur Verfügung gestellte Funktion, mit der Sie die Überschriftenelemente auf der Webseite einblenden können. Es funktioniert nur unter Firefox.

Zur Installation, auf der Seite BITV-Test - Bookmarklets, den Link „Inhalte gegliedert“ als Lesezeichen speichern (Rechtsklick auf den Link > Lesezeichen für diesen Link hinzufügen). Nun kann das Bookmarklet aus den Lesezeichen heraus aufgerufen werden.

Über das Browsermenü Lesezeichen > Inhalte gegliedert aufrufen. Links und rechts neben den Überschriften wird das HTML-Element eingeblendet, sofern es im HTML Code steht. Prüfen, ob über- und untergeordnete Überschriften mit dem entsprechenden Überschriftenelement ausgezeichnet sind.

Screenshot einer Website, die Überschriften erster und zweiter Ordnung sind markiert

Der Screenreader gibt bei der h1-Überschrift aus: „Überschrift erster Ordnung, Vorteile von barrierefreiem Internet“. Das Bookmarklet zeigt auch an, ob Absätze korrekt mit dem p-Element ausgezeichnet sind.

Kontraste

Wenn sich Vordergrund- und Hintergrundfarbe in der Helligkeit ähneln, haben sie unter Umständen zu wenig Kontrast und seheingeschränkte Menschen können Texte und Grafiken nicht mehr lesen. Schwierig ist beispielsweise hellgraue oder gelbe Schrift auf weißem Hintergrund. Guter Kontrast hilft nicht nur Menschen mit Sehschwäche, er ist für alle ein Plus an Nutzerfreundlichkeit, etwa beim Surfen in der blendenden Sonne.

Der Colour Contrast Analyserzeigt bei hellgrauem Text auf weißem Hintergrund ein Kontrastverhältnis von 2,26:1 an.

Der Colour Contrast Analyser zeigt bei hellgrauem Text auf weißem Hintergrund ein Kontrastverhältnis von 2,26:1 an. Dieser Kontrast wäre nicht ausreichend.

Anforderung an Barrierefreiheit:

Der Kontrast von Text zu Hintergrund sollte über 4,5:1 liegen.

Prüfung:

Der Color Contrast Analyser ist ein Werkzeug, mit dem Sie die Kontraste messen können. Der Download und die Installation der 2,5 MB großen Desktop-App dauern nur etwa 1 Minute. Hilfreich ist es, das Programm auf der Taskleiste zu fixieren.

Rufen Sie den Color Contrast Analyser auf. Es erscheint ein kleines Fenster. Wählen Sie im Bereich „Foreground“ mit der Pipette die Vordergrundfarbe aus (z.B. eines Textes oder Icons), dann im Bereich Background die Hintergrundfarbe. Das Kontrastverhältnis (contrast ratio), das die Software nun automatisch ausgibt, sollte über 4,5:1 liegen, damit die Barrierefreiheits-Anforderung erfüllt ist.

Der Colour Contrast Analyser zeigt bei dunkelrotem Text auf hellgrauem Hintergrund ein Kontrastverhältnis von 5,68:1 an.

Der Colour Contrast Analyser zeigt bei dunkelrotem Text auf hellgrauem Hintergrund ein Kontrastverhältnis von 5,68:1 an. Dieser Kontrast ist ausreichend.

Vergrößerbarkeit

Der Inhalt von Webseiten lässt sich vergrößern, etwa mit der Zoom-Funktion des Browsers. Damit kann der Webseiteninhalt entsprechend der individuellen Seh-Bedürfnisse eingestellt werden. Für Menschen mit Seheinschränkungen ist das elementar. Durch das Vergrößern darf es jedoch weder zu Überlappungen noch zu abgeschnittenen Inhalten kommen.

Anforderungen an Barrierefreiheit

  • Jeder Text wird vergrößert.
  • Text verschwindet nicht oder wird abgeschnitten.
  • Es kommt nicht zu Überlappungen.
  • Alle Buttons, Formularelemente sind sichtbar und nutzbar.

Prüfung:

Zoomen Sie Ihre Webseite auf 200%, indem Sie sechs Mal die Tastenkombination Strg + drücken. Wird alles vergrößert dargestellt? Gibt es keine Überlappungen? Bleibt die Seite vollständig nutzbar?

Falls sich durch das Vergrößern keine einspaltige (die sogenannte responsive) Ansicht ergibt, sondern rechts und unten ein Scrollbalken erscheint, ist das zwar weniger nutzerfreundlich, aber aus Sicht der Barrierefreiheit in Ordnung.

Ausschnitt der Webseite BIK für Alle bei Zoom auf 200%

Bei Zoom auf 200% wird die BIK-für-Alle-Webseite einspaltig und die Inhalte bleiben lesbar.

Tastaturbedienbarkeit und Tastaturfokus

Nicht alle Menschen können mit der Computermaus arbeiten. So sind z.B. blinde Menschen und Menschen mit Einschränkungen in der Handmotorik, darauf angewiesen, dass sie eine Webseite mit der Tastatur bedienen können. Für den Einsatz von assistiven Technologien, wie Sprachaus- oder -eingabe ist die Tastaturbedienbarkeit eine grundlegende Voraussetzung.

Eng verbunden mit der Tastaturbedienbarkeit ist der Tastaturfokus. Jeder kennt den Mausfokus: Meist reagieren Bedienelemente bei Fokussierung, d.h. wenn man mit der Maus über einen Link oder Button fährt, mit einer Hervorhebung. Diese oder eine andere Art der Hervorhebung sollte auch bei Tastaturbedienung vorhanden sein. Der Nutzer kann so auf der Seite navigieren, er behält die Orientierung, weiß wo er ist und kann Aktionen gezielt durchführen.

Anforderungen an Barrierefreiheit:

  • Alle Links, Buttons (beispielsweise auch die Bedienelemente eines Mediaelements) und Formularelemente sind auch mit der Tastatur erreich- und bedienbar.
  • Der Fokus ist immer sichtbar.

Prüfung:

Alles erreichbar: Klicken Sie in die Adressleiste des Webangebots und legen Sie die Maus beiseite. Navigieren Sie nun durch die Webseite, indem Sie die Tabulatortaste (TAB) drücken (bzw. die Tastenkombination TAB+Hochstelltaste, um rückwärts zu tabben). Weitere interaktive Elemente sind mit folgenden Tasten bzw. Tastenkombinationen nutzbar:

  • Link: Aktivierung mit Enter
  • Button: Aktivierung mit Enter bzw. Leertaste
  • Checkbox: Aktivierung/Deaktivierung mit der Leertaste
  • Radio Button: Auswahl mit den Pfeiltasten
  • Select (Auswahl-Liste): Auswahl der Option mit den Pfeiltasten, Ausklappen mit der Leertaste oder alt+Pfeil nach unten

Sind alle Links und Formularelemente erreich- und bedienbar? Achten Sie insbesondere auf Auswahl-Listen, diese sollten Sie mit der Pfeiltaste durchwandern können, ohne dass dadurch eine Aktion durchgeführt wird.

TAB-Reihenfolge: Prüfen Sie, ob die Reihenfolge, in der Sie durch die Seite tabben, logisch ist. Sie sollten dabei nicht hin- und herspringen und die Orientierung verlieren.

Fokus: Prüfen Sie, ob der Tastaturfokus deutlich sichtbar ist. Das ist der Fall, wenn Sie immer (aufgrund einer grafischen Hervorhebung) wissen, welches Element sie gerade aktivieren würden. Hervorhebungen sind zum Beispiel ein Farbwechsel, eine Unterstreichung, Fettung oder Umrandung.

Können Sie per Tastatur nicht durch Ihr Webangebot navigieren? Dann haben Sie wahrscheinlich gerade eine elementare Zugänglichkeitsbarriere gefunden.

Hinweis: Falls Sie mit einem Mac arbeiten, aktivieren sie vorab die Tastatursteuerung in den Systemeinstellungen.

Ausschnitt der Webseite BIK für Alle, der fokussierte Link "mehr" ist rot umrandet

Die rote Umrandung zeigt dem Tastaturnutzer, was er fokussiert, wenn er durch die Seite tabbt. Auch Farbwechsel, Unterstreichungen oder Fettungen wären eine geeignete Hervorhebung.

Formulare

Oft finden sich in Webangeboten Formularfelder (z.B. eine Suche) oder ganze Formulare (z.B. Kontaktformulare). Damit der Nutzer weiß, welche Eingabe beim jeweiligen Formularfeld erwartet wird, gibt es in der Regel eine sichtbare Beschriftung, die links neben oder über dem Eingabefeld steht.

Screenshot eines Formularfeldes mit der Beschriftung Name

Die Beschriftung vermittelt dem Nutzer, welche Eingaben gemacht werden sollen.

Wenn die Beschriftung (im oberen Beispiel: „Name“) im HTML-Code richtig ausgezeichnet ist, können Nutzer damit interagieren, unabhängig davon, ob sie die Tastatur, eine Spracheingabe oder einen Screenreader nutzen.
Ein weiterer Vorteil: Die Beschriftung selbst wird klickbar und der Cursor springt automatisch in das dazugehörige Eingabefeld bzw. Checkboxen oder Radiobuttons werden aktiviert. Das erleichtert die Bedienung, denn die Klickfläche ist größer.

Anforderungen an Barrierefreiheit:

  • Formularfelder haben sichtbare Beschriftungen (Ausnahmen kann es geben, z.B. bei einfachen Suche-Formularfeldern, die einen beschrifteten Button haben).
  • Die Beschriftungen sind mit dem Formularfeld verknüpft (d.h. die Beschriftung ist klickbar, der Cursor springt z.B. in das Feld oder ein Kontrollelement (Checkbox, Radiobutton) wird aktiviert. Gleichzeitig liest der Screenreader bei Fokussierung eines Feldes die entsprechende Beschriftung vor.

Prüfung:

Klicken Sie auf die Beschriftung von Formularelementen (Texteingabefelder, Checkboxen, Radiobuttons). Springt der Cursor in das Feld bzw. werden Checkboxen, Radiobuttons dadurch aktiviert?

Screenshot eines Formularfeldes, der Mauszeiger befindet sich über der Beschriftung

Bei Klick auf die Beschriftung "Name" springt der Cursor in das verknüpfte Formularfeld.

Alternative Prüfung des Quellcodes:

Wer genauer wissen will, wie das Formular umgesetzt ist, kann auch den HTML-Code prüfen.

Rufen Sie mit der Taste F12 das Entwicklerwerkzeug des Browsers (Inspektor) auf. Der HTML-Code wird dadurch eingeblendet. Klicken Sie links in der Menüleiste des eingeblendeten Inspektors auf das Auswahlwerkzeug (Icon mit Cursor-Pfeil auf einem Rechteck):

Beschriftung ansehen: Wählen Sie mit dem Auswahlwerkzeug eine Beschriftung innerhalb des Formulars aus, z.B. Name, und betrachten Sie den blau hervorgehobenen HTML-Code: Ist das label-Element mit dem for-Attribut (<label for=“ctrl_12“...>) zu finden?

Eingabefeld ansehen: Wählen Sie nun mit dem Auswahlwerkzeug das dazugehörige Eingabefeld (<input>) aus und suchen Sie dessen ID: Im Code steht dann beispielsweise <input id=“ctrl_12“...>.

Korrekte Verknüpfung prüfen: Die Verknüpfung ist dann korrekt wenn die ID des input-Elments dem Wert des for-Attributs (also das was innerhalb der Anführungszeichen steht), entspricht, d.h. <label for=“ctrl_12“...> und <input id=“ctrl_12“...> vergleichen.

Formularfeld mit eingeblendetem HTML Code, die ID des Formularfeldes ist hervorgehoben.

Wenn Eingabefeld und Beschriftung korrekt verknüpft sind, wird die Beschriftung vom Screenreader vorgelesen, sobald das Feld fokussiert wird.

Bewegte Inhalte

Blinkende oder sich bewegende Elemente, etwa Karussells, Nachrichten-Ticker, wackelnde Werbebanner oder ein automatisch startendes Video machen vor allem Nutzern mit Aufmerksamkeitsdefiziten oder Verarbeitungsstörungen Schwierigkeiten: Sie lenken ab, stören die Wahrnehmung oder lassen nicht genug Zeit, um zu lesen. Daher muss es eine Möglichkeit geben, bewegte Inhalte anzuhalten.

Anforderungen an Barrierefreiheit:

  • Bewegte Inhalte (z.B. ein animiertes Karussell mit wechselnden Teasern) sind nicht vorhanden oder die Bewegung endet nach 5 Sekunden.
  • Endet die Bewegung nicht nach 5 Sekunden, gibt es ein Bedienelement, um die Bewegung zu stoppen.

Prüfung:

Untersuchen Sie das Webangebot hinsichtlich Inhalten, die automatisch wechseln, z.B. animierte Bilder, Karussells, Ticker oder Werbebanner. Falls es bewegte Inhalte gibt, können diese mit der Maus und mit der Tastatur angehalten werden?

Screenshot von einem Bilderkarussell, die Schaltfläche Pause ist hervorgehoben

Das Bilderkarussell lässt sich über einen Pause-Button anhalten.

Videos mit Untertitelung

Informationen, die über Audio (z.B. in einem eingebetteten Video) vermittelt werden, sind für Menschen mit Höreinschränkungen nicht verfügbar. Sie benötigen als Alternative eine Untertitelung.

Die Untertitelung ist entweder „offen“, d.h. immer am unteren Rand des Videobildes sichtbar, oder über einen Untertitel-Button auf der Bedienleiste des Players ein- und ausblendbar.

Automatisch erzeugte Untertitel, wie sie z.B. YouTube anbietet, sind in der Regel nicht ausreichend, sie müssen nachbearbeitet werden. Dies kann bei YouTube im Videomanager geschehen.

Vertiefende Informationen zum Thema Untertitelung und speziell zu Untertitelung mit YouTube finden Sie in unserem Leitfaden für barrierefreie Videos.

Anforderung an die Barrierefreiheit:

  • Untertitel erscheinen synchron zum gesprochenen Text.
  • Die Sprecher werden im Untertitel genannt.
  • Wichtige Geräusche werden genannt.

Prüfung:

Wenn keine Untertitel sichtbar sind, prüfen Sie, ob es einen Untertitel-Button gibt, über den Sie die Untertitel einblenden können. Falls nein, gibt es keine Untertitelung. Falls ja, schauen Sie sich eine kurze Sequenz des Videos mit Untertiteln an, um festzustellen, ob die Untertitel dem hörbaren Inhalt entsprechen.

YouTube Player mit eingeblendetem Untertitel und Bedienleiste, die UT-Schaltfläche ist hervorgehoben

Beim YouTube-Player gibt es ein Bedienelement, über das die Untertitelung eingeblendet werden kann.

Lesereihenfolge

Webseiten sind häufig in mehrere Spalten und Bereiche gegliedert. Es werden Gestaltungsmittel eingesetzt, die sehenden Nutzern helfen, sich auf der Seite zu orientieren. Ein gutes Layout hilft, sich die vielfältigen Informationen eines Webangebots zu erschließen. Doch nicht alle Webseitenbesucher nutzen das Angebot im Standard-Layout: Screenreader lesen die Elemente, die auf dem Bildschirm in der Fläche angeordnet sind, linearisiert, d.h. nacheinander vor – und zwar in der Reihenfolge, in der sie im Quellcode stehen.

Anforderung an Barrierefreiheit:

Seiteninhalte sollen unabhängig von der Darstellung in einer sinnvollen und brauchbaren Reihenfolge stehen. Die Reihenfolge der Elemente im Quellcode muss also gut verständlich und nutzbar sein. Was inhaltlich zusammengehört (etwa eine Überschrift und die dazugehörigen Inhalte darunter) soll in der Ansicht ohne Sylesheets nicht auseinandergerissen werden.

Prüfung:

Die Web Developer Toolbar ist eine Browser-Erweiterung, u.a. für Firefox, und kann die Prüfung erleichtern. Um die Toolbar zu installieren, wählen Sie auf der Seite Web Developer (Add-ons für Firefox) die Schaltfläche „Zu Firefox hinzufügen“ und starten Sie den Browser neu. Neben der Titelleiste des Browser erscheint dann das Web Developer-Icon (aktuell: graues Zahnrad).

Rufen Sie eine Seite in Ihrem Webangebot auf und betrachten Sie sie in ihrem Standard-Layout. Schalten Sie dann alle Sylesheets aus, indem Sie mithilfe der Toolbar die Funktion CSS >Alle Stile deaktivieren auswählen. Nun sehen Sie die Webseite linearisiert, ohne Gestaltung.

Bleibt die Reihenfolge der Inhalte der Seite auch nach Abschalten der CSS weiterhin logisch oder ist die Reihenfolge der Inhalte verwirrend?

Screenshot BIK für Alle mit eingeschalteten Stylesheets

Die Website BIK für Alle im Standard-Layout

Screenshot BIK für Alle mit ausgeschaltenen Stylesheets

Mit Hilfe der Web Developer Toolbar kann die Website ohne CSS dargestellt werden.

Alle Checks bestanden? Oder Barrieren gefunden?

Sind bei dem geprüften Webangebot alle Barrierefreiheits-Anforderungen der Easy Checks erfüllt? Oder haben Sie Barrieren gefunden?

  • Keine Barriere gefunden: Gratulation – doch gehen Sie auf Nummer sicher. Denn mit den Easy Checks decken Sie nur einen kleinen Teil aller Barrierefreiheits-Anforderungen ab. Wenn Sie belastbare Ergebnisse haben möchten, nutzen Sie zur Status-quo-Analyse die Selbstbewertung oder beauftragen Sie einen Expertentest. Erst dann kann sicher beurteilt werden, wie es um die Barrierefreiheit steht.
  • Barrieren gefunden: Problemlage wahrgenommen – auch hierzu gratulieren wir! Denn damit haben Sie einen ersten und wichtigen Schritt in Richtung Barrierefreiheit getan. Wie es nun weitergehen kann, erfahren Sie in unserem Leitfaden für Webseiten-Anbieter.