DAS SYSTEM DER DEUTSCHEN BLINDENSCHRIFT

Inhaltsbereich

Umsetzung von Layoutmenü und Layout

Die grundsätzlichen Anforderungen an das sehbehindertengerechte Layout und dessen Steuerung sind im Beginn dieser Dokumentation kurz beschrieben worden, nachfolgend geht es um die Umsetzung dieser Anforderungen.

Layoutmenü und Programmierung

Bei der Benutzung der Seite soll der Anwender die Möglichkeit haben, Größe und Farbschema der Seite zu steuern sowie zwischen einer mehr- und einer einspaltigen Darstellung zu wählen. Die gewählten Einstellungen sollten auch erhalten bleiben, wenn der Anwender sich auf der Seite bewegt oder über einen Favoriten neu öffnet. 

Dazu wurde für jede der möglichen Kombinationen aller drei Layoutparameter (Grundlayout, Schriftgröße, Farbschema) ein eigenes Unterverzeichnis erstellt.  Die Inhalte der Darstellungen mit unterschiedlichen Schriftgröße und Farbschema unterscheiden sich dabei nicht – hier wird lediglich ein unterschiedliches Stylesheet heruntergeladen.  Die Seiten im Spalten- und im Großdrucklayout unterscheiden sich in der Umsetzung tabellarischer Daten, da für das Großdrucklayout schmalere Tabellen bzw. u. U. Listen anstelle von Tabellen eingesetzt werden. 

Die Verzeichnisse werden – entsprechend der drei Parameter für die Layouteinstellungen – mit einer dreistelligen Zahl bezeichnet; lediglich die Daten für die Standardansicht liegen im Hauptverzeichnis der Seite. 

Steuerung über Stylesheets

Die Festlegung der Layouteinstellungen erfolgt über CSS-Stylesheets (Formatvorlagen). Dazu wurden für zwei verschiedene Grundlayouts, vier verschiedene Farbschemata und sechs verschiedene Schriftgrößen 48 verschiedene Stylesheets mit Hilfe des CSS-Präprozessors SASS „vorgekocht“ und diese korrespondierend zur Verzeichnisnummer des entsprechenden Designs bezeichnet.

An Kopf und Fuß jeder Seite befindet sich ein Layoutmenü, von dem aus der Anwender in ein Verzeichnis mit einer anderen Darstellung (andere Schriftgröße, anderes Farbschema oder anderes Grundlayout) wechseln kann. 

Die frühere Umsetzung über ein Layout-Cookie und das CMS Joomla ist damit hinfällig und wird auch nicht mehr parallel gepflegt.

Das Layout – Größe und Farben

Die verwendeten Farbschemata

Es wurden vier verschiedene Farbschemata vorgesehen, „Dezent“, Schwarzweiß (Kontrast), Weiß-Schwarz (Kontrast invertiert) und Gelb auf Blau. Bei der Gestaltung der Seiten wurde weiterhin versucht, Übersichtlichkeit dadurch herzustellen, dass notwendige und zusätzliche Strukturinnformationen unterschiedlich gewichtet werden. Dies geschah dadurch, dass notwendige Informationen (beispielsweise die Abtrennung von Menüs, das Unterstreichen von Überschriften) mit stärkeren Kontrasten und durch Randlinien betont wurden, während weniger wichtige Strukturinformationen (zum Beispiel die Ränder eines Braillebeispiels) durch einen farblich eher dezenten Hintergrund nur angedeutet werden. Diese Designentscheidungen hatten das Ziel, gerade Lesern mit eingeschränktem Sehvermögen den Überblick über die Seite zu erleichtern.

Neben der unterschiedlichen Farbgebung wurde beim Layout auch darauf geachtet, dass es sowohl für die Menüs als auch im Inhaltsbereich eine Art Führung an der linken Seite gibt. Das bedeutet, dass die linke Seite eines Menüs oder auch des Textes entweder anhand der Textkante oder einer vertikalen Linie von oben nach unten verfolgt werden kann, um Lesern mit eingeschränktem Gesichtsfeld entgegenzukommen.

Doch nun zurück zu den Farbschemata:

„Dezent“

