Chancen und Risiken von CSS bezüglich der Barrierefreiheit anhand ausgewählter Beispiele

1. Barrierefreiheit und Karrierefrauen
Chancen und Risiken von CSS bezüglich der
Barrierefreiheit anhand ausgewählter Beispiele
Kai Laborenz, Sunbeam GmbH

2. Eigentlich sollte der Vortrag ja so heißen...
Chancen und Risiken von CSS bezüglich der Barrierefreiheit
anhand ausgewählter Beispiele

4. Worum geht es heute?
Chancen und Risiken allgemein
Gute und schlechte Beispiele
Chance: skalierbare Menüs mit CSS
Risiko und Chance: versteckte Elemente
Risiko: Link-Icons mit CSS
Chance: Freie Quellcodereihenfolge
Risiko: CSS Image Replacement
Chance: CSS und Javascript

5. Chancen und Risiken
Gute Beispiele Die dunkle Seite

6. Chancen
„Warum ist CSS so wichtig für die Barrierefreiheit?“
Trennung von Struktur (HTML-„Markup“) und
Prä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)

7. Risiken
„Wo liegen die Probleme?“
CSS ist anders als Tabellen
„width: 200px“ meint auch „Breite: 200 Pixel“ (zumindest in
modernen Browsern)
einige beliebte Funktionen sind mit CSS kompliziert
umsetzbar (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> zu
ersetzen!

8. Stern.de

9. Spiegel.de

10. So ist‘s besser: Einfach-fuer-Alle.de

11. Tagesschau.de

12. Chance: Skalierbare semantische Elemente
HTML bietet für viele Gelegenheiten die passenden
Elemente
<h1>Dies ist eine Überschrift </h1>

13. Chance: Skalierbare semantische Elemente
HTML bietet für viele Gelegenheiten die passenden
Elemente
<h1>Dies ist eine Überschrift </h1>

14. ...oder Menüs
<ul>
<li>Erster Auswahlpunkt</li>
<li>Zweiter Auswahlpunkt</li>
<li>Dritter Auswahlpunkt</li>
</ul>

15. Chance vertan: cnet.com
Menü
als Liste

16. Skalierbarkeit? Fehlanzeige!
Überlagerungen
aufgrund
fixer Breiten
durch Grafiken

17. Update in letzter Sekunde...

18. Dabei ist es so einfach!
Zutaten:
Semantisches HTML: die Liste
Ein paar Grafiken mit Übermaß
Etwas CSS

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

20. Die Grafiken
Zwei Grafiken mit Übermaß

21. Der Trick
Sichtbarer Bereich
KLEIN
GROSS

22. 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;
}

23. 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;
}

24. 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;
}

25. Und so sieht‘s aus

26. Risiko: versteckte Elemente
CSS erlaubt es, Elemente mit passenden Eigenschaften
„unsichtbar zu machen“
allerdings...
display: none = „read“: none
visibility: hidden = „hearability“: hidden

27. Lösung: Verschobene Elemente
.usb {
display : block;
position : absolute;
left : -3000em;
height : 1px;
width : 1px;
}

28. Und so sieht‘s aus
<h2>Text mit display none</h2>
<p class="displayNone">Hier wurde
display: none eingesetzt.</p>
<h2>Text mit visibility hidden</h2>
<p class="visHidden">Hier wurde
visibility: hidden eingesetzt.</p>
<h2>Verschobener Text</h2>
<p class="usb">Dieser Text ist nur
verschoben.</p>
...und so hört es sich an

29. Risiko: Link-Icons mit CSS
Forderung aus der BITV: Externe Links (insbesondere wenn
sie in einem neuen Fenster geöffnet werden) sollen als solche
erkennbar sein (BITV 10.1 und 13)
Lösung (traditionell): Kleine Bilder mit Link-Symbolen
werden direkt in den Quellcode eingebunden
Lösung (neu): Per CSS werden die Icons eingeblendet

30. Das Problem: Screenreader lesen kein CSS
ohne Grafiken: kein Symbol, kein Hinweis
ohne CSS: kein Symbol, kein Hinweis
im Screenreader: kein Symbol, keine Vorwarnung

31. Was tun?
Lösung 1: normales IMG im Dokument mit ALT-Text
Nachteil: „Verunstaltung des Quellcodes“, keine sonstige
Markierung des Links, keine Unterscheidung zwischen Link und
Hover,... kann nur vor oder nach dem Link stehen
Vorteil: geht immer (für IE sollten keine Abmessungen notiert
sein)
Lösung 2: CSS-Icon in Verbindung mit verstecktem Text
Nachteil: Bilder aus, CSS an führt zu keiner Markierung
Vorteil: elegant (kein IMG im Text), kann vor (Vorlesetext) und
nach (Icon) dem Link angezeigt werden.

