Kollermedia.at » Accessibility Checkliste

Accessibility Checkliste

Posted By Jürgen Koller On 18. Juli 2010 @ 11:08 In Scripts etc. | 2 Comments

Weisser Rollstuhl auf blauem Hintergrund Barrierefreie bzw. Zugängliche Websites umzusetzen ist eigentlich einfacher als manche Leute denken. Begriffe wie XHTML valid, WAI Richtlinien, Section 508, ARIA Tags verwirren so manchen mal schnell, hält man sich jedoch an ein paar einfache Regeln - besteht man sämtliche Tests ohne Probleme. Um euch das Leben zu vereinfachen, hier nun eine Checkliste mit Grundlegenden Dingen die ihr beachten solltet.

Gehen wir mal davon aus, das wir eine simple XHTML 1.0 stricte Website umsetzen wollen, mit einer klassischen Struktur die Header, Navigation, Suche, Content, Sidebar und Footer enthält.

Accessibility Checkliste

html Element benötigt das lang attribute (zb: lang="de")
Title Element aussagekräftig und für jede Seite individuell gestalten
mind. 4 meta angaben machen - language (meta name="language" content="de" ), description, keywords und charset
Getrennte CSS Files für Screen & Print einbinden
Favicon einbinden (link rel="shortcut icon" href="favicon.ico")
Die Hauptstruktur mit id's statt mit class umsetzen (id="content", id="navigation", id="suche")
Skip Navigation einbauen (gleich nach dem body) die bei Focus zu sehen ist mit Sprungmarken zu #content, #navigation, #suche
Navigationen mittels ul Listen definieren
Accesskeys für Hauptnavigationspunkte und verlinktes Logo einfügen
Jeder "a link" benötigt einen aussagekräftigen title
Führen mehrere Links zur selben URL, sollte der Title ident sein
Das Attribut target="_blank" ist nicht erlaubt in strict
Jedes Bild benötigt eine aussagekräftige alt Beschreibung sowie width und height angabe
Form Element einen title geben und KEIN name attribut (nicht xhtml strict valid)
jedes Input feld benötigt zwingend ein label element, das kann aber gern mit css ausgeblendet werden
jedes text input feld benötigt ein value attribut (kann auch ruhig leer sein)
jedem Input feld einen title geben
Setzt man Fieldsets ein, ist das element legend pflicht
Am Besten nur eine h1 Überschrift definieren
Mehrere h2, h3 Überschriften sind erlaubt - Reihenfolge beachten (kein h2 vor h1)
Den Bereichen Header, Suche, Navigation und Content ein Aria Landmark role attribut geben - header bekommt role="banner", suche bekommt role="search", Navigation bekommt role="navigation", content bekommt role="main"

Im Prinzip reicht das für unsere simple Seite. Wenn der Quelltext an sich noch schön umgesetzt ist, wird die Seite durch sämtliche Tests kommen und auch ein WAI-AAA erhalten. Bei der XHTML Validierung erhält man für die role attribute eine Fehlermeldung, aber nur da der Validator das Element noch nicht kennt/berücksichtigt.

Hier noch ein paar unterstützende Code Segmente die euch vielleicht helfen:

Doctype XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Im HTML Tag darf das lang Attribut nicht vergessen werden.

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

Bei den Metatags genügt es prinzipiell 4 Angaben zu machen, und zwar den charset, den language meta tag sowie description und keywords

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="de" />
<meta name="description" content="Descriptiontext" />
<meta name="keywords" content="keyword1, keyword2, keyword3" />

CSS und Favicon Angaben

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="shortcut icon" href="favicon.ico" />

Skip Navigation, gleich nach dem body - die via focus erscheint:

<ul id="nav_skip">
<li><a href="#content" title="Zum Hauptinhalt der Seite springen [accesskey i]" accesskey="i">Zum Inhalt springen</a></li>
<li><a href="#navigation" title="Zur Hauptnavigation der Seite springen [accesskey n]" accesskey="n">Zur Navigation springen</a></li>
<li><a href="#suche" title="Zur Volltextsuche springen [accesskey s]" accesskey="s">Zur Suche springen</a></li>
</ul>

Beispiel CSS für die Skip Navigation

#nav_skip {list-style:none; position:absolute;}
#nav_skip li a {position:absolute; left:-1000px; width:1px; height:1px; overflow:hidden;}
#nav_skip li a:focus, #nav_skip li a:active {left:0; top:0; width:140px; display:block; height:auto; overflow:visible;}

Beispiel einer simplen Textsuche

<form action="" method="get" id="suche" role="search" title="Volltextsuche">
<fieldset>
<legend>Volltextsuche</legend>
<label for="suchbegriff">Suchbegriff</label>
<input type="text" name="suchbegriff" id="suchbegriff" title="Bitte geben Sie hier Ihren Suchbegriff ein" value=""/>
<input type="submit" name="submit" id="submit" value="Suche" title="Suche starten"/>
</fieldset>
</form>

Korrekter link tag

<a href="http://www.seite.at/artikel/239" title="zum Artikel - Wie sollte ein richtiger title aussehen">den ganzen Artikel lesen</a>

Korrekter img tag

<img src="img/auto_mg_135.jpg" width="90" height="90"  alt="Silbernes Auto der Marke MG - Baujahr 2005" />

Weiterführende Links

Hier noch ein paar nützliche Links

W3C Validation Service ^[1]
W3C CSS Validation Service ^[2]
Section 508 und WAI Validation ^[3]
WAVE - Web Accessibility evaluation Tool ^[4]
WAI-ARIA 1.0 Working Draft ^[5]

Article printed from Kollermedia.at: http://www.kollermedia.at

URL to article: http://www.kollermedia.at/archive/2010/07/18/accessibility-checkliste/

URLs in this post:

[1] W3C Validation Service: http://validator.w3.org/

[2] W3C CSS Validation Service: http://jigsaw.w3.org/css-validator/

[3] Section 508 und WAI Validation: http://www.cynthiasays.com/

[4] WAVE - Web Accessibility evaluation Tool: http://wave.webaim.org/

[5] WAI-ARIA 1.0 Working Draft: http://www.w3.org/TR/wai-aria/

Click here to print.