Listing 14-1 "Überarbeitetes HTML-Grundgerüst für den Beispielauftritt"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Barrierefreies Webdesign - ein zugängliches und nutzbares Internet gestalten [barrierefreies-webdesign.de]</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-15" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="lib/css/standard.css" />
<script type="text/javascript" src="lib/js/funktionen.js"></script>
</head>
<body>
<h6 class="unsichtbar">Sprungmarken</h6>
<ul id="sprungmarken">
<li><a class="unsichtbar" href="#content">Zum Inhalt</a></li>
<li><a class="unsichtbar" href="#service">Zum Info-Bereich</a></li>
</ul>
<div id="kopf">
<div id="logobox">
<div id="pfad">
<h6>Sie sind hier:</h6>
<ul>
<li><a href="#">Startseite</a></li>
<li><strong>Richtlinien</strong></li>
</ul>
</div>
<p id="logo"><a href="/"><img src="lib/img/logo.png" alt="zur Startseite" /></a></p>
<p id="slogan">Barrierefreies Webdesign <span>ein zugängliches und nutzbares Internet gestalten</span></p>
</div>
<div id="kopfbox">
<p id="kopfboxlink"><a href="/kontakt/impressum.html">Impressum</a></p>
<form action="/suche/query.html" method="get" id="suchbox">
<h6><label for="schnellsuche">Suchen Sie was auf barrierefreies-webdesign.de?</label></h6>
<p><input name="suche" id="schnellsuche" type="text" />
<button type="submit" title="Suche starten"><img src="lib/img/such-button.png" alt="Suche starten" /></button>
</p>
</form>
</div>
<div class="floatende"></div>
</div>
<div id="navigation">
<h6 class="unsichtbar">Navigation</h6>
<ul>
<li><a href="/index.html">Startseite</a></li>
<li><a href="/knowhow/">Wissen</a></li>
<li><a href="/buecher/">Bücher</a></li>
<li class="aktiv"><a href="/richtlinien/">Richtlinien</a>
<div id="unter-nav">
<h2>Übersicht Richtlinien</h2>
<ul>
<li class="aktiv">
<h6><img src="lib/img/nav-pfeil.png" alt="Aktuelle Seite" /></h6>
<strong><acronym lang="en" title="Web Content Accessibility Guidelines"><span lang="de">WCAG</span></acronym> 2.0</strong></li>
<li><a href="/bitv/"><img src="lib/img/icon-plus.png" alt="Aufklappen: " /><acronym title="Barrierefreie Informationstechnik-Verordnung">BITV</acronym></a></li>
<li><a href="/richtlinien/lgg/"><img src="lib/img/icon-plus.png" alt="Aufklappen: " />Deutsche Bundesländer</a></li>
<li><a href="/richtlinien/ibm-leitlinien/"><img src="lib/img/icon-plus.png" alt="Aufklappen: " />Software (IBM-Leitlinien)</a></li>
</ul>
</div>
</li>
<li><a href="/verweise/">Links</a></li>
<li><a href="/kontakt/">Kontakt </a></li>
</ul>
</div>
<div id="floater"></div>
<script type="text/javascript">
setFloaterHeight();
</script>
<div id="inhalt">
<h6 class="unsichtbar"><a name="content" id="content"></a>Inhalt</h6>
<h1>Die vier Prinzipien der <span lang="en">Web Content Accessibility Guidelines</span> 2.0</h1>
<h2>Die vier Prinzipien</h2>
<p>Bereits 1999 hat das <span lang="en">World Wide Web
Consortium</span> (W3C) Richtlinien zur Gestaltung von zugänglichen und
nutzbaren Webauftritten veröffentlicht, die Mitte 2002 in der
<a href="/bitv/"><img src="/lib/img/intern.gif" alt="[intern]" height="14" width="14" />&nbsp;Barrierefreien Informationstechnik-Verordnung</a> (BITV) als verbindliche Regelung für die
deutsche Bundesverwaltung übernommen wurden.</p>
<p>Mit den <span lang="en">Web Content Accessibility Guidelines</span> 2.0 (WCAG20) aus dem Jahr 2008 wird angestrebt, die
Prinzipien der Barrierefreiheit unabhängig von heutigen und zukünftigen
Techniken zu formulieren. <abbr title="das heißt">D. h.</abbr> nicht,
dass die bisherigen Richtlinien verworfen werden, im Gegenteil: Sie
werden vorausgesetzt, indem fast alle bisherigen Kriterien in den WCAG20
aufgenommen und einer der nachfolgenden vier Prinzipien zugeordnet
wurden:</p>
<ul>
<li>wahrnehmbar</li>
<li>bedienbar</li>
<li>verständlich</li>
<li>robust</li>
</ul>
<p>Der Unterschied liegt in der Formulierung der Erfolgskriterien:
Sie sind jetzt auf der einen Seite allgemeiner formuliert, sodass sie
sich auch auf beliebige Techniken anwenden lassen, und auf der anderen
Seite wird auf die Verständlichkeit und auch Übersetzbarkeit in andere
Sprachen sehr geachtet. Insgesamt haben sich die Anforderungen an die
Barrierefreiheit ausgeweitet und umfassen mehr Aspekte der Interaktion
als in der Version aus 1999. Außerdem wurde die technische
Überprüfbarkeit der Richtlinien stärker gewichtet.</p>
<p>Die nachfolgend aufgeführten Prinzipien sind der deutschen
Fassung der WCAG20, den <a href="http://www.w3.org/Translations/WCAG20-de/"><img src="/lib/img/de.gif" alt="[extern, deutsch]" />&nbsp;Richtlinien für barrierefreie Webinhalte</a>,
entnommen. Für eine schnellere Orientierung finden Sie eine Übersicht mit Filterfunktion auf
<a href="http://2bweb.de/wcag20"><img src="/lib/img/de.gif" alt="[extern, deutsch]" />&nbsp;http://2bweb.de/wcag20</a>.</p>
<h2>Prinzip 1: wahrnehmbar</h2>
<p><strong>Informationen und Bestandteile der
Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass
diese sie wahrnehmen können.</strong></p>
<p>Das Prinzip "wahrnehmbar" umfasst folgende einzelne Richtlinien:</p>
<ol>
<li>Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, sodass diese in andere vom Benutzer benötigte Formen geändert werden können, wie z. B. Großschrift, Braille, Symbole oder einfachere Sprache.</li>
<li>Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung.</li>
<li>Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (z. B. einfacheres Layout), ohne dass Informationen oder Struktur verloren gehen.</li>
<li>Machen Sie es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund.</li>
</ol>
<h2>Prinzip 2: bedienbar</h2>
<p><strong>Bestandteile der Benutzerschnittstelle und
Navigation müssen bedienbar sein.</strong></p>
<p>Das Prinzip "bedienbar" umfasst folgende einzelne Richtlinien:</p>
<ol>
<li>Sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.</li>
<li>Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen.</li>
<li>Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen.</li>
<li>Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen, zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.</li>
</ol>
<h2>Prinzip 3: verständlich</h2>
<p><strong>Informationen und Bedienung der
Benutzerschnittstelle müssen verständlich sein.</strong></p>
<p>Das Prinzip "verständlich" umfasst folgende einzelne Richtlinien:</p>
<ol>
<li>Machen Sie Inhalt lesbar und verständlich.</li>
<li>Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren.</li>
<li>Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu
korrigieren.</li>
</ol>
<h2>Prinzip 4: robust</h2>
<p><strong>Inhalte müssen robust genug sein, damit sie
zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich
assistierender Techniken interpretiert werden können.</strong></p>
<p>Das Prinzip "robust" umfasst eine Richtlinie:</p>
<ol>
<li>Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken.</li>
</ol>
</div>
<div id="infobox">
<div id="aktuelles">
<h2><a name="service" id="service"></a>Was gibt es Neues?</h2>
<p>Die aktuellsten Informationen auf diesem Webauftritt sind:</p>
<dl>
<dt><a href="#">Beitragstitel</a></dt>
<dd>Beschreibung des Beitrags</dd>
<dt><a href="#">Beitragstitel</a></dt>
<dd>Beschreibung des Beitrags</dd>
<dt><a href="#">Beitragstitel</a></dt>
<dd>Beschreibung des Beitrags</dd>
</dl>
</div>
<div id="hilfe">
<h2>Benötigen Sie Hilfe?</h2>
<p>Einige Fragen und Antworten finden Sie in der <a href="/hilfe/">Hilfe</a>.
Einige Begriffe finden Sie im <a href="/glossar/">Glossar</a> erläutert.</p>
</div>
<div id="accesskey">
<h2>Der schnelle Seitenzugriff</h2>
<p>Einige Links können direkt mit der Tastatur aufgerufen werden.
Lesen Sie bitte, welche <a href="#">Tastaturkürzel für dieses
Webangebot</a> berücksichtigt wurden.</p>
</div>
<div id="werbung">
<h2>Werbung</h2>
<p>Werbung Werbung Werbung Werbung Werbung Werbung Werbung Werbung</p>
</div>
</div>
<div id="fussleiste">
<h6 class="unsichtbar">Seitenabschluss</h6>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/knowhow/">Wissen</a></li>
<li><a href="/buecher/">Bücher</a></li>
<li class="aktiv"><a href="/richtlinien/"><span class="unsichtbar">Aktueller Bereich: </span>Richtlinien</a></li>
<li><a href="/verweise/">Links</a></li>
<li><a href="/kontakt/">Kontakt </a></li>
</ul>
<div id="abschluss">
<p>&copy; Jan Eric Hellbusch (2001-2010)</p>
</div>
<div class="floatende"></div>
</div>
</body>
</html>

Dieses Beispiel stammt aus dem Buch Barrierefreiheit verstehen und umsetzen.