Barrierefreies Webdesign Langer Donnerstag Februar 2010

Jan Eric Hellbusch und Nicolai Schwarz

„Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann.“

Design

„Das W3C macht da mit der WCAG 2.0 (Web Content Accessibility

Guidelines 2.0) klare Vorgaben. Der Kontrast zwischen Text im Vorder-

grund und seiner Hintergrundfarbe sollte bei einer Textgröße kleiner

18px (ohne Fettschrift) und kleiner 14px (fett geschrieben) ein Verhältnis

4,5:1 aufweisen, kleiner 18px (nicht fett geschrieben) und größer 18px

(bei Fettschrift) noch 3:1, um die AA Spezifikationen zu erfüllen. Für die

AAA-Spezifikation beträgt die Ratio sogar 7:1 bzw. 4,5:1 (A, AA und AAA

sind die Stufen der Konformität, mit denen die Zugänglichkeit einer

Internetseite vom W3C bewertet wird). Text über gemustertem Hinter-

grund oder Bildern sollte dementsprechend höher kontrastiert werden.

Texte und Schriften als Teil eines Logos oder mit rein dekorativem

Charakter hingegen sind von diesen Bestimmungen ausgenommen.“

http://www.webkrauts.de/2009/08/05/kontrastreiche-farbwelten/

http://www.webkrauts.de/2008/07/08/sonnenseiten-barrierefreiheit/

/* Hauptnavigation 2. Level */

#hauptnavigation ul li ul li a {border-left: 5px solid #FFF;padding-left: 40px;}

#hauptnavigation ul li ul li a:hover,#hauptnavigation ul li ul li a:focus,#hauptnavigation ul li ul li a:active {border-left: 10px solid #FFF;padding-left: 35px;background: url(‘http://www.landtag.nrw.de/portal/CPMO/images/ icon_ebene2_pfeil.gif’) no-repeat 18px 2px #F4F8FB;}

(X)HTML

<div class=”content”><ul class=”menu”><li class=”leaf first active-trail”><h6 class=”unsichtbar”>Aktuelle Seite</h6><strong>Startseite</strong></li><li class=”collapsed”><a href=”/aktuelles” >Aktuelles</a></li><li class=”collapsed”><a href=”/netzhauterkrankungen” >Netzhauterkran-kungen</a></li><li class=”collapsed”><a href=”/beratung” >Beratung</a></li><li class=”collapsed”><a href=”/regionalgruppen” >Regionalgruppen</a></li><li class=”collapsed”><a href=”/forschungsfoerderung” >Forschungsför-derung</a></li><li class=”collapsed”><a href=”/oeffentlichkeit” >Öffentlichkeit</a></li><li class=”collapsed last”><a href=”/ueber-uns” >Über uns</a></li></ul></div>

<div class=”content”><ul class=”menu”><li class=”leaf first active-trail”><h6 class=”unsichtbar”>Aktuelle Seite</h6><strong>Startseite</strong></li><li class=”collapsed”><a href=”/aktuelles” >Aktuelles</a></li><li class=”collapsed”><a href=”/netzhauterkrankungen” >Netzhauterkran-kungen</a></li><li class=”collapsed”><a href=”/beratung” >Beratung</a></li><li class=”collapsed”><a href=”/regionalgruppen” >Regionalgruppen</a></li><li class=”collapsed”><a href=”/forschungsfoerderung” >Forschungsför-derung</a></li><li class=”collapsed”><a href=”/oeffentlichkeit” >Öffentlichkeit</a></li><li class=”collapsed last”><a href=”/ueber-uns” >Über uns</a></li></ul></div>

<form action=”post.php” method=”post”><fieldset><legend>Adressangaben</legend><br /><label for=”vollerName”>Vor- und Zuname:</label><input id=”vollerName” /><br /><label for=”strasse”>Straße</label> <label for=”hausnummer”>und Haus-nummer:</label><input id=”strasse” /> <input id=”hausnummer” /><br /><label for=”plz”>PLZ:</label><input id=”plz” maxlength=”10” /> <label for=”ort”>Ort:</label><input id=”ort” /></fieldset></form>