Das ist das vorgegebene Farbschema für den Neubesucher, das heißt, der Besucher, der noch keine eigenen Einstellungen vorgenommen hat, sieht die Seite mit diesem Farbschema „Dezent“. Die Kontraste sind hier leicht vermindert, um normalsehenden Betrachtern ein entspanntes Lesen zu ermöglichen. Der Hintergrund ist 90 % weiß, der Vordergrund 90 % schwarz, die Linienführung ist mit grauen und grünen Linien umgesetzt, im Standardlayout wird der Navigationsbereich durch leicht grün getönte Flächen abgesetzt.

„Schwarzweiß“

Hier sind Kontraste verstärkt, Ziel sind Betrachter in heller Umgebung oder mit eingeschränkten Kontrastsehen. Der Hintergrund ist 100 % weiß, die Schrift 100 % schwarz gesetzt; Linienführung und Unterstreichungen kontrastieren stärker, im Standardlayout wird der Navigationsbereich durch dunkler und grau (nicht farbig) getönte Flächen abgesetzt.

„Weiß-Schwarz“

Auch hier sind Kontraste verstärkt, dazu kommt die Invertierung der Farben und ein gelegentlicher Einsatz der Farbe Rot, insbesondere in den Navigationsmenüs (der jeweils aktuelle Eintrag ist in roter Schrift gesetzt) und bei der Betonung der „negativen Braillebeispiele“, das heißt der Braillebeispiele, bei denen Ausnahmen bei der Anwendung der Regeln dargestellt werden.

„Gelb auf Blau“

Hier wird fast ausschließlich mit zwei knalligen Gelbtönen als Schrift- und Vordergrundfarbe und mehr oder weniger dunklen Blautönen als Hintergrundfarbe gearbeitet – lediglich das Navigationsmenüs im Spaltenlayout ist mit einem fast schwarzen Hintergrund abgesetzt.

Die Auswahl der Schriftgrößen – von XS bis XXL

Eine Grundüberlegung vorweg: Der Autor hat die Erfahrung gemacht, dass die gelegentlich anzutreffenden Schriftgrößenmenüs mit einer linearen Steigerung der Schriftgröße um meist zehn Prozentpunkte (100 %, 110 %, 120 % usw.) wenig sinnvoll sind, weil die Veränderungsschritte zu klein sind und die einstellbare Vergrößerung entweder beschränkt wurde oder, bei stärkeren Vergrößerungen, zu Problemen bei der Seitendarstellung führt. Deswegen fiel die Entscheidung, dass es nicht reicht, sich ein entsprechendes Script mit „A+“- oder „A-“-Icons zu „besorgen und einzubauen“, sondern dass das gesamte Layout sorgfältig und im Ganzen geplant werden muss.

Dabei müssen neben den Breiten von Absätzen, Tabellen oder Menüs und der Schriftgröße auch noch sehr unterschiedliche Bildschirmauf‌lösungen berücksichtigt werden, da die Veränderung der Bildschirmauf‌lösung für viele sehgeschädigte Anwender einzige verfügbare oder bekannte Weg ist, die Bildschirmdarstellung generell, das heißt, für alle Programme und einschließlich der Programmmenüs, zu vergrößern. (Anmerkung: das gelegentlich empfohlene Großzoomen über Strg-Taste + Scrollrad führt bis dato unter Microsoft Windows eben nicht zu größeren Menüs.) Es kam also darauf an, Lösungen zu finden, die nicht eine bestimmte (auch einstellbare) Schriftgröße, Bildschirmauf‌lösung etc. verlangen, sondern die problemlos mit möglichst vielen Einstellungen funktionieren.

Aus diesem Grunde wurden folgende Festlegungen getroffen:

Schriftgrößenabhängige Bemaßung

Die Größen der verwendeten Schriften werden nicht in Pixel festgelegt, sondern beziehen sich prozentual auf die vom System vorgegebene Schriftgröße. Das bietet dem Browser die Möglichkeit, die Festlegungen des Anwenders bezüglich der Schriftgröße (z. B., unter Windows, die Einstellung „Große Schriftarten“) zu berücksichtigen.

