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

laborenz@sunbeam-berlin.dewww.sunbeam-berlin.de/eGov06