Super XS: Die Barrierefrei-Checkliste

von Heike Edinger & Timo Wirth / 29. Mai 2007 /

Jump and Run-Klassiker Super Mario Bros Es gibt zwar keine Prinzessin zu retten, aber das Abenteuer hat's trotzdem in sich. Du läufst durch eine bunte, digitale Welt und sollst den universellen Zugang zu deiner Website finden. Es gibt 24 Hindernisse. Bereit?

Halt, warte. Eins noch. Ein paar verrückte Level haben’s in sich. Vergiss nicht: “Game Over” gehört dazu. Lass dich also nicht unterkriegen und versuch es nochmal von vorne.

Überschriften

Die Hauptinformationen der Seite sind mit h-Elementen ausgezeichnet. Stell Dir die Website als Zeitung am Kiosk vor. Was sind die besten Schlagzeilen?
Testen:
Bookmarklet x-ray markup
Firefox Webdeveloper-Toolbar: Outline > Headings

Nicht nur Überschriften sind Überschriften (gerade geschafft). Jetzt ist das komplette Markup an der Reihe.

Markup

Es werden immer die HTML-Elemente benutzt, die den Inhalt am besten beschreiben. Listen sind als Listen markiert, Textabschnitte als Textabschnitte. Bedeutsame HTML-Elemente — wie <ul>, <p>, <dl>, <em> — werden neutralen Elementen — wie <span> — und <div> vorgezogen.
Testen:
Bookmarklet x-ray markup

Trennung von Inhalt und Design

Das HTML strukturiert die Inhalte. Das Stylesheet formt und gestaltet sie. Beim Abstellen der Stylesheets werden die Inhalte roh und ohne Layout dargestellt (alle dekorativen Elemente sind verschwunden). Übrig bleiben Standard-Formatierungen für Überschriften, Listen, Textabschnitte etc. Inline-Style-Angaben sind, bis auf Ausnahmen, zu vermeiden.
Testen:
Firefox Webdeveloper-Toolbar: CSS > Disable Styles > All Styles
Testen, ob Inline-Styles vorkommen:
Firefox Webdeveloper-Toolbar: CSS > Disable Styles > Inline Style

Bonus-Level: Layout-Tabellen

Tabellen werden nicht zum Layouten verwendet.
Testen:
Firefox Webdeveloper-Toolbar: Outline > Tables > Table Cells
Firefox Webdeveloper-Toolbar: CSS > Disable Styles > All Styles
Jetzt müssen alle Inhalte untereinander stehen. Wenn sie nebeneinander stehen, werden Tabellen zum Layouten verwendet. Aber: Nicht alle Tabellen sind böse.

Skip-Link

Es gibt einen Link “Direkt zum Inhalt” und zwar gleich am Anfang der Seite. Nicht übertreiben: Ein Link zum Inhalt und ggf. zur Suche oder zur Hauptnavigation reicht völlig.
Testen:
Firefox Webdeveloper-Toolbar: CSS > Disable Styles > All Styles

Teaser / Promoboxen

Überschriften von Teasern, Promoboxen oder Anreißern sind verlinkt. Es ist für Google-Roboter, Maus- und Screenreader-Nutzer der leichteste Weg zum Inhalt. Versperr ihn also nicht.
Testen:
Völlig ohne Tools: Auf die Überschriften der Teaser klicken.

Link-Kennzeichnung

Links können leicht von nicht-verlinktem Text unterschieden werden.
Testen:
2 Meter vom Bildschirm wegstellen: Ist jetzt klar zu erkennen, welche Wörter verlinkt sind?

Mehr-Links

Links sind aus sich heraus verständlich getextet. Es werden keine oder barrierefreie Mehr-Links verwendet. Mehr-Links sind außerhalb ihres Kontexts nicht verstehbar. Sowieso: Immer auch die dazugehörige Überschrift verlinken (aber den Level haben wir ja schon geschafft).
Testen:
Firefox Webdeveloper-Toolbar: CSS > Disable Styles > All Styles
Sind die Mehr-Links barrierefrei, steht jetzt der Titel des Textes nach dem Mehr-Link.

Bonus-Level: Hier klicken

