© DrHitch/Shutterstock.com
Shortcuts
Barrierefreiheit

2 Layout und Struktur

Das Layout und die Struktur einer Webanwendung sind das Erste, das von einem Anwender in Augenschein genommen wird. An dieser Stelle trifft der Anwender bereits eine erste Sympathieentscheidung für oder gegen Ihre Anwendung. Deshalb lässt man gerade der Struktur und dann dem Design einer Anwendung besonders viel Aufmerksamkeit in der Planungsphase zukommen. Häufig beschränken sich Designer und Entwickler aber auf den rein optischen Entwurf eines Webdesigns, ohne dabei genauer an Barrierefreiheit und die damit verbundenen Anforderungen an Layout und Struktur zu denken. Oftmals entstehen genau an dieser Stelle in dieser frühen Phase der Konzeption bereits die ersten Hürden und Barrieren einer Anwendung, die sich später kaum noch ohne erheblichen Aufwand beseitigen lassen. Sinnvoll ist es, bereits in der Phase der Konzeption die Barrierefreiheit als feste Größe mit zu berücksichtigen. Auf welche Dinge zu achten sind, um eine Webanwendung von Beginn an barrierefrei zu konzipieren, beschreiben die folgenden Kapitel.

Shortcut Autorenteam


2.1 AnwendungsstrukturNachdem Sie mit dem Kunden die Anforderungen an die neu zu entwickelnde Webanwendung spezifiziert und in einem Fachkonzept festgehalten haben, folgt die Phase der technischen Planung. Hierunter fällt auch die Konzeption einer Anwendungsstruktur. Wie also soll die Anwendung aufgebaut werden und wo sollen Module wie Navigation, Inhalt, Suche sowie Kopf- und Fußzeile platziert werden? Bereits an dieser Stelle gilt es, einige wichtige Punkte zu berücksichtigen, denn in dieser Phase können bereits Barrieren geschaffen werden, obwohl sie noch nicht eine Zeile Code geschrieben haben. Beispielsweise kommt der Platzierung der Suche oder auch der Navigation eine wichtige Bedeutung zu. Ein Beispiel für die barrierefreie Struktur einer Webanwendung zeigt Abbildung 2.1. Hier fällt besonders auf, dass sowohl die Suche als auch die Navigation im Kopfbereich der Anwendung platziert wurden. Der Grund hierfür ist, dass Nutzer eines Screen Readers beim Öffnen einer Seite zuerst im Suchfeld und beim Weiterlesen in der Navigation der Anwendung landet. Wichtig hierbei ist eigentlich nicht die optische Platzierung dieser Module, sondern die Stelle, an der die Suche und die Navigation im Markup verankert sind, denn nur daran orientiert sich der Screen Reader. Es wäre durchaus möglich, die Suche bzw. die Navigation zwar direkt unterhalb des

-Elements zu implementieren, die Module dann per CSS optisch jedoch an eine völlig andere Stelle als an den Seitenanfang zu platzieren.Meinung: Meine persönliche Empfehlung ist es, die Suche und die Navigation optisch im Kopfbereich der Seite zu belassen, denn da werden sie vom Anwender eines visuellen Browsers erfahrungsgemäß am ehesten erwartet.2.2 Tableless LayoutIm vorherigen Kapitel haben wir eine Struktur und ein Layout für unsere Webanwendung festgelegt, nun geht es an die Umsetzung unseres Konzepts.Ein Layout zu entwickeln ohne Zuhilfenahme von Tabellen ist leichter, als es auf den ersten Blick den Anschein hat. Die Voraussetzungen hierfür sind ein grundlegendes CSS-Verständnis und vor allem der Wille, sich von alter Gewohnheit zu lösen und empfänglich für etwas Neues zu sein.Abbildung 2.1 zeigt eine Layoutaufteilung, wie sie häufig in einer Webanwendung gewählt wird. Einige Webentwickler erkennen hier direkt ein Tabellenmuster: Eine Tabelle mit drei Spalten und vier Zeilen. Die ersten beiden Zeilen und die letzte Zeile einfach über drei Spalten strecken, und fertig ist das Layout. Das ist auch korrekt, ba...
Shortcuts
Barrierefreiheit

