© DrHitch/Shutterstock.com
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.

2.1 Anwendungsstruktur

Nachdem 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 <body>-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.

Abb_5_1.png

Abbildung 2.1: Struktur einer barrierefreien Webanwendung

2.2 Tableless Layout

Im 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, barrierefrei ist das aber keineswegs. Developer mit Weitblick sehen in dieser Abbildung sechs Container, die mittels CSS in einen Fluss gesetzt wurden. Ergebnis: Barrierefreies Webseitenlayout. In HTML5 gibt es eigene Elemente für die jeweiligen Bereiche einer Webseite (Tabelle 2.1).

Element

Beschreibung

<header>

Definiert den Kopfbereich einer Seite oder einer Sektion

<nav>

Bereich für eine Navigation

<aside>

Definiert einen Bereich neben dem eigentlichen Seiteninhalt

<section>

Definiert eine Sektion in einer Webseite

<article>

Definiert einen Artikel

<footer>

Definiert den Fußbereich einer Seite oder einer Sektion

Tabelle 2.1: Mögliche Layoutbereiche einer HTML5-Webanwendung

Gießen wir das Layout nun in HTML, sollte ein Ergebnis ähnlich wie in Listing 2.1 entstehen. Abbildung 2.2 stellt dar, welche HTML-Elemente für welchen Bereich der Webanwendung verwendet werden.

<!DOCTYPE HTML>
<html>
<head>
<title>Barrierefreiheit: Web für alle</title>
</head>

<body>
<header id=“header“>
<div id=“logo“>
Logo
</div>

<div id=“search“>
Suche
</div>

<nav id=“navigation“>
Navigation
</nav>
</header>

<aside id=“left“>
Links
</aside>

<aside id=“right“>
Rechts
</aside>

<section id=“main“>
<nav id=“breadcrumb“>
Navigationspfad
</nav>

<article id=“content“>
Inhalt
</article>
</section>

<footer id=“footer“>
Fußzeile
</footer>
</body>
</html>

Listing 2.1: HTML-Struktur einer barrierefreien Webanwendung

Abb_5_2.png

Abbildung 2.2: Transfer des Designkonzepts in HTML-Container

Kommen wir nun zum eigentlich spannenden Teil der Umsetzung, der Implementierung des CSS. Im Detail geht es nun darum, die Container so anzuordnen, dass sie unserem Entwurf aus der Konzeptionsphase entsprechen. Sie werden überrascht sein, wie wenig CSS-Code hierfür nötig ist (Listing 2.2).

<style type=“text/css“>

#logo { float: left; width: 200px; }

#search { float: right; width: 200px; }

#navigation { clear: both; }

#left { float: left; width: 200px; }

#right { float: right; width: 200px; }

#main { margin: 0 200px; }
</style>

Listing 2.2: Ausrichtung der HTML-Container mittels CSS

Der Schlüssel zum Erfolg und der wohl wichtigste Befehl ist hier float. Damit werden Container mittels CSS in einen Fluss gesetzt. Genau das Richtige also, um unsere Block-Level-Container nebeneinander platzieren zu können. Näher eingehen möchte ich an dieser Stelle auf die Umsetzung des eigentlichen Inhaltsbereichs, der aus einer linken und rechten Spalte sowie einem zentralen Bereich für den Inhalt besteht. Die linke und die rechte Spalte werden mittels float in den linken bzw. in den rechten Fluss gesetzt und somit an den Rändern des Anzeigebereichs positioniert. Zum Schluss setzen wir noch ein margin von 200px auf den linken und rechten Rand des Inhaltscontainers <section>, damit er sich nicht mit den beiden äußeren <aside>-Containern überlagert. Fertig ist unser barrierefreies Layout, ohne dass wir eine einzige Tabelle verwendet haben. War doch gar nicht so schwer, oder? Abbildung 2.3 liefert den Beweis, dass mit ein bisschen CSS und einfachen HTML-Containern eine Struktur für eine Webanwendung zu realisieren ist.

Abb_5_3.png

Abbildung 2.3: Layout auf Basis von Block-Level-Containern

