Barrierefreiheit und Karrierefrauen
Upcoming SlideShare
Loading in...5
×
 

Barrierefreiheit und Karrierefrauen

on

  • 477 views

Chancen und Risiken von CSS bezüglich der

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

Statistics

Views

Total Views
477
Views on SlideShare
476
Embed Views
1

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 1

http://de.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Barrierefreiheit und Karrierefrauen Barrierefreiheit und Karrierefrauen Presentation Transcript

  • Barrierefreiheit und KarrierefrauenChancen und Risiken von CSS bezüglich derBarrierefreiheit anhand ausgewählter BeispieleKai Laborenz, Sunbeam GmbH
  • 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 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
  • Chancen und Risiken Gute Beispiele Die dunkle Seite
  • 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)
  • 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!
  • 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 passenden Elemente <h1>Dies ist eine Überschrift </h1>
  • Chance: Skalierbare semantische Elemente HTML bietet für viele Gelegenheiten die passenden Elemente <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! Überlagerungen aufgrund fixer Breiten durch Grafiken
  • Update in letzter Sekunde...
  • Dabei ist es so einfach! Zutaten: Semantisches HTML: die Liste Ein 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>
  • Die Grafiken Zwei Grafiken mit Übermaß
  • Der Trick Sichtbarer Bereich KLEIN GROSS
  • 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“: none visibility: 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 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
  • 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
  • Das Problem: Screenreader lesen kein CSS ohne Grafiken: kein Symbol, kein Hinweis ohne CSS: kein Symbol, kein Hinweis im Screenreader: kein Symbol, keine Vorwarnung
  • 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.
  • 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 CSS und verstecktem Text gekennzeichnet.
  • Der HTML-Code Dieser <a href="#3" class="external-link"> <em> (extern, neues Fenster): </em>Link</a> ist per CSS und verstecktem Text gekennzeichnet.
  • Der HTML-Code Dieser <a href="#3" class="external-link"> <em> (extern, neues Fenster): </em>Link</a> ist per CSS und 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 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...
  • 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
  • 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
  • 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
  • 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; }
  • 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
  • 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/
  • 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-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
  • Auflösungsabhängiges Design (www.woche-des-sehens.de) 800 Pixel Breite 1024 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 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