2 Layout und Struktur

Das Layout und die Struktur einer Webanwendung sind das Erste, das von einem Anwender in Augenschein genommen wird. An dieser Stelle trifft der Anwender bereits eine erste Sympathieentscheidung für oder gegen Ihre Anwendung. Deshalb lässt man gerade der Struktur und dann dem Design einer Anwendung besonders viel Aufmerksamkeit in der Planungsphase zukommen. Häufig beschränken sich Designer und Entwickler aber auf den rein optischen Entwurf eines Webdesigns, ohne dabei genauer an Barrierefreiheit und die damit verbundenen Anforderungen an Layout und Struktur zu denken. Oftmals entstehen genau an dieser Stelle in dieser frühen Phase der Konzeption bereits die ersten Hürden und Barrieren einer Anwendung, die sich später kaum noch ohne erheblichen Aufwand beseitigen lassen. Sinnvoll ist es, bereits in der Phase der Konzeption die Barrierefreiheit als feste Größe mit zu berücksichtigen. Auf welche Dinge zu achten sind, um eine Webanwendung von Beginn an barrierefrei zu konzipieren, beschreiben die folgenden Kapitel.

Shortcut Autorenteam


2.1 AnwendungsstrukturNachdem Sie mit dem Kunden die Anforderungen an die neu zu entwickelnde Webanwendung spezifiziert und in einem Fachkonzept festgehalten haben, folgt die Phase der technischen Planung. Hierunter fällt auch die Konzeption einer Anwendungsstruktur. Wie also soll die Anwendung aufgebaut werden und wo sollen Module wie Navigation, Inhalt, Suche sowie Kopf- und Fußzeile platziert werden? Bereits an dieser Stelle gilt es, einige wichtige Punkte zu berücksichtigen, denn in dieser Phase können bereits Barrieren geschaffen werden, obwohl sie noch nicht eine Zeile Code geschrieben haben. Beispielsweise kommt der Platzierung der Suche oder auch der Navigation eine wichtige Bedeutung zu. Ein Beispiel für die barrierefreie Struktur einer Webanwendung zeigt Abbildung 2.1. Hier fällt besonders auf, dass sowohl die Suche als auch die Navigation im Kopfbereich der Anwendung platziert wurden. Der Grund hierfür ist, dass Nutzer eines Screen Readers beim Öffnen einer Seite zuerst im Suchfeld und beim Weiterlesen in der Navigation der Anwendung landet. Wichtig hierbei ist eigentlich nicht die optische Platzierung dieser Module, sondern die Stelle, an der die Suche und die Navigation im Markup verankert sind, denn nur daran orientiert sich der Screen Reader. Es wäre durchaus möglich, die Suche bzw. die Navigation zwar direkt unterhalb des

-Elements zu implementieren, die Module dann per CSS optisch jedoch an eine völlig andere Stelle als an den Seitenanfang zu platzieren.Meinung: Meine persönliche Empfehlung ist es, die Suche und die Navigation optisch im Kopfbereich der Seite zu belassen, denn da werden sie vom Anwender eines visuellen Browsers erfahrungsgemäß am ehesten erwartet.2.2 Tableless LayoutIm vorherigen Kapitel haben wir eine Struktur und ein Layout für unsere Webanwendung festgelegt, nun geht es an die Umsetzung unseres Konzepts.Ein Layout zu entwickeln ohne Zuhilfenahme von Tabellen ist leichter, als es auf den ersten Blick den Anschein hat. Die Voraussetzungen hierfür sind ein grundlegendes CSS-Verständnis und vor allem der Wille, sich von alter Gewohnheit zu lösen und empfänglich für etwas Neues zu sein.Abbildung 2.1 zeigt eine Layoutaufteilung, wie sie häufig in einer Webanwendung gewählt wird. Einige Webentwickler erkennen hier direkt ein Tabellenmuster: Eine Tabelle mit drei Spalten und vier Zeilen. Die ersten beiden Zeilen und die letzte Zeile einfach über drei Spalten strecken, und fertig ist das Layout. Das ist auch korrekt, ba...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang