Nicolai Schwarz Barrierefreiheit

2,615 views
2,574 views

Published on

Einführung in die Barrierefreiheit

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,615
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Nicolai Schwarz Barrierefreiheit

  1. 1. Barrierefreies Webdesign Langer Donnerstag Februar 2010 Jan Eric Hellbusch und Nicolai Schwarz
  2. 2. „Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann.“
  3. 3. Design
  4. 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 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/
  5. 5. http://www.webkrauts.de/2008/07/08/sonnenseiten-barrierefreiheit/
  6. 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; }
  7. 7. (X)HTML
  8. 8. <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>
  9. 9. <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>
  10. 10. <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>
  11. 11. <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>
  12. 12. <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>
  13. 13. Tastatur
  14. 14. http://people.opera.com/patrickl/experiments/keyboard/test
  15. 15. { overflow: hidden; } verhindert den langen Rahmen links heraus.
  16. 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: “” “”; }
  17. 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: “” “”; }
  18. 18. 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 Maus Nutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline http://www.webkrauts.de/2009/12/11/verliere-nicht-den-focus/
  19. 19. <body id=”top”> <div id=”skip”> <p class=”skiplink”><a href=”#textsprung”>Sprung zum Inhalt</a>.</p> </div>
  20. 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; }
  21. 21. 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/
  22. 22. Leichte Sprache
  23. 23. Vielen Dank.
  24. 24. Die Referenten Jan Eric Hellbusch Nicolai Schwarz twitter.com/2bweb twitter.com/textformer www.sinn-für-barrierefreiheit.de www.textformer.de • Sachbuchautor • freier Designer und Webentwickler • Delegierter des DVBS im Fach- aus Dortmund ausschusses für Informations- und • Autor für t3n, PHP User, Telekommunikationssysteme der Create or Die Blinden- und Sehbehinderten- • Redaktionelle Mitarbeit beim verbände Deutschlands Webstandards-Magazin • Leiter des AK Homepage der • Redaktion Webkrauts PRO RETINA

×