Embed Size (px)
DESCRIPTION
Einführung in die Barrierefreiheit
Citation preview
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
