nicolai schwarz barrierefreiheit

Download Nicolai Schwarz Barrierefreiheit

Post on 13-Dec-2014

2.054 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

Einfhrung in die Barrierefreiheit

TRANSCRIPT

  • 1. Barrierefreies Webdesign Langer Donnerstag Februar 2010 Jan Eric Hellbusch und Nicolai Schwarz
  • 2. Barrierefreies Webdesign ist die Kunst, Webseiten so zu gestalten, dass jeder sie nutzen und lesen kann.
  • 3. Design
  • 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/
  • 5. http://www.webkrauts.de/2008/07/08/sonnenseiten-barrierefreiheit/
  • 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. (X)HTML
  • 8.
    • Aktuelle Seite h6>Startseite
    • Aktuelles
    • Netzhauterkran- kungen
    • Beratung
    • Regionalgruppen a>
    • Forschungsfr- derung
    • ffentlichkeit
    • ber uns
  • 9.
    • Aktuelle Seite h6>Startseite
    • Aktuelles
    • Netzhauterkran- kungen
    • Beratung
    • Regionalgruppen a>
    • Forschungsfr- derung
    • ffentlichkeit
    • ber uns
  • 10. Adressangaben
    Vor- und Zuname:
    Strae und Haus- nummer:
    PLZ:Ort:
  • 11. Adressangaben
    Vor- und Zuname:
    Strae und Haus- nummer:
    PLZ:Ort:
  • 12. Adressangaben
    Vor- und Zuname:
    Strae und Haus- nummer:
    PLZ:Ort:
  • 13. Tastatur
  • 14. http://people.opera.com/patrickl/experiments/keyboard/test
  • 15. { overflow: hidden; } verhindert den langen Rahmen links heraus.
  • 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. 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. 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/
  • 19.

    Sprung zum Inhalt.

  • 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. 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/
  • 22. Leichte Sprache
  • 23. Vielen Dank.
  • 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