An dieser Stelle, an der Sie nun gesehen und verstanden haben, wie leicht es ist, mit einigen wenigen Handgriffen eine barrierefreie Webanwendung zu strukturieren, kann ich Ihnen ja verraten, dass Sie sich noch etwas Arbeit sparen können – mit einem CSS-Framework. Es existiert im Netz bereits eine Vielzahl von kostenlosen und frei verwendbaren CSS-Frameworks. YAML und Blueprint sind hier wohl die bekanntesten und kommen bereits in vielen großen und bekannten Internetangeboten zum Einsatz. Der wohl größte Vorteil neben der Zeitersparnis, den Sie vom Einsatz eines CSS-Frameworks haben, ist es, dass diese Hilfsmittel für alle marktführenden Browser optimiert und getestet sind. Will heißen, dass eine Webanwendung in allen wichtigen Browsern gleich dargestellt und gerendert wird und Sie sich an dieser Stelle eine Cross-Browser-Optimierung sparen können.

2.2.1 YAML CSS Framework

Ich möchte an dieser Stelle das YAML CSS Framework vorstellen, das unter Berücksichtigung der Creative Commons Attribution 2.0 License (CC-BY 2.0) verwendet werden darf. Zusammengefasst bedeutet das, dass Sie das Framework sowohl in privaten als auch in kommerziellen Anwendungen frei verwenden können, Anpassungen und Erweiterungen des Frameworks allerdings ebenfalls unter dem gleichen Lizenzmodell kostenfrei veröffentlichen müssen.

Möchten Sie also ein Layout mit dem YAML CSS Framework realisieren, laden Sie sich die Sourcen von der Webseite (www.yaml.de) des Betreibers herunter und binden sie in Ihre Webanwendung ein. Listing 2.3 zeigt die grundlegende HTML-Struktur einer Webanwendung, die mit YAML umgesetzt werden soll. YAML besteht aus einer Vielzahl von Style-Sheet-Dateien, die bei Bedarf eingebunden werden können. In jedem Fall erforderlich sind allerdings die core.min.css und die iehacks.min.css, die sämtliche Kernklassen zur Verfügung stellen. Es empfiehlt sich, an dieser Stelle die minimierten Versionen der Style-Sheet-Dateien einzubinden, da sie vom Datenvolumen kleiner sind und weniger Ladezeit in Anspruch nehmen. Auch das ist ein wichtiger Punkt für die Barrierefreiheit einer Websoftware: Ladezeiten so gering und kurz wie möglich zu halten, um die Anwendung auch auf einem Smartphone effizient laden und ausführen zu können.

<!DOCTYPE HTML>
<html>
<head>
<title>Barrierefreiheit: Web für alle</title>

<!-- mobile viewport optimisation -->
<meta name=“viewport“
content=“width=device-width, initial-scale=1.0“>

<!-- stylesheets -->
<link rel=“stylesheet“ href=“base.min.css“
type=“text/css“/>

<!--[if lte IE 7]>
<link rel=“stylesheet“ href=“iehacks.min.css“
type=“text/css“/>
<![endif]-->

<style type=“text/css“>
.ym-wrapper { min-width: 760px; max-width: 1000px;
margin-left: auto; margin-right: auto; }

.ym-wbox { padding: 10px; }
</style>
</head>

<body>
<div class=“ym-wrapper“>
<div class=“ym-wbox“>
<header>
Kopfzeile
</header>

<div>
Inhalt
</div>

<footer>
Fußzeile
</footer>
</div>
</div>
</body>
</html>

Listing 2.3: Grundgerüst einer Webanwendung mit YAML

Im nächsten Schritt wollen wir nun unser Layout, wie wir es im Konzept spezifiziert haben, mit YAML umsetzen. Hierzu erweitern wir unser HTML-Konstrukt um die noch fehlenden Container (Listing 2.4). Weiteren CSS-Code müssen wir nicht produzieren, er wird uns bereits von YAML zur Verfügung gestellt.

<div class=“ym-wrapper“>
<div class=“ym-wbox“>
<header id=“header“>
<div class=“ym-grid“>
<div id=“logo“ class=“ym-g50 ym-gl“>
Logo
</div>

<div id=“search“ class=“ym-g50 ym-gr“>
Suche
</div>
</div>

<nav id=“navigation“>
Navigation
</nav>
</header>

<div class=“ym-grid ym-equalize“>
<aside id=“left“ class=“ym-g25 ym-gl“>
Links
</aside>

<section id=“main“ class=“ym-g50 ym-gl“>
<nav id=“breadcrumb“>
Navigationspfad
</nav>

<article id=“content“>
Inhalt
</article>
</section>

<aside id=“right“ class=“ym-g25 ym-gr“>
Rechts
</aside>
</div>

<footer id=“footer“>
Fußzeile
</footer>
</div>
</div>

Listing 2.4: Umsetzung des Strukturkonzepts mit YAML

