Chancen und Risiken von CSS bezüglich derBarrierefreiheit anhand ausgewählter BeispieleKai Laborenz, Sunbeam GmbH
Barrierefreiheit und Karrierefrauen
Eigentlich sollte der Vortrag ja so heißen...
Chancen und Risiken von CSS bezüglich der Barrierefreiheit anhand ausgewählter Beispiele
Worum geht es heute?
Chancen und Risiken allgemeinGute und schlechte Beispiele
Chance: skalierbare Menüs mit CSSRisiko und Chance: versteckte ElementeRisiko: Link-Icons mit CSSChance: Freie QuellcodereihenfolgeRisiko: CSS Image ReplacementChance: CSS und Javascript
Chancen und Risiken
Gute Beispiele Die dunkle Seite
„Warum ist CSS so wichtig für die Barrierefreiheit?“
Chancen
Trennung von Struktur (HTML-„Markup“) undPräsentation erlaubt variable Präsentation
für unterschiedliche Ausgabegeräte (Browser, Handy,Screenreader, ...)für eigene Vorgaben (Userstylesheets,Betriebssytemvorgaben, ...)
Design für Flexibilität
Völlig neue Möglichkeiten (versteckte Texte)
Risiken
CSS ist anders als Tabellen„width: 200px“ meint auch „Breite: 200 Pixel“ (zumindest inmodernen Browsern)einige beliebte Funktionen sind mit CSS kompliziertumsetzbar (z.B. gleichlange Spalten)
Fordert andere Herangehensweise (Semantik statt Optik)
Unterstützung älterer Browser verbesserungswürdig(sprich: Internet Explorer 6)
CSS-Design bedeutet nicht, <table> durch <div> zuersetzen!
„Wo liegen die Probleme?“
Stern.de
Spiegel.de
So ist‘s besser: Einfach-fuer-Alle.de
Tagesschau.de
Chance: Skalierbare semantische Elemente
HTML bietet für viele Gelegenheiten die passendenElemente
<h1>Dies ist eine Überschrift </h1>
Chance: Skalierbare semantische Elemente
HTML bietet für viele Gelegenheiten die passendenElemente
<h1>Dies ist eine Überschrift </h1>
...oder Menüs
<ul><li>Erster Auswahlpunkt</li><li>Zweiter Auswahlpunkt</li><li>Dritter Auswahlpunkt</li></ul>
Chance vertan: cnet.com
Menüals Liste
Skalierbarkeit? Fehlanzeige!
Überlagerungenaufgrundfixer Breitendurch Grafiken
Update in letzter Sekunde...
Dabei ist es so einfach!
Zutaten:Semantisches HTML: die ListeEin paar Grafiken mit ÜbermaßEtwas CSS
Der HTML-Code
<ul><li><a href =„#“>Erster Punkt</a></li><li><a href =„#“>Zweiter Punkt</a></li><li><a href =„#“>Dritter Punkt</a></li></ul>
Zwei Grafiken mit Übermaß
Die Grafiken
KLEIN
Der Trick
GROSS
Sichtbarer Bereich
Das CSS - Teil 1
ul { list-style-type : none; margin : 0; padding : 0;}li { float : left; background : url(menuereiter02_links.gif) no-repeat top left;}li a { float : left; background : url(menuereiter02_rechts.gif) no-repeat top right; padding : 0.2em 1em; text-align : center; text-decoration : none;}
Das CSS - Teil 2
ul { list-style-type : none; margin : 0; padding : 0;}
li { float : left; background : url(menuereiter02_links.gif)
no-repeat top left;}li a { float : left; background : url(menuereiter02_rechts.gif) no-repeat top right; padding : 0.2em 1em; text-align : center; text-decoration : none;}
Das CSS - Teil 3
ul { list-style-type : none; margin : 0; padding : 0;}li { float : left; background : url(menuereiter02_links.gif) no-repeat top left;}
li a { float : left; background : url(menuereiter02_rechts.gif)
no-repeat top right; padding : 0.2em 1em; text-align : center; text-decoration : none;}
Und so sieht‘s aus
Risiko: versteckte Elemente
CSS erlaubt es, Elemente mit passenden Eigenschaften„unsichtbar zu machen“
allerdings...display: none = „read“: nonevisibility: hidden = „hearability“: hidden
Lösung: Verschobene Elemente
.usb { display : block; position : absolute; left : -3000em; height : 1px; width : 1px;}
Und so sieht‘s aus
<h2>Text mit display none</h2><p class="displayNone">Hier wurdedisplay: none eingesetzt.</p>
<h2>Text mit visibility hidden</h2><p class="visHidden">Hier wurdevisibility: hidden eingesetzt.</p>
<h2>Verschobener Text</h2><p class="usb">Dieser Text ist nurverschoben.</p>
...und so hört es sich an
Risiko: Link-Icons mit CSS
Forderung aus der BITV: Externe Links (insbesondere wenn
sie in einem neuen Fenster geöffnet werden) sollen als solcheerkennbar sein (BITV 10.1 und 13)
Lösung (traditionell): Kleine Bilder mit Link-Symbolenwerden direkt in den Quellcode eingebunden
Lösung (neu): Per CSS werden die Icons eingeblendet
Das Problem: Screenreader lesen kein CSS
ohne Grafiken: kein Symbol, kein Hinweisohne CSS: kein Symbol, kein Hinweis
im Screenreader: kein Symbol, keine Vorwarnung
Was tun?
Lösung 1: normales IMG im Dokument mit ALT-TextNachteil: „Verunstaltung des Quellcodes“, keine sonstigeMarkierung des Links, keine Unterscheidung zwischen Link undHover,... kann nur vor oder nach dem Link stehenVorteil: geht immer (für IE sollten keine Abmessungen notiertsein)
Lösung 2: CSS-Icon in Verbindung mit verstecktem TextNachteil: Bilder aus, CSS an führt zu keiner MarkierungVorteil: elegant (kein IMG im Text), kann vor (Vorlesetext) undnach (Icon) dem Link angezeigt werden.
ohne Grafiken
So sieht‘s aus...
...und so hört es sich an
Der HTML-Code
Dieser <a href="#3" class="external-link"> <em>(extern, neues Fenster): </em>Link</a> ist per CSSund verstecktem Text gekennzeichnet.
Der HTML-Code
Dieser <a href="#3" class="external-link"> <em>(extern, neues Fenster): </em>Link</a> ist per CSSund verstecktem Text gekennzeichnet.
Der HTML-Code
Dieser <a href="#3" class="external-link"> <em>(extern, neues Fenster): </em>Link</a> ist per CSSund verstecktem Text gekennzeichnet.
Das CSS
a.external-link {background: url(icon_ext_link.gif) no-repeat
bottom right;padding-right: 16px;
}
a em { display: block; position: absolute; left: -3000em; height: 1px; width: 1px;}
Aber...
a.external-link {background: url(icon_ext_link.gif) no-repeat bottom right;padding-right: 16px;
}
Im Kontrastmodus werden HintergrundbilderdeaktiviertLösung durch CSS2:
a.external-link:after {content: " " url(icon_ext_link.gif);
}
Funktioniert nicht im Internet Explorer 6Lösung: Javascript...
Chance: Freie Wahl des Quellcodes
Gut* für Suchmaschinen und Barrierefreiheit: Inhaltvor der Navigation (im Quellcode) - insbesonderewenn sie lang ist
Außerdem wollen wir:3 SpaltenFlexibles Layout (ändert sich mit der Bildschirmgröße)Unterschiedliche Einheiten für alle drei Spalten!
*vermutlich
Variante 1 (traditionell mit floats):
<div id="menue"><p>Menü</p>
</div>
<div id="inhalt"><p>Inhalt</p>
</div>
<div id="marginalie"><p>Marginalie</p>
</div>
#menue {background: #006699;width: 20%;float: left;
}
#inhalt {background: #CC3300;width: 60%;float: left;
}
#marginalie {background: #669933;width: 20%;float: left;
}
Problem: Funktioniert nur reibungslos, wenn alle Breiten in Prozenten angegeben sind
Variante 2 (floats rechts und links):
<div id="menue"><p>Menü</p>
</div>
<div id="marginalie"><p>Marginalie</p>
</div>
<div id="inhalt"><p>Inhalt</p>
</div>
#menue {background: #006699;width: 10em;float: left;
}
#inhalt {background: #CC3300;margin: 0 20% 0 10em;
}
#marginalie {background: #669933;width: 20%;float: right;
}
Problem: Kasten mit den Inhalten kommt erst ganz am Ende
Variante 3 (position: absolute):
<div id="inhalt"><p>Inhalt</p>
</div>
<div id="menue"><p>Menü</p>
</div>
<div id="marginalie"><p>Marginalie</p>
</div>
#menue {position: absolute;width: 10em;left: 0;top: 0;
}#inhalt {
margin: 0 20% 0 10em;}#marginalie {
position: absolute;width: 20%;right: 0;top: 0;
}
position: absolute??
Verwendung von position: absolute alsMethode, die Elemente der Seite pixelgenauauf der Seite zu platzieren
Verwendung von position: absolute fürinnerhalb von mit position: relative alsBasis markierten Container, z.B. in einemper margin freigesperrten Bereich
Risiko: CSS Image Replacement
Was ist das?Mit Hilfe von Hintergrundgrafiken wird einem Elementein grafischer Text zugewiesen. Der eigentliche Textwird „verschoben“
Problem:Bei den meisten Techniken wird bei anderemHintergrundeinstellungen (z.B. durch Kontrastmodusvon Windows) gar nichts angezeigt
Weitere Infos:http://meiert.com/de/publications/articles/20050513/
Glider- / Levinmethode
<h1><span></span>Muster</h1>
h1 {position: relative;height: 2em;
width: 6em;}h1 span { position: absolute; background: #fff url(muster.gif) no-repeat; height: 100%; width: 100%;}
Chance: CSS und Javascript
Mit Hilfe von JavaScript lassen sich CSS-Eigenschaftenverändern
z.B. Hinweise in FormularenBeispiel: Auflösungsabhängiges Design
Moderne Screenreader können mit JavaScript umgehen- zusätzliche Hilfen sind generell erlaubt
Auflösungsabhängiges Design (www.woche-des-sehens.de)
1024 Pixel Breite
800 Pixel Breite
Wie geht das?
function checkBrowserWidth() {var theWidth = getBrowserWidth();if (theWidth > 800) {
setStylesheet("1024 x 768");}else {
setStylesheet("");}return true;
};
Quellcode und Infos:http://www.themaninblue.com/writing/perspective/2004/09/21/
Kai Laborenz
Geschäftsführer der Sunbeam GmbHBerliner Agentur für Kommunikation
(Barrierefreie) WebentwicklungDesign, modernes HTML & CSS, SoftwareentwicklungSpezialität: TYPO3 (Content-Managementsystem)Ausserdem klassische PR, Ausstellungen und Printdesign
[email protected]/eGov06
Top Related