 13) einen Schritt in Richtung Barrierefreiheit
Der Begriff Barrierefreiheit im Web beschreibt die Zugänglichkeit eines Angebots für Mensch und Maschine (Robots). Hier behandle ich einen Teilbereich der Problematik: Die Probleme der Menschen mit allgemeiner oder altersbedingter Sehschwäche.
|
|
Lesbarkeit verbessern durch variable Schriftgröße
1 relative Größenangaben für wichtige Texte - einen Schritt in Richtung Barrierefreiheit
In den Browsereinstellungen können Schriftgrößen durch den Seitenbesucher eingestellt werden. Diese Einstellungen der Größenangaben für Texte sind oft nur dann möglich, wenn Größenangaben in relativen Einheiten wie 'em' oder '%' und nicht in festen Einheiten wie pt (Punkte) oder px (Pixel) eingetragen wurden.
Wie wär's als Kompromiss mit einem gesunden Mix? (eingeschränkt einsetzbar)
Nicht jeder hat Adleraugen oder jederzeit eine Computerbrille zur Hand. Deshalb würden ihre Seitenbesucher den Umstand begrüßen, das Schriftgrößen durch Browsereinstellungen verändert werden können! Das funktioniert aber bei absoluten CSS-Größenangaben für Textformatierungen nicht immer (browserabhängig).
Auf der anderen Seite ist der Webmaster wenig erfreut, wenn punktgenaue Berechnungen und sein ausgetüfteltes Design dadurch 'kaputt' gemacht werden. Über lange Zeit gab es einen Mittelweg der für beide, Seitenbesucher und Webmaster akzeptabel war. Meine Erklärungen stammen aus dem Jahr 2005.
2 auf technische Möglichkeiten hinweisen
Weisen Sie Ihre Besucher auf die Möglichkeit hin, die Textgröße mit der STRG-Taste und dem Mausrad zu verändern.
(Möglichkeit zum Download - weiter unten)  Download
Was Sie tun können oder (mittlerweile) auch nicht
Hier hat die Zeit und die damit verbundenen Neuerungen und Updates der Browser meine Ausführungen vom September 2005 wieder einmal überholt! Wenn Sie trotzdem weiterlesen möchten ...
... hier funktioniert mein Vorschlag:
|
Diese Möglichkeit bietet sich ausschließlich in Browsern, die eine solche (siehe links) Schriftgrößenanpassung anbieten!
Wenn Ihre CSS-Angaben für Schriftgrößen Innerhalb ihrer Seiten mit festen Werten (z.B. px oder pt) definiert wurden, hat eine Umschaltung auf die vom Browser angebotene Anpassung (Größer, Mittel, Kleiner, ...) keine Auswirkung.
Für Texte, dern CSS-Größenangaben in relativen Werten wie %, em, ... fetgelegt wurden, hat eine browserseitige Umschaltung allerdings eine Wirkung.
Das trifft z. B. für den IE Version 6.0 zu.
|
Diese Option kann man nutzen, indem man Textgrößen für das Design der Seite einerseits mit absoluten Werten festlegt. Andereseits für bestimmte Textpassagen aber eine browserseitige Anpassung zulässt, weil relative Größenangaben eingetragen werden.
... das ist neu (na ja, so neu auch wieder nicht):
Die Bevormundung der Seitenbesucher durch den Webmaster, der ausschließlich absolute Werte für Textgrößen einträgt, wird duch die Browser der neuen Generation aufgehoben. Meine oben erwähnte Unterscheidung zwischen absoluten und relativen Angaben greift heute nicht mehr bzw. wird von einigen Browsern aufgehoben!
Browserbestimmte Textgrößen haben also oft Priorität! Experimente mit der Rangfolge und dem !important-Zusatz (siehe Kaskadierung) bleiben aber interessant.
... hier funktioniert mein Vorschlag nicht:
|
Die oben beschriebene Möglichkeit bietet sich in neueren Browsern, die eine solche Schriftgrößen- anpassung anbieten (siehe links) nicht mehr!
Das trifft zum Beispiel für den FireFox Version 3.0 zu.
|
Die Unterscheidung von Textgrößen für das Design der Seite mit absoluten Werten einerseits und relative Größenangaben für bestimmte Textpassagen andererseits, machen in modernen Browsern keinen Unterschied. Die browserseitige Größenumschaltung ist identisch mit der STRG + Plustaste bzw. STRG + Mausrad-Funktion, die ich weiter unten erkläre. Die neuen Funktionen der Browser setzen sich auch über absolute Größenbestimmungen für Texte hinweg!
Fazit:
Fließtexte sollten nicht grundsätzlich in absoluten Maßangaben wie 'px' oder 'pt' festgelegt werden. Einige, vor allem ältere Browser, verweigern ansonsten die Vergößerung. Meine Web-Toolbos ist also ein schlechtes Beispiel für den Schritt in Richtung Barrierefreiheit, und das nicht nur wegen den Maßangaben für Texte sondern auch durch den Einsatz von JavaScript, Frames und Farben.
Bemerkung: Natürlich könnte ich das heute beser,
siehe:  Rennmausseiten  Geilenkirchen-Seiten Igelstation
aber 1999, als die Web-Toolbox entstand, dachte ich noch nicht intensiv über Barrierefreit nach, und heute müsste ich incl. der vielen Beispieldateien mehr als 6000 HTML-Seiten überarbeiten.
a) für wichtige Texte relative Größenangaben
Da die oben beschriebene Möglichkeit für einige Browser immer noch Gültigkeit hat, lohnt es über diesen Kompromiss zwischen Designtreue und Barrierefreiheit nachzudenken:
Sie bestimmen absolute Textgrößen für Menüs, Fußnoten usw. Für Fließtext aber, lassen Sie Browsergesteuerte Größenänderungen zu. Dazu würden Sie z.B für Absätze (<p>) CSS-Formatierungen mit relativen Größenangaben notieren.
Das würde bedeuten alle Textgrößen sind in 'px' oder 'pt' festgelegt, mit einer Ausnahme: Die Textgröße für <p>-Tags. Die sind über CSS in relativen Größen festgelegt. Schließen Sie dann die betreffenden Texte in <p>-Tags ein. Die vom Besucher / Browser eingestellte Größenanpassung ist dann nur für diese Passagen wirksam.
So könnte das aussehen (Screenshots):
Sie sehen hier zwei Screenshots eines Arbeitentwurfs, entstanden bei der Überarbeitung meiner Geilenkirchen-Seiten.
Ansicht mit teilweise 'freigegebenen' Größenanpassungen des Textinhalts. Natürlich wäre es sinnvoll den gesamten Fließtext entsprechend zu formatieren. Zum Vergleich der Größen hatte ich das für den Testlauf nicht umgesetzt. Lediglich der untere Abschnitt wurde in <p>-Tags eingeschlossen.
Das Layout der Seite blieb erhalten, auch wenn der Text im 2. Absatz größer dargestellt wurde. Der automatische Zeilenumbruch, den der Browser organisiert, macht es möglich.
Ansicht Browsereinstellung für den Schriftgrad: normal
Ansicht Browsereinstellung für den Schriftgrad: größer
Statt in den CSS-Anweisungen für den Selektor 'p' die Schriftgröße absolut mit 11px einzutragen, hatte ich für das <p>-Tag relative Maßeinheiten eingetragen, entsprechend den üblichen Schriftgrößen für Texte auf meiner Seite.
font-size: 0.70em;
oder
font-size: 65%;
b) Relative Maßeinheiten für den Schriftgrad
Sie sehen in der 5. Spalte echte Interpretationen der Größenangaben, die durch den Browser bestimmt werden. In dieser Tabelle beziehen sich die relativen Angaben auf die Einstellung 11px, die ich für das übergeordnete Element 'Tabellenzelle' (<td>) festgelegt habe.
font-size: 130% bezieht sich also auf die Textgröße von 11 Pixel und resultiert in 14,3 Pixel.
| Einheit |
|
Beschreibung |
Eintrag |
Resultat |
11 Pixel |
| % |
Prozent |
relativ zur Schriftgröße |
130% |
ABC |
ABC |
| em |
Element |
relativ zur Schriftgröße
des Elternelements |
2em |
ABC |
ABC |
| ex |
Höhe x |
relativ zur Höhe des kleinen Buchstaben x. |
3ex |
ABC |
ABC |
c) Schriftgröße durch Browsereinstellungen ändern
Um die Schriftgrößen durch Einstellungen im Browser zu verändern stehen Auswahlmenüs und Tastenkürzel zur Verfügung. Die Vorgehensweise variiert von Bowser zu Browser.
Einstellungen im Browser
Internet Explorer
Ansicht - Schriftgrad: Sehr groß, Größer, Mittel, Kleiner, Sehr klein
 Netscape Navigator
