accessCast

Wie schon in der letzten Woche sehen wir uns heute einige Aspekte barrierefreien Webdesigns an, die oft falsch eingesetzt werden. Ebenfalls mit dabei sind einige Barrieren wie mangelnde Skalierbarkeit und unmögliche Tastaturbedienung, die den Anbietern bei genauerem Hinsehen schon längst hätten auffallen müssen. Am Mikrofon heute Manfred »majo« Heinze, Links zum Selberdrücken gibt's wie immer in der Mitschrift.

Fehler № 8: Ungewollte Navigation

Im Netz fällt uns immer wieder auf, dass viele Angebote offensichtlich nur unzureichend getestet werden. Zu einem vollständigen Test gehört nicht nur die Simulation verschiedener Ausgabeformen und variabler Bedingungen; eine brauchbare Prüfung schliesst die Bedienbarkeit des Angebotes ein. Der einfachste Test lässt sich in einem kurzen Satz beschreiben: legen Sie die Maus beiseite. Einfach den Stecker rausziehen und versuchen, ob Sie das gesamte Angebot noch erreichen und bedienen können.

In den Kriterien der BIENE 2006 steht zu diesem Thema:

17. Jegliche Funktion der Seite ist auch über die alleinige Verwendung der Tastatur in einer schlüssigen Reihenfolge zu erreichen, wobei die jeweils ausgewählte Funktion in der Standardansicht gut sichtbar ist.

17.1 Erreichbarkeit über Tastatur

Prüfen Sie, ob alle aktivierbaren Positionen (Links, Navigationselemente, Buttons, Bilder) mit den Standardbelegungen der Tastatur zu erreichen (Tab-Taste, Pfeil-Tasten) und auszulösen sind (Enter-Taste).

Anmerkung: Zur Abwertung führt, wenn durch Navigationsbewegungen Aktionen wie z. B. ein Download ausgeführt werden.

Das Kriterium der schlüssigen Reihenfolge bei Tastaturbedienung ist fast schon von alleine erfüllt, wenn die Entwickler eine saubere Struktur mit den entsprechenden Strukturelementen aufgebaut haben. Dass man diese auch sehr schnell wieder mit dem unbedachten Einsatz von tabindex und accesskey zerstören kann hatten wir ja schon in der zehnten Folge unseres Podcasts besprochen.

Neulich ist uns wieder mal eine Site über den Bildschirm geflimmert, bei der zum Zeitpunkt der Erstellung tabindex eingebaut wurden. Mittlerweile hatte sich die Seite aber geändert und Inhalte sind innerhalb der Seite verschoben worden. Leider wurde vergessen, die Werte der tabindex-Attribute anzupassen – die Navigation per Tab-Taste fühlte sich dann an wie Hüpfekästchen früher auf dem Schulhof.

Unbedienbar werden Angebote, die die Anmerkung am Schluss des BIENE-Prüfschrittes betrifft: ein simples Durch-Tabben der Seite löst Aktionen aus, die der Nutzer nicht beabsichtigt. Gemeint sind Links, die beim Antabben per JavaScript Downloads auslösen, Popups öffnen oder sogar Druck-Dialoge auslösen.

Erreicht wird dies per JavaScript mit onfocus; eine verwandte Technik findet man oft in formularbasierten Navigationen oder Auswahllisten, in denen schon durch den Wechsel der Auswahl mit onchange oder onblur das Formular abgesendet wird. Ein einfacher Test nach der oben beschriebenen Art enthüllt, dass dieses Formular per Tastatur nicht bedienbar ist.

Fehler № 9: Mangelnde Skalierbarkeit

Viele Webangebote sind schon bei geringfügig geänderten Einstellungen nicht mehr zu benutzen. Der Klassiker sind Layouts, die schon bei geringfügiger Änderung durcheinander geraten, oder in denen sich einzelne Inhalte oder sogar ganze Bereiche überlagern, sobald die Einstellungen des Nutzers von der Standardinstallation abweichen.

Häufige Fehlerquellen hierfür sind:

• Die Schriftgrößen sind zwar in relativen Einheiten wie em oder % definiert, die Spalten jedoch in starren Pixeln. Auch das Gerüst der Seiten und damit die Positionierung der Elemente geht von bestimmten Annahmen aus. Surft man nun eine Seite mit größerer Schrift an als der Webdesigner vorgesehen hat kommt es zu Überlagerungen ganzer Inhaltsblöcke und Texte verschwinden hinter anderen Texten.
• Das Layout berücksichtigt nicht, dass per CSS überlange Worte eingepflegt werden, die jedes flexible CSS-Layout zerstören. Webbrowser beherrschen keine Silbentrennung, also umbrechen diese Worte auch nicht und drücken so ihre Container auseinander. Tipp: nehmen sie keine Blindtexte wie den bekannten »Lorem Ipsum … « – die Wortlängen entsprechen einfach nicht der deutschen Sprache. Nehmen Sie deutsche Beispieltexte, um ihre Templates zu testen, nur dann erhalten Sie ein echtes Bild.

So, das war die zwölfte Ausgabe unseres wöchentlichen Podcasts zum Thema barrierefreies Webdesign. Der Dank der Woche geht an Jan Hellbusch, der uns beim Brainstorming geholfen hat. Weitere Meldungen zum Thema der heutigen Sendung finden Sie im Weblog von ›Einfach für Alle‹ unter den Tags HTML, CSS und Navigation; die Links gibt's wie üblich in der Mitschrift.

Wenn es Ihnen gefallen hat hören wir uns nächste Woche wieder.