Barrierefreiheit und KarrierefrauenChancen und Risiken von CSS bezüglich derBarrierefreiheit anhand ausgewählter Beispiele...
Eigentlich sollte der Vortrag ja so heißen...     Chancen und Risiken von CSS bezüglich der Barrierefreiheit     anhand au...
Worum geht es heute?         Chancen und Risiken allgemein         Gute und schlechte Beispiele         Chance: skalierbar...
Chancen und Risiken      Gute Beispiele   Die dunkle Seite
Chancen     „Warum ist CSS so wichtig für die Barrierefreiheit?“          Trennung von Struktur (HTML-„Markup“) und       ...
Risiken      „Wo liegen die Probleme?“          CSS ist anders als Tabellen             „width: 200px“ meint auch „Breite:...
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       ...
Chance: Skalierbare semantische Elemente         HTML bietet für viele Gelegenheiten die passenden         Elemente       ...
...oder Menüs                <ul>                <li>Erster Auswahlpunkt</li>                <li>Zweiter Auswahlpunkt</li>...
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 G...
Der HTML-Code           <ul>           <li><a href =„#“>Erster Punkt</a></li>           <li><a href =„#“>Zweiter Punkt</a>...
Die Grafiken               Zwei Grafiken mit Übermaß
Der Trick            Sichtbarer Bereich               KLEIN               GROSS
Das CSS - Teil 1             ul {               list-style-type                : none;               margin               ...
Das CSS - Teil 2             ul {               list-style-type    : none;               margin             : 0;          ...
Das CSS - Teil 3             ul {                list-style-type   : none;                margin            : 0;          ...
Und so sieht‘s aus
Risiko: versteckte Elemente          CSS erlaubt es, Elemente mit passenden Eigenschaften          „unsichtbar zu machen“ ...
Lösung: Verschobene Elemente              .usb {                display    : block;                position   : absolute; ...
Und so sieht‘s aus                     <h2>Text mit display none</h2>                     <p class="displayNone">Hier wurd...
Risiko: Link-Icons mit CSS          Forderung aus der BITV: Externe Links (insbesondere wenn          sie in einem neuen F...
Das Problem: Screenreader lesen kein CSS          ohne Grafiken:     kein Symbol, kein Hinweis          ohne CSS:         ...
Was tun?      Lösung 1: normales IMG im Dokument mit ALT-Text           Nachteil: „Verunstaltung des Quellcodes“, keine so...
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...
Der HTML-Code          Dieser <a href="#3" class="external-link"> <em>          (extern, neues Fenster): </em>Link</a> ist...
Der HTML-Code          Dieser <a href="#3" class="external-link"> <em>          (extern, neues Fenster): </em>Link</a> ist...
Das CSS          a.external-link    {             background:     url(icon_ext_link.gif) no-repeat                        ...
Aber...           a.external-link {              background: url(icon_ext_link.gif) no-repeat bottom right;              p...
Chance: Freie Wahl des Quellcodes          Gut* für Suchmaschinen und Barrierefreiheit: Inhalt          vor der Navigation...
Variante 1 (traditionell mit floats):                                        #menue {      <div id="menue">               ...
Variante 2 (floats rechts und links):                                        #menue {      <div id="menue">               ...
Variante 3 (position: absolute):      <div id="inhalt">            #menue {            <p>Inhalt</p>                      ...
position: absolute??                  Verwendung von position: absolute als                  Methode, die Elemente der Sei...
Risiko: CSS Image Replacement         Was ist das?         Mit Hilfe von Hintergrundgrafiken wird einem Element         ei...
Glider- / Levinmethode           <h1><span></span>Muster</h1>           h1 {              position: relative;             ...
Chance: CSS und Javascript         Mit Hilfe von JavaScript lassen sich CSS-Eigenschaften         verändern         z.B. H...
Auflösungsabhängiges Design (www.woche-des-sehens.de)                                                 800 Pixel Breite 102...
Wie geht das?       function checkBrowserWidth() {          var theWidth = getBrowserWidth();          if (theWidth > 800)...
Kai Laborenz         Geschäftsführer der Sunbeam GmbH         Berliner Agentur für Kommunikation               (Barrierefr...
Barrierefreiheit und Karrierefrauen
Upcoming SlideShare
Loading in...5
×

Barrierefreiheit und Karrierefrauen

398

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
398
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×