32. ohne Grafiken

33. So sieht‘s aus...
...und so hört es sich an

34. Der HTML-Code
Dieser <a href="#3" class="external-link"> <em>
(extern, neues Fenster): </em>Link</a> ist per CSS
und verstecktem Text gekennzeichnet.

35. Der HTML-Code
Dieser <a href="#3" class="external-link"> <em>
(extern, neues Fenster): </em>Link</a> ist per CSS
und verstecktem Text gekennzeichnet.

36. Der HTML-Code
Dieser <a href="#3" class="external-link"> <em>
(extern, neues Fenster): </em>Link</a> ist per CSS
und verstecktem Text gekennzeichnet.

37. 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;
}

38. Aber...
a.external-link {
background: url(icon_ext_link.gif) no-repeat bottom right;
padding-right: 16px;
}
Im Kontrastmodus werden Hintergrundbilder
deaktiviert
Lösung durch CSS2:
a.external-link:after {
content: " " url(icon_ext_link.gif);
}
Funktioniert nicht im Internet Explorer 6
Lösung: Javascript...

39. Chance: Freie Wahl des Quellcodes
Gut* für Suchmaschinen und Barrierefreiheit: Inhalt
vor der Navigation (im Quellcode) - insbesondere
wenn sie lang ist
Außerdem wollen wir:
3 Spalten
Flexibles Layout (ändert sich mit der Bildschirmgröße)
Unterschiedliche Einheiten für alle drei Spalten!
*vermutlich

40. Variante 1 (traditionell mit floats):
#menue {
<div id="menue">
background: #006699;
<p>Menü</p> width: 20%;
</div> float: left;
}
<div id="inhalt">
#inhalt {
<p>Inhalt</p> background: #CC3300;
</div> width: 60%;
float: left;
<div id="marginalie"> }
<p>Marginalie</p> #marginalie {
</div> background: #669933;
width: 20%;
float: left;
}
Problem: Funktioniert nur reibungslos,
wenn alle Breiten in Prozenten angegeben sind

41. Variante 2 (floats rechts und links):
#menue {
<div id="menue"> background: #006699;
<p>Menü</p> width: 10em;
</div> float: left;
}
<div id="marginalie"> #inhalt {
<p>Marginalie</p> background: #CC3300;
</div> margin: 0 20% 0 10em;
}
<div id="inhalt"> #marginalie {
<p>Inhalt</p> background: #669933;
</div> width: 20%;
float: right;
}
Problem: Kasten mit den Inhalten
kommt erst ganz am Ende

42. Variante 3 (position: absolute):
<div id="inhalt"> #menue {
<p>Inhalt</p> position: absolute;
</div> width: 10em;
left: 0;
<div id="menue"> top: 0;
<p>Menü</p> }
</div> #inhalt {
margin: 0 20% 0 10em;
}
<div id="marginalie">
#marginalie {
<p>Marginalie</p> position: absolute;
</div> width: 20%;
right: 0;
top: 0;
}

43. position: absolute??
Verwendung von position: absolute als
Methode, die Elemente der Seite pixelgenau
auf der Seite zu platzieren
Verwendung von position: absolute für
innerhalb von mit position: relative als
Basis markierten Container, z.B. in einem
per margin freigesperrten Bereich

44. Risiko: CSS Image Replacement
Was ist das?
Mit Hilfe von Hintergrundgrafiken wird einem Element
ein grafischer Text zugewiesen. Der eigentliche Text
wird „verschoben“
Problem:
Bei den meisten Techniken wird bei anderem
Hintergrundeinstellungen (z.B. durch Kontrastmodus
von Windows) gar nichts angezeigt
Weitere Infos:
http://meiert.com/de/publications/articles/20050513/

45. 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%;
}

46. Chance: CSS und Javascript
Mit Hilfe von JavaScript lassen sich CSS-Eigenschaften
verändern
z.B. Hinweise in Formularen
Beispiel: Auflösungsabhängiges Design
Moderne Screenreader können mit JavaScript umgehen
- zusätzliche Hilfen sind generell erlaubt

47. Auflösungsabhängiges Design (www.woche-des-sehens.de)
800 Pixel Breite
1024 Pixel Breite

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

49. Kai Laborenz
Geschäftsführer der Sunbeam GmbH
Berliner Agentur für Kommunikation
(Barrierefreie) Webentwicklung
Design, modernes HTML & CSS, Softwareentwicklung
Spezialität: TYPO3 (Content-Managementsystem)
Ausserdem klassische PR, Ausstellungen und Printdesign
laborenz@sunbeam-berlin.de
www.sunbeam-berlin.de/eGov06