Webseiten-Infos.de unterstützt Benutzer-Stylesheets besser

Thomas Scholz aka toscho hatte mich in einem Kommentar dankenswerterweise darauf aufmerksam, dass auf Webseiten-Infos.de Benutzer-Stylesheets (User-Stylesheets) mit Mindestschriftgröße missachtet werden (siehe hierzu auch seinen sehr lesenswerten Blogbeitrag „Mythos font-size: 62.5%„).

Insbesondere Menschen mit Sehschwäche verwenden gerne ein Benutzer-Stylesheet (User-Stylesheet) um automatisch Webseiten mit einer für sie gut lesbaren Schriftgröße in ihrem Browser angezeigt zu bekommen.

Probleme bei der Mindestschriftgröße erzeugen für sie eine vermeidbare Zugangsbarriere und schränken die Zugänglichkeit (Accessibility) ein.

Ursächlich für das Problem mit der Mindestschriftgröße auf Webseiten-Infos.de war folgende CSS-Regel, die ich in der CSS-Datei des von mir modifizierten WordPress-Themes YAML Green (Update) hatte:

1
body {fontsize: 75%;}

Um in Ruhe die damit verbundene Anpassungen der Schriftgrößen vornehmen und testen zu können, richtete ich mir ein Testblog mit identischem Layout ein (siehe hierzu den Blogbeitrag „Mit WordPress umziehen“ auf WordPress-Buch.de).

Damit konnte ich dann – ohne das Aussehen von Webseiten-Infos.de zu beeinträchtigen – die oben genannte CSS-Regel entfernen. Stattdessen galt dann die ursprünglich in der slime_base.css und nun am Anfang meiner CSS-Datei stehende CSS-Regel:

1
body {fontsize: 100.01%;}

Anschließend passte ich die Schriftgrößen der anderen Seitenelemente – wie beispielsweise der Überschriften (h1-h6) – an. Dazu musste ich in der Regel die ursprüngliche Größe um ein Viertel reduzieren. Zudem brauchten einige Seitenelemente nun keine eigene Festlegung der Schriftgröße (fontsize) mehr. Bei anderen Seitenelemente musste ich diese dagegen erstmalig definieren.

Ich hoffe sehr, dass damit Webseiten-Infos.de noch barriereärmer (zugänglicher) geworden ist.

Abschließende Hinweise:

  • Die noch immer häufig anzutreffende Empfehlung die Schriftgröße generell mittels body in der CSS-Datei auf 62.5% zwecks leichterer Umrechnung in Pixel (px) festzuschreiben (siehe hierzu beispielsweise den Webdesign-Tipp: Relative Schriftgrößen handhaben), kann negative Auswirkungen auf eine im Benutzer-Stylesheet (User-Stylesheet) festgelegte Mindestschriftgröße haben.
  • Das ist zwar praktisch, da bei den meisten Browsern 62,5% genau 10px entsprechen und sich so relative Schriftgrößen leichter in Pixel (px) und umgekehrt umrechnen lassen. Andererseits aber beeinträchtigt das die Zugänglichkeit (Barrierefreiheit, Accessibility) in inakzeptabler Weise.
  • Im Ergebnis sollte die Ausgangsschriftgröße mittels dem Selektor body mit 100.01% definiert werden, damit oben genannte negative Auswirkungen auf eine Mindestschriftgröße vermieden werden.
  • Das Setzen der Schriftgröße auf 100.01% statt 100% empfiehlt sich übrigens, um Rundungsfehler bei relativen Schriftgrößen (em, Prozent) in den älteren Browsern Internet Explorer 5.x, Opera 6 und Safari 1 zu vermeiden.

Hast Du Fragen, Hinweise, Anmerkungen? Gerne! Dann schreibe einen Kommentar.

2 Kommentare und 2 Trackbacks/Pingbacks

  1. 1. Thomas Weise

    Kommentar vom 7. November 2009 um 11:18

    Ja, ehrlich gesagt habe ich derzeit gar keinen richtigen Plan, wie man nun am Besten die Schriftgrößen im CSS handlen soll…
    mit %, em, px… am Ende wird es ja doch meist eine Mischung von allem. Leider, bei mir zumindest. :(

  2. 2. Dieter

    Kommentar vom 7. November 2009 um 11:36

    @Thomas
    Ich denke, für die Bildschirmdarstellung (@media screen) solltest Du möglichst nur relative Schriftgrößen (em, Prozent) nehmen. Gegen Pixel (px) spricht, dass der Internet Explorer bis einschließlich Version 6 standardmäßig diese nicht skaliert. Es gibt aber auch Webdesigner, die trotzdem Pixel (px) verwenden (siehe hierzu beispielsweise den Blogbeitrag „Pixelgrößen für HTML-Text?“ auf praegnanz.de).

    Für das Drucken (@media print) empfiehlt es sich nach meiner Meinung dagegen möglichst die absolute Maßeinheit Pica Point (pt) zu nutzen.

  3. 3. font-size body jetzt 60% größer | funkygog Blog

    Pingback vom 11. Januar 2010 um 22:27

    […] Benutzer Stylesheets unterstützen Das Setzen der Schriftgröße auf 100.01% statt 100% empfiehlt sich übrigens, um Rundungsfehler bei relativen Schriftgrößen (em, Prozent) in den älteren Browsern zu vermeiden. […]

  4. 4. Der BITV-Selbsttest mit Fragebogen | Webseiten-Infos.de

    Pingback vom 3. Dezember 2011 um 09:13

    […] Die Zugänglichkeit (Accessibility) der Webseiten auf Webseiten-Infos.de liegt mir besonders am Herzen (siehe hierzu den Abschnitt 3. Die Zugänglichkeit (Accessibility) des Artikels “Was macht eine gute Webpräsenz aus?” sowie die Blogbeiträge “Abkürzungen auf Webseiten“, “Skiplinks und Anker einsetzen“, “Zugänglichkeit ohne Accesskeys“, “Tabindex für Kontaktformular“, “Sprachwechsel für Screenreader” und “Webseiten-Infos.de unterstützt Benutzer-Stylesheets besser“). […]

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben

 

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen