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
W3C CSS Validation Service
Section 508 und WAI Validation
WAVE – Web Accessibility evaluation Tool
WAI-ARIA 1.0 Working Draft
Jürgen Liechtenecker schreibt:
gute und einfache übersicht, allerdings mit wai-aaa greifst du ein wenig hoch, denn du hast hier eigentlich nur das reine html beschrieben und zu einer website gehört ja auch inhalt und design. ich reisse nur einiges an: kontraste, farbblindheiten, grössenordnungen, skalierbarkeit, barrierefreie texte, videos, untertitel.
heute wird ja überall jacascript verwendet. Da muss oft mit sehr komplexen workarounds gearbeitet werden, zum Beispiel bei einer Formular validierung. in Wahrheit ist es fast unmöglich eine wai-aaa Site hochzuziehen. Deine Anforderungen entsprechen aber auf jeden Fall Level a
heute wird ja fast ba
Jürgen Koller schreibt:
Hi Jürgen,
hast natürlich recht mit den anderen Bereichen – hab jetzt nur die HTML Markup Sicht beschrieben – aus dieser Sicht (wenn der Rest passt) erreicht man damit aber durchaus AAA.
Für den ORF mach ich zb. gerade 3 bekannte Seiten neu die auch AAA verlangen – da wird bei den Haupttemplates (man solls nicht glauben) keine Zeile javascript eingesetzt 🙂 – also auch das gibts noch & macht die Sache natürlich wesentlich einfacher.