Ingo Turski: Barrierefreies Design

Beitrag lesen

Hi,

Schau dir mal Ingos Styleswitcher an. Ist genau das was du suchst.
Ähm, habe grade erst gesehen, dass da gar nichts zu der eigentlichen switch-Technik geschrieben steht

hehe... die ist ja auch nicht Thema der Seite sondern nur Mittel zum Zweck (nicht zig Seiten erstellen zu müssen und zu demonstrieren, daß sich das HTML nicht ändert). Außerdem ist das Script viel zu komplex, da es nicht nur die Styles ändert, sondern auch den angezeigten CSS-Code.

Du wirst eine Programmiertechnik dafür benötigen: Entweder eine serverseitige (wie z.B. php oder perl) oder eine Clientseitige, namentlich Javascript.

Hierzu mein Tip an Dan: Wenn Du mit PHP noch gar keine Erfahrung hast, reicht Javascript auch. Zwar kann Javascript nicht vorausgsetzt werden, aber es handelt sich ja nur um ein für Barrierefreiheit nicht notwendiges Feature - vorausgesetzt, die Schriftgrößen werden in em oder % angegeben und lassen sich dadurch auch im IE skalieren. Einige Seiten definieren die Schriftgrößen aber in px und verwenden einen Styleswitcher (für den IE) als Ersatzlösung - was nun wirklich nicht mehr barrierefrei ist.

Kurz zum grundsätzlichen Prinzip eines Javascript-Styleswitchers (vielleicht schreibe ich ja doch mal einen Artikel darüber?):
1. Es werden Schaltflächen zur Einstellung über Javascript onload ins Dokument geschrieben; dies verhindert, daß diese bei deaktiviertem Javascript sichtbar sind.
2. Bei Auswahl einer Option werden entweder (kleine Lösung) bestimmte Styles umdefiniert, z.B. fontSize für body. Oder es wird (evtl. zusätzlich) ein ergänzendes Stylesheet deaktiviert oder zusätzlich geladen; meine o.g. Seite macht das z.B. so.
3. Damit die Einstellungen nicht nur einmalig vorgenommen werden, sondern sowohl für andere Seiten als auch beim nächsten Besuch noch gelten, werden sie in ein Cookie geschrieben. Dieses Cookie wird dann bei jedem Seitenaufruf abgefragt und die entsprechenden Operationen vorgenommen.

Wirklich zur Barrierefreiheit gehört allerdings

  • eine sinnvolle und gut strukturierte HTML-Auszeichnung
  • ein flexibles Layout in angemessener Schriftgröße und mit ausreichenden Kontrasten über CSS
  • eine klare und übersichtliche Navigation
  • u.v.m.

Dabei würde ich folgende Faustregel sehen: je sparsamer die HTML-Auszeichnung und je einfacher das Layout, desto leichter wird es, dies barrierefrei umzusetzen. Beispiele hierzu sind meine o.g. Seite und natürlich die hier im Kapitel CSS-basierte Layouts angegebenen Beispiele.

freundliche Grüße
Ingo