Sie sehen, wir können mittels des YAML CSS Frameworks beim Erzeugen eines Layouts für eine Webanwendung noch einmal viel Zeit einsparen. Und der Einarbeitungsaufwand hält sich dabei in Grenzen. Selbstverständlich bietet YAML noch viele weitere Hilfsklassen für Formulare, Navigation und auch für Barrierefreiheit. Interessant dürften hier die Klassen zum Verbergen von Inhalten sein. Ein Blick in die Dokumentation zu riskieren, lohnt sich auf jeden Fall.

2.2.2 Blueprint CSS Framework

Der wohl schärfste Konkurrent von YAML ist das Blueprint CSS Framework, auf dessen Grundlage auch bereits große und namhafte Anwendungen umgesetzt worden sind. Auch dieses Framework möchte ich kurz vorstellen und zeigen, wie damit unser Konzept der Webanwendung umgesetzt werden kann.

Blueprint ist unter einer modifizierten Form der MIT-Lizenz veröffentlicht und somit kostenlos und frei verfügbar. Das Framework kann in privaten wie auch in kommerziellen Anwendungen eingesetzt, modifiziert und erweitert werden, solange Sie immer auf die Quelle Ihrer Codebasis verweisen und Ihre Erweiterung unter der gleichen Lizenz kostenfrei veröffentlichen.

Starten wir nun mit der Umsetzung. Der erste Schritt besteht darin, sich das Framework von der Webseite des Betreibers (www.blueprintcss.org) herunterzuladen und in die eigene Webanwendung einzubinden. Das Framework besteht im Kern aus drei Style-Sheet-Dateien:

  • screen.css – Beinhaltet CSS-Klassen zur Darstellung der Anwendung auf einem Bildschirm oder Beamer
  • print.css – Kümmert sich um die Optik einer ausgedruckten Webseite
  • ie.css – Behandelt den Internet Explorer gesondert und weist ihn an, die Webanwendung so darzustellen wie andere marktführende Browser

Der Kopfbereich einer mit Blueprint umgesetzten Webanwendung wird dann wie in Listing 5.5 implementiert.

<link rel=“stylesheet“ href=“blueprint/screen.css“
type=“text/css“ media=“screen, projection“ />

<link rel=“stylesheet“ href=“blueprint/print.css“
type=“text/css“ media=“print“ />

<!--[if IE]>
<link rel=“stylesheet“ href=“blueprint/ie.css“
type=“text/css“ media=“screen, projection“ />
<![endif]-->

Listing 2.5: HTML Header einer mit Blueprint umgesetzten Webanwendung

Weitere Style-Definitionen und Style-Sheet-Dateien sind für die grundlegenden Funktionen von Blueprint nicht nötig. Leider stehen für das Framework keine minimierten Ausführungen der Dateien zur Verfügung. Das kann allerdings durch den Entwickler selbst mittels der vielen im Netz frei verfügbaren Komprimierungstools durchgeführt werden.

Im letzten Schritt gilt es nun, das HTML Markup zu Schreiben und die Webanwendung so zu strukturieren wie es unser Konzept vorgibt. Es ist wichtig zu wissen, dass Blueprint standardmäßig auf dem Konzept des 950 Pixel Grids aufbaut und dieses in 24 Spalten unterteilt ist. Das bedeutet, dass Ihrer Webanwendung insgesamt eine Breite von 950 Pixeln zur Verfügung steht und diese in maximal 24 Spalten aufgeteilt werden können. Eine Spalte hat dabei eine Breite von 30 Pixeln und ein Margin von 10 Pixeln. Das bedeutet, dass zwischen jeder Spalte ein Abstand von 10 Pixeln eingefügt wird. In der Summe kommt man dann auf eine Gesamtbreite von 950 Pixeln.

Möchte man nun mehrere Container nebeneinander platzieren, so müssen sie mit einem Container, dem die Klasse container zugewiesen wird, umschlossen werden (Listing 2.6).

<header id=“header“>
<div class=“container“>
<div id=“logo“ class=“span-12“>
Logo
</div>

<div id=“search“ class=“span-12 last“>
Suche
</div>
</div>

<nav id=“navigation“>
Navigation
</nav>
</header>

<div class=“container“>
<aside id=“left“ class=“span-6“>
Links
</aside>

<section class=“span-12“>
<nav id=“breadcrumb“>
Navigationspfad
</nav>

<article id=“content“>
Inhalt
</article>
</section>

<aside id=“right“ class=“span-6 last“>
Rechts
</aside>
</div>