Anzeigen - Text-Zoom: kleiner / größer und Prozentangaben (50% bis 200%)
Mozilla Firefox
Ansicht - Schriftgrad: vergrößern, verkleinern, normal
Mozilla Firefox
Ansicht - Zoom: Vergrößern, Verkleinern, Normal, Nur Text zoomen
 Opera
Ansicht - Zoomfaktor: Zoomfaktor wählen
d) Text größer anzeigen mit STRG-Taste + Mausrad
Ich bin immer wieder erstaunt darüber, wie wenig bekannt diese Möglichkeit besonders bei Usern ist, die das Internet nur sporadisch nutzen. Es lohnt also, einen Hinweis zu platzieren.
Bei den gängigen neuen Browsern kann man die Schriftgröße auch ändern, wenn man die Strg-Taste niederdrückt und das Mausrad dreht. Wenn Sie ihre Schriftgrößen sehr klein eingestellt haben, könnten Sie einen entsprechenden Hinweis einbinden:
 Info Schriftgröße ändern (hier klicken)
Diese Grafik dürfen Sie herunterladen. (Rechtsklicken)
Sie können auch meine gesamte Hinweisseite zur Anpassung der Schriftgröße inklusive der Grafik herunterladen und in ihre Web-Präsenz einbinden. Die Seite können Sie in einem neuen Browserfenster oder in einem PopUp-Window anzeigen lassen.
Bei dieser Technik werden nach meinen Beobachtungen alle Texte, egal ob in fixen oder relativen Größenangaben festgelegt, in der Größe verändert dargestellt.
|
Home • CSS • beinahe Barrierefrei
Möglichkeiten