Weiterhin wurde vorgesehen, dass fast alle Layoutelemente schriftgrößenabhängig bemaßt werden und dadurch ebenfalls mit der Schriftgröße wachsen können.

Eine Ausnahme bilden die verwendeten Icons (für Links und für die verschiedenen Farbschemata). Sie werden wie üblich in ihrer Pixelgröße angegeben, um wenigstens in der unskalierten Anzeige ein Neurastern zu vermeiden – ein zu großes oder zu kleines Bildchen (z. B. ein Pfeil für einen Link) sieht weniger hässlich aus als ein „schrumplig“ vergrößertes.

Sinnvolle Abstufungen

Die verschiedenen Darstellungsgrößen liegen etwa -20 %/+25 % auseinander. Schritte von 10 % sind nach Erfahrung des Autors zu klein (selbst Microsoft gibt in Windows für die Einstellung größerer Schriftarten die Vergrößerung auf 125 % oder 150 % vor).

Weiterhin werden die Darstellungsgrößen so gewählt, dass sich bei einer Vergrößerung um drei Schritte die Darstellungsgröße verdoppelt.

Breiten

Es werden zwei unterschiedliche Grundlayouts vorgehalten (ein Zweispalten- und ein Einspaltenlayout), in denen auch der eigentliche Text unterschiedlich gesetzt wird.

Die Gesamtbreite im einspaltigen Großdrucklayout ist auf etwa 29 em (Geviertbreiten) festgelegt – abzüglich der Innenränder und unter Berücksichtigung der eher breit laufenden Schrift Verdana ergibt sich hier eine Satzspiegelbreite bzw. Zeilenlänge von etwas mehr als 50 Zeichen auf eine Zeile, wie sie für Großdruckpublikationen empfohlen wird.

Das zweispaltige Standardlayout ist insgesamt 68 em breit mit einer Satzspiegelbreite von etwas mehr als 31 em, das heißt, es passen etwa 60 Zeichen auf eine Zeile; das ist etwas schmaler als beim normalen Buchsatz.

Da die Satzspiegelbreite im Großdrucklayout einiges geringer ist als im Standardlayout, müssen einige Inhaltselemente (Tabellen und Braillebeispiele) in zwei verschieden breiten Versionen vorgehalten werden.

Numerische Schriftgrößen

Die prozentual festgelegten Schriftgrößen im Standardlayout wurden so gewählt, dass sich (unter Voraussetzung einer Systemvorgabe von 16 px, d. h. ohne Schriftvergrößerung) ganzzahlige Schriftgrößen ergeben. Das ist bei der Verwendung der Schriftart Verdana, die aus mehreren verschieden großen Pixelschriften hervorgegangen ist und gerade am Bildschirm in kleinen Schriftgrößen sehr gut funktioniert, wichtig und sinnvoll.

Die Informationen darüber, unter welchem Label von XS bis XXL welche Schriftgröße und welcher Fensterbreite ausgewählt werden kann, werden in den folgenden beiden Tabellen dargestellt:

Tabelle 2: Schriftgrößen, Seitenbreiten und sinnvolle Bildschirmauflösungen der verschiedenen Größenvorgaben im Standardlayout

Label	Schriftgröße		Größte Breite	Sinnvolle Auf‌lösung
XS	11 px	68,75 %	748 px	800 × …
S	14 px	87,5 %	952 px	1024 × …
M	18 px	112,5 %	1224 px	1280 × …
L	22 px	137,5 %	1496 px	1680 × …
XL	28 px	175 %	1904 px	1920 × …
XXL	36 px	225 %	2448 px	2560 × …

Tabelle 3: Schriftgrößen, Seitenbreiten und sinnvolle Bildschirmauflösungen der verschiedenen Größenvorgaben im Großdrucklayout

Label	Schriftgröße		Größte Breite	Sinnvolle Auf‌lösung
XS	22 px	137 %	638 px	640 × …
S	28 px	175 %	812 px	800 × …
M	36 px	225 %	1044 px	1024 × …
L	44 px	275 %	1276 px	1280 × …
XL	56 px	350 %	1624 px	1680 × …
XXL	72 px	450 %	2088 px	2240 × …

Zurück zum Kapitelanfang

• Zurück
• Weiter