Oft begegnen uns im digitalen Alltag anpassungsfähige Website-Layouts, ohne dass es uns bewusst wird. Ihre optische Wiedergabe erfolgt anhand der Anforderungen des Endgerätes, mit dem die Seite aufgerufen wird. Die Bildschirmtastatur mobiler Endgeräte ermöglicht es zum Beispiel, jeweils passende Tastaturen anzuzeigen. Dieses Verhalten kennt man bereits von nativen Anwendungen: Bei E-Mail-Feldern bietet die Tastatur ein „@“ an, beim Telefonieren werden Zahlen statt Buchstaben angezeigt. Gleiches ist für Webseiten möglich: Mit HTML5 lassen sich Eingabefelder wie z. B. für E-Mail-Adressen, Zahlen oder Datum semantisch einem bestimmten Typ zuweisen. Basierend auf diesem semantischen Bezug wird dann die entsprechende Tastatur angezeigt.
Abbildung 1: Beispiel Kontaktformular der NEBIS-Website bei Nutzung mit einem Smartphone
Diese Typisierung ist unter anderem auch Basis für die Validierung von Formularfeldern. Die korrekte Semantik von Formularen schliesst die Beziehung zwischen Eingabefeld und seinem Label (Beschriftung) ein und ist somit auch für die Screenreader-Verwendung wesentlich. Das Label eines Eingabefelds wird durch das Bildschirmleseprogramm vorgelesen, damit der Hörende weiss, was einzugeben ist. Ist der Bezug korrekt hinterlegt, kommt das allen Nutzern zu Gute. Versucht man z. B. vergeblich, auf einem Touchscreen eine kleine Checkbox mit dem Finger zu treffen, dann kann man stattdessen sein Label berühren. Wenn das Formular semantisch korrekt formuliert ist, schaltet auch das die Checkbox um.
Ein häufiges Spannungsfeld zwischen Webentwicklern und -designern sind die Seitenlayouts. Viele Designer – immer noch vom traditionellen Print-Design geprägt – entwerfen Designs mit statischer Pixel-Breite, wie z. B. 980px. Darin spiegelt sich ein Unverständnis des Mediums Web wieder. Denn eine Webseite ist, anders als die Seite eines Buches, flexibel. Statisch definierte Layouts können sich daher negativ auf die Benutzerfreundlichkeit von Websites auswirken. Die Breite des Notebook-Displays oder MacBooks stellt heute nicht mehr die geringstmögliche Breite einer Webseite dar, ebenfalls nicht die des iPads. Denn es kommen immer neue Geräte mit stark variierenden Display-Grössen auf den Markt. Diese grosse Vielfalt wirft verschärft die Frage auf, wie sich eine Webseite anpassen kann und soll. Die Entwicklung flexibler Layouts ist daher unverzichtbar.
Abbildung 2: variierende Tablet-Grössen, Quelle: Lukew Ideation + Design
Im Zuge von HTML5 und CSS3 sind neue, ergänzende Techniken der Flexibilität entstanden, wie z. B. „Media Queries“. Mit deren Hilfe kann sich z.B. ein dreispaltiges Layout ab einer im Vorfeld definierten Breite in eine zweispaltige Darstellung ändern. Die dritte Spalte wird dann unterhalb der zwei Spalten angezeigt. Auf besonders kleinen Endgeräten wie Smartphones wird die Seite in nur einer Spalte dargestellt und alle Seitenbereiche liegen untereinander.
Abbildung 2: Flexibles Layout, Quelle: G. Garcia-Mont
Ein weiterer Teilbereich der Flexibilität ist die Elastizität. Für viele Menschen ist es angenehm, Webseiten mit grösserer Schrift anzusehen. Das lässt sich im Browser einstellen. Doch wie ändert sich dann die Darstellung der Seite? Überlappen sich Bereiche? Muss man beim Lesen ständig horizontal scrollen?
Wie gut das Vergrössern funktioniert, hängt ebenfalls vom Layout ab. Fixe Layouts sind da meist ungenügend. Seit etlichen Jahren gibt es im CSS eine Einheit, die auf der eingestellten Schriftgrösse des Browsers basiert („em“). Unterstützend wirken auch hier „Media Queries“. Vergrössert man die Schrift, schlagen die drei Spalten in zwei Spalten und bei weiterer Vergrösserung in eine Spalte um. Der eigentliche Textinhalt ist vergrössert und hat zugleich mehr Platz im sichtbaren Bereich des Displays. Horizontales Scrollen wird so meist unnötig. Auch an dieser Stelle treffen sich klassische Accessibility-Normen (Textvergösserung) und aktuelle Anforderungen die aus der Gerätevielfalt resultieren.
Der Kontrast von Vordergrund- und Hintergrundfarbe ist ebenfalls ein wichtiger Aspekt des Layouts. Manche Webdesigner präferieren schwache Kontraste, da sie als elegant empfunden werden. Eine Webseite ist jedoch nicht nur ansprechender Betrachtungsgegenstand sondern oft auch Arbeitswerkzeug. Werden Menschen älter, verschlechtert sich meist ihre Kontrastwahrnehmung. Aber auch beim seitlichen Blicken auf Notebook-Screens oder bei Smartphone-Nutzung sind zu schwache Kontraste hinderlich. Gute Kontraste nützen also jedem. Ob ein Kontrast ausreichend ist, lässt sich mit einem entsprechendem Werkzeug objektiv überprüfen.
Abbildung 3: Wissensportal der ETH-Bibliothek, Kontrastkontrolle mit dem Colour Contrast Analyser
Anhand der geschilderten Aspekte zeigt sich, dass moderne Website-Strategie immer auch den Anspruch auf barrierefreie Zugänglichkeit beinhaltet. Die etablierten Techniken zur Entwicklung und zum Testen von Accessibility können einen wesentlichen Beitrag zur Usability von Websites leisten, so dass diese auf einer Vielzahl von Geräten über verschiedene Bandbreiten gut nutzbar sind. Anwendbar sind die besprochenen Techniken nicht nur im Rahmen von Webprojekten, die über grosszügige personelle Ressourcen verfügen. Im Web selbst stehen eine Reihe hilfreicher Open-Source-Werkzeuge zur Verfügung, die es dem Einzelnen ermöglichen, einen barrierefreien Zugang auf eigene digitale Angebote zu gewährleisten und diese schon während der Entwicklung zu testen. Mit diesen Werkzeugen wird sich ein späterer Beitrag dieses Blogs beschäftigen.
Abschliessend danken wir „Zugang für alle“, der Schweizerischen Stiftung zur behindertengerechten Technologienutzung, für lehrreiche Einblicke in die Alltagsnutzung assistiver Technologie und das Schulen unserer Kolleginnen und Kollegen.
Autor: Bernd Uttenweiler
Koautorin: Maximiliane Okonnek
Dieses Werk unterliegt einer Creative Commons Attribution-ShareAlike 4.0 International Public License.
The post Accessibility im Web II– Responsives Webdesign appeared first on Innovation@ETH-Bibliothek.
