7. November 2009 von Dieter | 3 Kommentare | drucken
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.
Infos
Webseite veröffentlicht am Samstag, den 7. November 2009, um 10:58 Uhr, zuletzt geändert am Samstag, den 7. November 2009, um 10:58 Uhr.
Kategorie: Webdesign
Schlagworte: Benutzer-Stylesheet, body, CSS, fontsize, Mindestschriftgröße, Mythos, Webseiten, YAML Green, Zugänglichkeit
Statistik: 250 Blogbeiträge, 670 Schlagworte, 1,179 Kommentare, 122 Feedleser
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. 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. 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. [...]