<footer id=“footer“>
Fußzeile
</footer>

Listing 2.6: Umsetzung des Strukturkonzepts mit Blueprint

Schauen wir uns im Detail den Container an, der den linken und rechten sowie den eigentlichen Inhaltsbereich ausrichtet. Den beiden Außenbereichen wurde die Klasse span-6 zugewiesen, das bedeutet, die Container nehmen jeweils eine Breite von sechs der insgesamt 24 Spalten in Anspruch. An den Inhaltsbereich wurde die Klasse span-12 vergeben, der somit eine Breite von 12 Spalten beansprucht. Zuletzt wurde der rechten und somit der letzten Spalte des Grids die Klasse last zugewiesen, die dieser Container als den letzten in der Ausrichtung kennzeichnet. Kein Hexenwerk also, das man mit Blueprint vollbringen muss, um Container auf dem Bildschirm auszurichten.

Natürlich stellt auch dieses Framework weitaus mehr Funktionalität zur Verfügung als die hier vorgestellten Grid-Klassen. Die Dokumentation ist leider nicht so gut wie die des Konkurrenten YAML, trotzdem sollte man auch hier einen Blick riskieren, um sich einen Überblick über den Umfang des Frameworks zu verschaffen.

2.3 Inhalte verbergen

Oft kommt man bei der Umsetzung einer barrierefreien Webanwendung an den Punkt, an dem man gerne Inhalte optisch verbergen möchte, um sie nur den Nutzern eines Screen Readers zugänglich zu machen. Das ist immer dann sinnvoll, wenn man einem blinden Anwender zusätzliche Informationen an die Hand geben möchte, die für einen Sehenden nicht notwendig sind. Bereits im vorherigen Kapitel HTML und CSS ist im Abschnitt Formulare die CSS-Klasse invisible zum Einsatz gekommen. Nun ist der Zeitpunkt gekommen, an dem ich näher auf die Implementierung und die Gedanken hinter dieser Klasse eingehen möchte.

Üblicherweise kann man mittels CSS einzelne HTML-Elemente mit dem Befehl visibility: hidden oder display: none ausblenden. Was jedoch die wenigsten wissen: Damit sind die Elemente auch für einen Screen Reader als nicht sichtbar markiert und werden nicht vorgelesen, obwohl sie weiterhin im HTML Markup verankert sind. Das macht nochmals deutlich, dass auch Screen Reader CSS-Anweisungen interpretieren und ausführen.

Wie also schafft man es nun, HTML-Elemente optisch verschwinden zu lassen und sie trotzdem vor dem Screen Reader nicht zu verbergen? Hierzu bedient man sich eines einfachen Tricks. HTML-Elemente, die nicht angezeigt werden sollen, werden einfach aus dem darstellbaren Bereich verbannt und nach links aus dem Anzeigebereich des Bildschirms verschoben. Genau das erreicht man mit den beiden Anweisungen left: -2000px und position: absolute. Das zu verbergende Element wird also absolut an eine Stelle (-2000 Pixel) neben den eigentlichen Anzeigebereich verschoben. Die restlichen Anweisungen dienen lediglich dazu, dass sehr große Elemente keine Chance haben, von links wieder in den optischen Bereich hineinzuwachsen (Listing 2.7).

.invisible {
left: -2000px;
position: absolute;
padding: 0;
margin: 0;
width: 1px;
background: none transparent scroll repeat 0% 0%;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
}

Listing 2.7: CSS-Klasse zum Verbergen von HTML-Elementen

An dieser Stelle bietet es sich an, noch einmal über Grafiken und deren Sichtbarkeit in Webanwendung zu sprechen. Ich hatte bereits im letzten Kapitel erwähnt, dass Grafiken, die mit dem Element <img> auf einer Webseite eingebunden werden, immer mit einem alt-Attribut versehen werden müssen. Je nachdem, ob der Inhalt des Bilds für das inhaltliche Verständnis relevant ist, wird das alt-Attribut gefüllt oder leer gelassen. In jedem Fall wird dem Screen-Reader-Benutzer jedoch an der jeweiligen Stelle eine Grafik angesagt und bei gefülltem alt-Attribut auch der Inhalt näher erläutert. Bisher also nichts Neues für Sie.

CSS bietet ebenfalls eine Möglichkeit, Grafiken auf einer Webseite zu platzieren und das mittels eines grafischen Hintergrunds, der mit dem Befehl background...

Neugierig geworden? Wir haben diese Angebote für dich:

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