Nicolai Schwarz Barrierefreiheit

Download Nicolai Schwarz Barrierefreiheit

Post on 13-Dec-2014

2.053 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

Einfhrung in die Barrierefreiheit

TRANSCRIPT

<ul><li> 1. Barrierefreies Webdesign Langer Donnerstag Februar 2010 Jan Eric Hellbusch und Nicolai Schwarz </li> <li> 2. Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann. </li> <li> 3. Design </li> <li> 4. 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 Textgre kleiner 18px (ohne Fettschrift) und kleiner 14px (fett geschrieben) ein Verhltnis 4,5:1 aufweisen, kleiner 18px (nicht fett geschrieben) und grer 18px (bei Fettschrift) noch 3:1, um die AA Spezifikationen zu erfllen. Fr die AAA-Spezifikation betrgt die Ratio sogar 7:1 bzw. 4,5:1 (A, AA und AAA sind die Stufen der Konformitt, mit denen die Zugnglichkeit einer Internetseite vom W3C bewertet wird). Text ber gemustertem Hinter- grund oder Bildern sollte dementsprechend hher 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/ </li> <li> 5. http://www.webkrauts.de/2008/07/08/sonnenseiten-barrierefreiheit/ </li> <li> 6. /* 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; } </li> <li> 7. (X)HTML </li> <li> 8. <div><ul><li>Aktuelle Seite h6&gt;Startseite</li> <li>Aktuelles</li> <li>Netzhauterkran- kungen</li> <li>Beratung</li> <li>Regionalgruppen a&gt;</li> <li>Forschungsfr- derung</li> <li>ffentlichkeit</li> <li>ber uns</li> </ul></div> </li> <li> 9. <div><ul><li>Aktuelle Seite h6&gt;Startseite</li> <li>Aktuelles</li> <li>Netzhauterkran- kungen</li> <li>Beratung</li> <li>Regionalgruppen a&gt;</li> <li>Forschungsfr- derung</li> <li>ffentlichkeit</li> <li>ber uns</li> </ul></div> </li> <li> 10. Adressangaben<br />Vor- und Zuname:<br />Strae und Haus- nummer:<br />PLZ:Ort: </li> <li> 11. Adressangaben<br />Vor- und Zuname:<br />Strae und Haus- nummer:<br />PLZ:Ort: </li> <li> 12. Adressangaben<br />Vor- und Zuname:<br />Strae und Haus- nummer:<br />PLZ:Ort: </li> <li> 13. Tastatur </li> <li> 14. http://people.opera.com/patrickl/experiments/keyboard/test </li> <li> 15. { overflow: hidden; } verhindert den langen Rahmen links heraus. </li> <li> 16. 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: ; } </li> <li> 17. 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: ; } </li> <li> 18. Prfen, ob die Reset-Anweisungen sinnvoll sind :focus { outline: none; } unterdrckt die Outline fr alle User; sowohl beim Draufklicken mit der Maus als auch bei Nutzung der Tastatur a:hover, a:active { outline: none; } unterdrckt die Outline beim Draufklicken mit der Maus Nutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline http://www.webkrauts.de/2009/12/11/verliere-nicht-den-focus/ </li> <li> 19. <div> <p>Sprung zum Inhalt.</p> </div> </li> <li> 20. .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; } </li> <li> 21. CSS fr versteckte Inhalte position:absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; Fr fokusierbare Elemente wie Links oder Formulare http://webaim.org/blog/hiding-content-for-screen-readers/ </li> <li> 22. Leichte Sprache </li> <li> 23. Vielen Dank. </li> <li> 24. Die Referenten Jan Eric Hellbusch Nicolai Schwarz twitter.com/2bweb twitter.com/textformer www.sinn-fr-barrierefreiheit.de www.textformer.de Sachbuchautor freier Designer und Webentwickler Delegierter des DVBS im Fach- aus Dortmund ausschusses fr Informations- und Autor fr t3n, PHP User, Telekommunikationssysteme der Create or Die Blinden- und Sehbehinderten- Redaktionelle Mitarbeit beim verbnde Deutschlands Webstandards-Magazin Leiter des AK Homepage der Redaktion Webkrauts PRO RETINA </li> </ul>