Links wie “finden Sie hier” oder “hier klicken” gibt es hier nicht. Sie sind schlecht formuliert und sinnlos für Screenreader und Google.
Testen:
Alle Seiten nach “hier”-Links durchsuchen.

Download-Links

Wichtige Angaben wie Dateityp (pdf, ppt, …) und Dateigröße sind mitverlinkt. Sie stehen nicht unverlinkt hinter dem Link.
Testen:
Kein Tool für diesen Punkt. Seiten mit Download-Links begutachten.

Visited Links

Besuchte Links unterscheiden sich von nicht-besuchten Links. Ausnahmen: Zentrale Navigationsmenüs oder Funktionslinks.
Testen:
Firefox Webdeveloper-Toolbar: Miscellaneous > Visited Links

Navigieren per Tastatur

Alle Links und Formularfelder können per Tastatur angesteuert werden. Mit a:focus wird der Tastatur-Standort deutlich hervorgehoben — gleicher Effekt wie beim Darüberfahren mit der Maus (a:hover).
Testen:
Maus ausstecken und per Tab und Enter navigieren.

Title-Texte

Title-Texte wiederholen nicht den Link-Text. Title-Texte sind Zusatzinformationen. Sind keine Zusatzinformationen notwendig, können sie weggelassen werden. Sind die Informationen sehr wichtig, sollten sie im Link-Text nicht im Title-Text stehen (z.B. die Dateigröße von Downloads).
Testen:
Mit der Maus über Textlinks fahren.

Tabellen

Informationstabellen (Sportergebnisse, Fahrpläne, Warenkörbe etc.) sind mit Tabellenköpfen (th-Element) versehen. (Können mit der Off-Screen-Methode ausgeblendet werden.)
Testen:
Im Browser die Tabelle markieren und Auswahl Quelltext anzeigen wählen. Im Quelltext nachschauen, ob th-Elemente vorkommen.

Als Powerup Kaffee holen.

Bilder

Alle inhaltlich relevanten Bilder haben einen kurzen, informativen Alternativ-Text. Formulierungen wie “Das Bild zeigt” werden nicht verwendet. Dekorative Bilder oder reine Stimmungsbilder haben keinen Alt-Text oder (besser) sind per CSS eingebunden.
Testen:
Firefox Webdeveloper-Toolbar: Images > Replace All Images With Alt-Attributes

Schriftvergrößerung

Das Layout macht in allen Browsern eine 2-fache Schriftvergrößerung mit. Kein Text wird abgeschnitten, nichts wird überlagert.
Testen:
Firefox: Ansicht > Textgröße > vergrößern
Internet Explorer: Ansicht > Schriftgröße > sehr groß (Wenn sich im IE nichts tut, ist die Schriftgröße in Pixeln definiert.)

Hierarchie

Nicht alles ist gleich wichtig. Das Design setzt visuell klare Schwerpunkte und strukturiert die Seite.
Testen:
2 Meter vom Bildschirm wegstellen: Ist jetzt auf einen Blick zu erkennen …

Welche sind die wichtigste Informationen auf der Seite?
Welche Elemente gehören zusammen?
Welche Informationen sind eher untergeordnet?

Formulare

Alle Formularfelder sind mit einem label-Element eindeutig beschriftet. Radiobuttons und Checkboxen werden durch ein <fieldset> gruppiert und mit einer <legend> betitelt.
Testen:
Firefox Webdeveloper-Toolbar: Forms > Display Form Details
Bookmarklet xray accessibility

Farbkontrast

Texte und Links heben sich deutlich vom Hintergrund ab und sind klar lesbar. (Auch auf Visited Links achten.)
Testen:
Firefox Add-on Colour Contrast Analyzer: All Tests ( Brightness > 120 & Colour > 400)

Schriftgröße

Der Fließtext ist größer als (umgerechnet) 10px. Im 21. Jahrhundert haben Monitore eine höhere Auflösung als 800×600. Wird also endlich Zeit, sich von dieser — immer noch weit verbreiteten — Design-Gewohnheit aus den 90er Jahren zu verabschieden.
(Hey, nicht in die Pixel-Röhre da hinten springen, die führt zurück zum Level Schriftvergrößerung.)
Testen:
Firefox Add-on: CSS Viewer