<form action=”post.php” method=”post”><fieldset><legend>Adressangaben</legend><br /><label for=”vollerName”>Vor- und Zuname:</label><input id=”vollerName” /><br /><label for=”strasse”>Straße</label> <label for=”hausnummer”>und Haus-nummer:</label><input id=”strasse” /> <input id=”hausnummer” /><br /><label for=”plz”>PLZ:</label><input id=”plz” maxlength=”10” /> <label for=”ort”>Ort:</label><input id=”ort” /></fieldset></form>

<form action=”post.php” method=”post”><fieldset><legend>Adressangaben</legend><br /><label for=”vollerName”>Vor- und Zuname:</label><input id=”vollerName” aria-required=”true” /><br /><label for=”strasse”>Straße</label> <label for=”hausnummer”>und Haus-nummer:</label><input id=”strasse” /> <input id=”hausnummer” /><br /><label for=”plz”>PLZ:</label><input id=”plz” maxlength=”10” /> <label for=”ort”>Ort:</label><input id=”ort” /></fieldset></form>

Tastatur

http://people.opera.com/patrickl/experiments/keyboard/test

{ overflow: hidden; } verhindert den langen Rahmen links heraus.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }ol, ul { list-style: none; }/* tables still need ‘cellspacing=”0”’ in the markup */table { border-collapse: separate; border-spacing: 0; }caption, th, td { text-align: left; font-weight: normal; }blockquote:before, blockquote:after, q:before, q:after { content: “”; }blockquote, q { quotes: “” “”; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }ol, ul { list-style: none; }/* tables still need ‘cellspacing=”0”’ in the markup */table { border-collapse: separate; border-spacing: 0; }caption, th, td { text-align: left; font-weight: normal; }blockquote:before, blockquote:after, q:before, q:after { content: “”; }blockquote, q { quotes: “” “”; }

Prüfen, ob die Reset-Anweisungen sinnvoll sind

:focus { outline: none; }

unterdrückt die Outline für alle User; sowohl beim Draufklicken mit der Maus als auch bei Nutzung der Tastatur

a:hover, a:active { outline: none; }

unterdrückt die Outline beim Draufklicken mit der MausNutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline

http://www.webkrauts.de/2009/12/11/verliere-nicht-den-focus/

<body id=”top”> <div id=”skip”> <p class=”skiplink”><a href=”#textsprung”>Sprung zum Inhalt</a>.</p> </div>

.skiplink a:link, .skiplink a:visited { position: absolute; width: 1px; height: 1px; left: -100px; top: -100px;}

.skiplink a:hover, .skiplink a:focus, .skiplink a:active { display: block; position: absolute; left: 290px; top: 3px; width: 200px; height: auto !important;}

CSS für versteckte Inhalte

position:absolute;left: -10000px;top: auto;width: 1px;height: 1px;overflow: hidden;

Für fokusierbare Elemente wie Links oder Formulare

http://webaim.org/blog/hiding-content-for-screen-readers/

Leichte Sprache

Vielen Dank.

Die Referenten

Jan Eric Hellbuschtwitter.com/2bwebwww.sinn-für-barrierefreiheit.de

• Sachbuchautor• Delegierter des DVBS im Fach-

ausschusses für Informations- und Telekommunikationssysteme der Blinden- und Sehbehinderten- verbände Deutschlands

• Leiter des AK Homepage der PRO RETINA

Nicolai Schwarztwitter.com/textformer www.textformer.de

• freier Designer und Webentwickler aus Dortmund

• Autor für t3n, PHP User, Create or Die• Redaktionelle Mitarbeit beim Webstandards-Magazin• Redaktion Webkrauts