Barrierefreiheit und Karrierefrauen

524 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
524
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Barrierefreiheit und Karrierefrauen

  1. 1. Barrierefreiheit und KarrierefrauenChancen und Risiken von CSS bezüglich derBarrierefreiheit anhand ausgewählter BeispieleKai Laborenz, Sunbeam GmbH
  2. 2. Eigentlich sollte der Vortrag ja so heißen... Chancen und Risiken von CSS bezüglich der Barrierefreiheit anhand ausgewählter Beispiele
  3. 3. 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
  4. 4. Chancen und Risiken Gute Beispiele Die dunkle Seite
  5. 5. 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)
  6. 6. 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!
  7. 7. Stern.de
  8. 8. Spiegel.de
  9. 9. So ist‘s besser: Einfach-fuer-Alle.de
  10. 10. Tagesschau.de
  11. 11. Chance: Skalierbare semantische Elemente HTML bietet für viele Gelegenheiten die passenden Elemente <h1>Dies ist eine Überschrift </h1>
  12. 12. Chance: Skalierbare semantische Elemente HTML bietet für viele Gelegenheiten die passenden Elemente <h1>Dies ist eine Überschrift </h1>
  13. 13. ...oder Menüs <ul> <li>Erster Auswahlpunkt</li> <li>Zweiter Auswahlpunkt</li> <li>Dritter Auswahlpunkt</li> </ul>
  14. 14. Chance vertan: cnet.com Menü als Liste
  15. 15. Skalierbarkeit? Fehlanzeige! Überlagerungen aufgrund fixer Breiten durch Grafiken
  16. 16. Update in letzter Sekunde...
  17. 17. Dabei ist es so einfach! Zutaten: Semantisches HTML: die Liste Ein paar Grafiken mit Übermaß Etwas CSS
  18. 18. 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>
  19. 19. Die Grafiken Zwei Grafiken mit Übermaß
  20. 20. Der Trick Sichtbarer Bereich KLEIN GROSS
  21. 21. 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; }
  22. 22. 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; }
  23. 23. 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; }
  24. 24. Und so sieht‘s aus
  25. 25. Risiko: versteckte Elemente CSS erlaubt es, Elemente mit passenden Eigenschaften „unsichtbar zu machen“ allerdings... display: none = „read“: none visibility: hidden = „hearability“: hidden
  26. 26. Lösung: Verschobene Elemente .usb { display : block; position : absolute; left : -3000em; height : 1px; width : 1px; }
  27. 27. 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
  28. 28. 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
  29. 29. Das Problem: Screenreader lesen kein CSS ohne Grafiken: kein Symbol, kein Hinweis ohne CSS: kein Symbol, kein Hinweis im Screenreader: kein Symbol, keine Vorwarnung
  30. 30. 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.
  31. 31. ohne Grafiken
  32. 32. So sieht‘s aus... ...und so hört es sich an
  33. 33. Der HTML-Code Dieser <a href="#3" class="external-link"> <em> (extern, neues Fenster): </em>Link</a> ist per CSS und verstecktem Text gekennzeichnet.
  34. 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. 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. 36. 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; }
  37. 37. 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...
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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; }
  42. 42. 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
  43. 43. 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/
  44. 44. 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%; }
  45. 45. 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
  46. 46. Auflösungsabhängiges Design (www.woche-des-sehens.de) 800 Pixel Breite 1024 Pixel Breite
  47. 47. 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/
  48. 48. 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

×