Linearisierung

Ohne Stylesheets sind alle Inhalte in linearer Reihenfolge verstehbar. Beispiele: Ein Inhaltsverzeichnis, das mit Stylesheets neben dem Text stand, steht im Markup vor dem Text und nicht darunter. Oder: Erläuterungen zu einem Formularfeld stehen vor dem Formularfeld und nicht danach.
Testen:
Firefox Webdeveloper-Toolbar: CSS > Disable Styles > All Styles

JavaScript

Alle Inhalte sind auch ohne JavaScript zugänglich. JavaScript-Funktionen, die die User Experience verbessern (Type Ahead, Show/Hide etc.), haben ein Fallback für Nutzer ohne Javascript (Unobtrusive JavaScript-Techniken verwenden). Ist JavaScript deaktiviert, bleiben keine unbrauchbaren Interface-Elemente übrig (z.B. Aufklapp-Links oder Karteireiter, die nicht funktionieren).
Testen:
Firefox Webdeveloper-Toolbar: Disable > JavaScript > All JavaScript

Hintergrundbilder

Wenn Hintergrundbilder nicht geladen werden, bleiben Texte und Navigationselemente weiterhin lesbar. Als Fallback ist eine Hintergrundfarbe definiert.
Testen:
Firefox Webdeveloper-Toolbar: Images > Hide Background Images

Klickflächen

Klickflächen sind hinreichend groß. Links stehen nicht zu dicht zusammen.
Testen:

Kein Tool, mit der Maus testen
Besonders harter Test: Surfen mit einem fremdem Touchpad oder TrackPoint
Besonders achten auf: Navigationsmenüs und Paging-Navigation

Tools zum Testen

Andere Checklisten und Hintergrundwissen

Wichtig: Lies bitte die Spielanleitung und die Gesundheits- und Sicherheitshinweise durch, bevor du das System in Betrieb nimmt. Der Verpackung liegen keine Garantieinformationen bei.

Du bist das Spiel

Was ist mit deinen Lieblingsleveln? “Super XS” steht unter Creative-Commons-Lizenz und ist offen für Bonus-Level, Remixes, Mods und Add-ons. Worauf wartest du?

[...] Weil ich dieses Game für eine grossartige Erfindung halte, und gern mitspiele, hab ich hier ein Bonuslevel gebastelt: [...]

Pingback von » Bonuslevel für Super XS « Trash Log Blog Archive — 30.05.2007, 01:10 Uhr
Kompliment, klasse Auflistung!

Comment von Webstandard-Team — 30.05.2007, 07:28 Uhr
[...] Super XS: Die Barrierefrei-Checkliste [...]

Pingback von Super XS, das Webstandards-Game | Sascha Goebels WebLog — 30.05.2007, 08:21 Uhr
Hallo und danke für den prima zusammengestellten Artikel. Besonders schön finde ich, dass immer gleich dabei steht, wie man den jeweiligen Punkt am Besten überprüft.

Ich habe da aber auch noch eine Frage: Ihr hab hier die Artikel-Überschrift als h1 markiert. Andere geben den Tipp, dass die Überschrift des Dokuments der Seitentitel ist und deswegen h1 sein sollte.

In diesem Fall wäre
h1=Vorsprung durch Webstandards
h2=Super XS: Die Barrierefrei-Checkliste

Dagegen sind bei Euch die Überschriften der Blöcke an der rechten Seite h3-Überschriften - die sind ja aber eigentlich keine Inhalte. Deswegen, so habe ich gelesen, sollte man die Blöcke und ihre Überschriften nicht mit h-Tags markieren.

Was meint ihr dazu?

Comment von Herr Voß — 30.05.2007, 09:51 Uhr
Sehr schöne liste, die m.E. aber kleinere Schönheitsfehler enthält. Vielleicht versteh ich es aber auch nur falsch.

Natürlich können (theoretisch) Inhalte auch ohne Tabellen noch nebeneinander auf der Seite stehen. Zum Beispiel durch “float:xy” oder “display:table(-cell/-row, …)”.

