Zu gern vergessenen Barrieren

möchte ich mal wieder über mein Lieblingsthema referieren: Skalierung. Und in dem Zusammenhang gleich: „Minimale Schriftgrösse im Browser einstellen*“.

Da hockt man sich (als Entwickler) tagelang mit barrierefreien Ambitionen hin, um einer Webseite weitgehend die Barrieren auszutreiben, zieht das Projekt durch zig Validatoren und Check-scripts, denkt, man kann sich zurücklehnen, weil das weitgehend gut aussieht passt und dann – dann komm ich.

Ich stelle mir eine feste minimale Schriftgrösse im Browser ein (die sich von seitenspezifischer Skalierung wie „STRG++“ „oder Ansicht -> Schriftgrösse“ in der Funktionsweise etwas unterscheidet) und weil das hier eine theoretische Abhandlung ist, suche ich mir exemplarisch eine Seite im Netz, deren Autoren es besser wissen müssten, und nehme mir die exemplarisch zur Verdeutlichung des Problems her.
Qualidator.com ist eine Seite ähnlich des demletzt hochgelobten Designministeriums, die Webseiten auf verschiedene Eigenschaften und Barrieren hin testet. Technisch ein etwas eingeschränkt nutzbarer Dienst, trotzdem weitgehend hilfreich, aber darum geht’s hier nicht.
Bei fest eingestellter „Minimaler Schriftgrösse“ treten verschiedene Probleme auf:

  • verschiedene Texte überlagern sich
  • zwei nebeneinander stehende auf der Seite zu findende Tabellen schieben sich – wahrscheinlich aufgrund unglücklich gewählten Floats oder fester Containerhöhen – direkt übereinander. Gar nicht schön sowas: Screenshot Tabelle.
  • gern und viel zu oft gesehen bei solcherlei Spielchen: schwer lesbare, verschobene oder ganz unleserliche/unsichtbare Input-buttonbeschriftungen: Screenshot Button.
  • gern und noch viel öfter gesehen bei solcherlei Spielchen: ein horizontales Menü mit heller Schrift auf dunklem Hintergrund schiebt sich bei Skalierung in die „nächste Zeile“ über den hellen Inhalt. Paradebeispiel hier: weisse Schrift auf weissem Hintergrund: Screenshot Navigation.
    Sowas geht nunmal garnich, ist aber extrem weit verbreitet.

Fazit: Grob über‘n Daumen kann man sagen:

  • Bei hellen Schriften auf dunklem Hintergrund immer auch die Links oder „Einzel“/Kind-Elemente mit einem Hintergrund versehen
  • Elementhöhen immer mit Schrifthöhe und Zeilenhöhe abgleichen
  • Zeilenhöhe muss immer höher sein als die Schriftgrösse
  • Floats und Elementbreiten immer auf (auch extreme) Skalierung prüfen

P.s.: * Minimale Schriftgrösse einstellen:

Seamonkey Bearbeiten -> Einstellungen -> Erscheinungsbild -> Schriftarten
Firefox Extras -> Einstellungen -> Inhalt -> Schriftarten: Erweitert

Beim Internet Explorer und bei Opera sind die Einstellungen nur über Benutzerdefinierte
Stylesheets zu lösen.

Technorati Tags: , ,

