0
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 i...
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;
}

#haup...
(X)HTML
<div class=”content”><ul class=”menu”>
<li class=”leaf first active-trail”><h6 class=”unsichtbar”>Aktuelle Seite</
h6><str...
<div class=”content”><ul class=”menu”>
<li class=”leaf first active-trail”><h6 class=”unsichtbar”>Aktuelle Seite</
h6><str...
<form action=”post.php” method=”post”>
<fieldset><legend>Adressangaben</legend><br />
<label for=”vollerName”>Vor- und Zun...
<form action=”post.php” method=”post”>
<fieldset><legend>Adressangaben</legend><br />
<label for=”vollerName”>Vor- und Zun...
<form action=”post.php” method=”post”>
<fieldset><legend>Adressangaben</legend><br />
<label for=”vollerName”>Vor- und Zun...
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,...
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,...
Prüfen, ob die Reset-Anweisungen sinnvoll sind


:focus { outline: none; }

unterdrückt die Outline für alle User;
sowohl ...
<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...
CSS für versteckte Inhalte


 position:absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden...
Leichte Sprache
Vielen Dank.
Die Referenten


Jan Eric Hellbusch                    Nicolai Schwarz
twitter.com/2bweb                     twitter.com/t...
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Upcoming SlideShare
Loading in...5
×

Nicolai Schwarz Barrierefreiheit

2,230

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,230
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×