Beim Title-Attribut für Links geb ich Dir prinzipiell recht. Aus SEO Sicht ist aber sicherlich auch ein Title der den Linktext wiederholt von Bedeutung (evtl. in leicht abgeänderter Form). Aber SEO steht ja desöfteren mal nicht im Einklang mit guter Accessibility, das ist ja nichts Neues.

Über die “Stimmungsbilder”, wie Du sie nennst, lässt sich ebenfalls streiten glaube ich. Korrekt wäre es wohl, diese per <img> (ohne Alt oder Title Attr.) in den Content zu packen, denn auch wenn sie keinen kontextuellen Bezug haben, so sind sie immer noch Inhalt eines Dokuments, und kein wirkliches Layout-Element. Das würde, hättest Du nicht “bis auf Ausnahmen” dort stehen, sogar mit Level 3 (”Inline-Style-Angaben [...] sind zu vermeiden”) kollidieren. Denn nur für eine einzelne Seite eine Klasse im Stylesheet zu definieren wäre ja der totale Overkill.

Nichts desto trotz, sehr gute Liste!

Comment von Manuel — 30.05.2007, 10:20 Uhr
achso, zum Thema Linearisierung:
Firefox: Webdeveloper -> Miscellaneous -> Linearize Page

Comment von Manuel — 30.05.2007, 10:21 Uhr
Barrierefreiheit, spielerisch

Die Einhaltung von Webstandards wie HTML und CSS ist nur die halbe Miete beim Aufbau einer Internetseite. Die sinnvolle Strukturierung des HTMLs und die durchdachte Navigation ist mindestens ebenso wichtig, wenn man nicht von vorne herein Benutzer auss…

Trackback von Kaffeeringe.de - Internet & Kreativität — 30.05.2007, 11:23 Uhr
[...] Heike Edinger und Timo Wirth schreiben in meinen Augen viel zu selten auf ihrer Seite “Vorsprung durch Webstandards“. Zum Glück erinnern sich sie sich hin und wieder an ihre Webseite und schreiben mal wieder was. Diesmal haben sie sich der Überprüfung auf Barrierefreiheit gewidmet. In knappen Erklärungen und Testhinweisen handeln sie alle wichtigen Aspekte ab. Das ganze an ein fiktives Computerspiel (SuperXS) anzulehnen ist zwar unwichtig, aber nett und lockert das Thema auf. Ein sehr schöner, leicht verständlicher Ansatz. Weiter so! [...]

Pingback von F-LOG-GE » Blog Archive » SuperXS - Überprüfung auf Barrierefreiheit mal spielerisch vermittelt — 30.05.2007, 12:26 Uhr
Barrierefrei-Checkliste als Jump’n’Run-Abenteuer

Auf Vorsprung durch Webstandards stellen Heike Erdinger und Timo Wirth eine Barrierefrei-Checkliste in Form eines Jump’n’Run-Abenteuers vor. Das Gute: Es werden nicht nur in unterhaltsamer Form die zu beachtenden Punkte aufgezeigt, sondern die b…

Trackback von ononlinework — 30.05.2007, 13:23 Uhr
[...] In eine Art Spiel stecken Heike Edinger & Timo Wirth 24 Informationen, auf die man bei der Erstellung von barrierefreien Webseiten achten muss. Bei diesem Spiel, welches den Namen “SuperXS” trägt, gilt es diese 24 Hindernisse zu überwältigen und so das Tor zur Barrierefreiheit zu öffnen. Du bist das Spiel Was ist mit deinen Lieblingsleveln? “Super XS” steht unter Creative-Commons-Lizenz und ist offen für Bonus-Level, Remixes, Mods und Add-ons. Worauf wartest du? [...]

Pingback von Wichtige Aspekte für Barrierefreiheit at Gedankeneimer — 30.05.2007, 13:40 Uhr
24 Schritte zur besseren barrierefreien Webseite

Super XS: In 24 Stufen geben Heike Edinger und Timo Wirth Tipps zur besseren barrierefreien Webseite. In der Barrierefrei-Checkliste nennen sie wichtige Punkte, die auf der eigenen barrierefreien Webseite beachtet werden sollten. “Halt, warte. Ei…

