Nicolai Schwarz Barrierefreiheit

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.“

„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;
}

<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” 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>

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: “” “”; }

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/

<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/

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

Nicolai Schwarz Barrierefreiheit

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Nicolai Schwarz Barrierefreiheit

Semelhante a Nicolai Schwarz Barrierefreiheit (20)

Mais de Nicolai Schwarz

Mais de Nicolai Schwarz (14)

Nicolai Schwarz Barrierefreiheit