13 Kommentare to “Zu gern vergessenen Barrieren”

  1.  soophie schrieb am 03. Sep 2007 um 16:41 zitieren

    danke für diesen Beitrag. ich muss zugeben, dass ich derlei Tests als Entwickler auch gern vergesse, es mir aber zukünftig hinter die Ohren schreiben werde

  2.  Mike® schrieb am 03. Sep 2007 um 22:12 zitieren

    Ich schreib mir gerade das auch immer wieder gern hinter die Ohren, allerdings nur alle 2 Monate 😉

    Das ist irgendwie was, was immer™ wieder vergessen wird.

  3.  BlackVivi schrieb am 04. Sep 2007 um 5:13 zitieren

    Find’s schade, dass sich mit anderen Browsern nich‘ so schön skalieren lässt wie mit Opera… Wenn ich mal etwas nicht lesen kann, hab ich mit Opera noch nie Probleme gehabt mal 10 oder 20% dranzuzoomen.

  4.  Mike® schrieb am 04. Sep 2007 um 14:00 zitieren

    Die Skalierung von Opera (und IE7) finde ich, ist alles andere als Barrierefrei, allerdings hat imho auch FF diese Methode mittlerweile übernommen (oder das kommt erst in 3.x).
    Aber: nicht verwechseln, hier geht’s um fest eingestellte minimale Schriftgrössen, keine prozentuale Skalierung.

  5.  BlackVivi schrieb am 04. Sep 2007 um 15:33 zitieren

    Geht dies‘ unter Opera nicht unter „Extras –> Einstellungen –> Webseiten“ und anschließend auf der untern Hälfte auf die Schriftart klicken und die Schriftgröße erhöhen…? Zumindest ist dann die Schriftgröße auf den meisten Seiten größer und ähnliche Fehler wie oben beschrieben treten auf…

    (Außer das mit dem Button und so)

  6.  Blacker47 schrieb am 04. Sep 2007 um 19:59 zitieren

    Blöde Frage, aber habe ich auch solche Fehler auf meiner Seite?

    Habe das mal kurz getestet und nichts außer bei spy gefunden.

    Bei spy kommen manchmal lange Tabellentexte in Überlagerung mit dem gefloteten Menü-Div. Das passiert auch schon mal bei normalen Schriftgrößen. Ist bekanntes Problem, mit dem ich mich noch nicht wirklich beschäftigt habe.

  7.  Mike® schrieb am 05. Sep 2007 um 0:55 zitieren

    Blackvivi: Jein, erstens gilt das nur für die gerade geöffnete Seite (und dort für alle Zukunft) und zweitens: kann man das hinterher nich abstellen 😮 Zumindest hier bei nem groben Test tut das so und ich mag grad nicht raussuchen, wo das zurückgestellt wird.
    Blacker: Nein, alles ok, bis auf die fürchterlichen Farben!!11eins 😉

  8.  BlackVivi schrieb am 05. Sep 2007 um 16:49 zitieren

    Naaa, Mike… Da irrst du dich und hast falsch geschaut. Das is’ne globale Einstellung keine Seitenspezifische und lässt sich auch ohne Probleme verändern und abstellen… Funktioniert nur nich auf absolut allen Seiten…

    Würd‘ nochmal genau schauen.

  9.  Mike® schrieb am 08. Sep 2007 um 15:00 zitieren

    Blackvivi: ich habe nicht falsch geschaut, sondern oberflächlich, das ist ein kleiner Unterschied 😉
    Ich habe jetzt nochmal geschaut und kann beim besten Willen nicht finden, wie ich das wieder abstellen kann; man kann es umstellen auf einen anderen Wert, das ist allerdings nicht gerade das, was man landläufig „optimal“ nennt.

  10.  Markus Schneider schrieb am 21. Okt 2007 um 18:53 zitieren

    Hallo Mike

    Interessanter Beitrag, danke. Wir testen jeweils die gängisgten Browser, insbesondere auch IE6 mit minimaler und maximaler Schriftgrösse.

    Wir haben vor kurzen eine erste Beta-Version eines neuen Tools publiziert, das Dich vielleicht interessiert. Dein Feedback würde mich interessieren.
    Es hilft einem den Quelltext einer Seite zu optimieren.

    Gruss

    Markus

  11.  Mike® schrieb am 21. Okt 2007 um 20:32 zitieren

    Quelltext optimieren? Das mach ich immer ganz Oldstyle mit Brain 1.0 😀

    Nee, was für‘n Tool meinste konkret? Kann beim flüchtigen Scannen über die Seite nix in der Richtung finden.

  12.  Markus Schneider schrieb am 21. Okt 2007 um 23:27 zitieren

    Link einfügen hat wohl irgendwie nicht geklappt. Hier mal ohne a Tag:
    http://www.qualidator.com/wqm/validator/
    Dann noch ein Versuch mit

    Statt optimieren hätte ich eher schreiben müssen „qualidieren“.

  13.  Mike® schrieb am 22. Okt 2007 um 18:29 zitieren

    Dazu ist nicht sonderlich viel zu sagen.
    Vorweg: ich habe kostenfrei ein paar Anregungen zu Deiner semi-kommerziellen Seite gegeben, da krieg ich ’ne Standardspruchausrede, die ich schon Zillionen Mal gehört hab. Die Screenshots, die ich gemacht habe, sind eigentlich deutlich.
    Mag nicht Dein „Fehler“ sein, vielleicht muss das in so ’nem Umfeld so sein, aber unter sportlich stell ich mir was anderes vor.

    Was das Quältext-dingens betrifft, so kannst Du einen grossen Teil Kritikpunkte/ Stolperfallen in meinem Artikel zum „Designministerium“ nachlesen.

    Im Groben: Ganz brauchbar, nicht wirklich was zum Meckern dabei, aber auch Sachen, die im Einzelfall in Ordnung sind.
    Suboptimal finde ich, dass generell alle Links mit einem Fragezeichen mit „Komplexität der Urls“ „angemeckert“ werden, egal, wie unkomplex die sind. domain.tld/page?blablubb scheint schon zu reichen.

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>