Trackback von Der Korsti bloggt. — 30.05.2007, 17:46 Uhr
Schöne Auflistung! Allerdings möchte ich anmerken das Barrierefreiheit nicht einfach erreicht wird indem man eine Checkliste erfühlt. Nicht zu vergessen sind auch PDFs, Textgestaltung, Logische Folge bei der Navigation mit der Tab-Taste u.a. Kriterien. Die Biene Award Prüfkriterien geben schon einen tieferen Einblick.

Comment von Peter — 31.05.2007, 15:01 Uhr
Mensch Peter, jetzt sei mal kein Spielverderber ;-) Du hast natürlich absolut recht, dass Barrierefreiheit - genauso wie Usability - nicht einfach bürokratisch per Checkliste abgehakt werden kann. Vielleicht hast du Spaß mit diesem Text: Accessibility nach Vorschrift: Wenn Web-Entwickler zu Bürokraten werden.

Comment von timo — 31.05.2007, 16:54 Uhr
[...] Die Super XS-Barrierefrei-Checkliste von Heike Edinger und Timo Wirth hilft bei der Entwicklung der eigenen Webseite: Lesen, Prüfen, Verbessern [...]

Pingback von Technikwürze » Technikwürze 75 - Zu Besuch bei sevenload — 04.06.2007, 00:04 Uhr
[...] Super XS, das Webstandards-Game - 24 Level für eine Standartkonforme Webseite [...]

Pingback von Kurz und schmerzlos #4 | Stereobit Blog — 06.06.2007, 10:25 Uhr
[...] Vorsprung durch Webstandards | Super XS: Die Barrierefrei-Checkliste (tags: webstandards accessibility usability webdesign barrierefreiheit css cheatsheet checklist) [...]

Pingback von ELBVIEW » Blog Archiv » links for 2007-06-07 — 07.06.2007, 12:01 Uhr
[...] Super XS: Die Barrierefrei-Checkliste [...]

Pingback von Web Site Design, Internet Marketing, Ecommerce - ryanj - From the Web Developer’s Wiki - Accessibility — 08.06.2007, 20:23 Uhr
Super XS: Die Barrierefrei-Checkliste

Auf “Vorsprung durch Webstandards” erwscheint am 29. Mai 2007 ein Beitrag zu den Themen Accessibility, Barrierefreiheit und Webstandards:
Es gibt zwar keine Prinzessin zu retten, aber das Abenteuer hat’s trotzdem in sich. Du läufst…

Trackback von ... Kreuterwelt.de — 09.06.2007, 21:56 Uhr
[...] Super XS - Die Barrierefrei-Checkliste [...]

Pingback von nothing blog from outer space : In 24 Schritten zur barrierefreien Website — 20.06.2007, 16:12 Uhr
[...] Super XS: Die Barrierefrei-Checkliste 24 Checkpoints zum barrierefreien Webdesign, zusammengestellt von Heike Edinger und Timo Wirth. [...]

Pingback von Presseschau für Webentwickler - Ausgabe Juli 2007 | Dr. Web Weblog — 09.07.2007, 13:04 Uhr
Schöner Artikel, gefällt mir sehr gut. Aber mir fehlt etwas:

“Tools zum Testen”
Opera Developer Toolbar

Ich gehe mal davon aus, das dieses schicke Game nicht nur mit Firefox spielbar ist.

Comment von Matthias Mauch — 22.07.2007, 18:29 Uhr
[...] Super XS: In 24 Stufen geben Heike Edinger und Timo Wirth Tipps zur besseren barrierefreien Webseite. In der Barrierefrei-Checkliste nennen sie wichtige Punkte, die auf der eigenen barrierefreien Webseite beachtet werden sollten. »Halt, warte. Eins noch. Ein paar verrückte Level haben’s in sich. Vergiss nicht: “Game Over” gehört dazu. Lass dich also nicht unterkriegen und versuch es nochmal von vorne.« Also: Rein ins Vergnügen. [...]

Pingback von 24 Schritte zur besseren barrierefreien Webseite » Der Korsti bloggt — 20.03.2008, 14:08 Uhr
[...] zum selber testen: Artikel „Super XS: Die Barrierefrei-Checkliste” von Vorsprung durch [...]

Pingback von Barrierefreiheit und Zugänglichkeit - Webkrebse Blog — 05.03.2009, 11:15 Uhr