Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BARRIEREFREIHEIT   zum Mitnehmen und ♥ haben.Moritz GießmannDevCampKA 2013
https://twitter.com/MoritzGiessmann/status/314453725089525761
http://www.pirmasens.de/ Von einem Screenreader vorgelesen.
http://www.klampfer.atVon einem Screenreader vorgelesen.
@MoritzGiessmann HTML-Fundamentalist moritz-giessmann.de             Webmontag Karlsruhe
A11Y == Accessibility             11A11Y == Zugänglichkeit
„Web accessibility means that people withdisabilities can use the Web. Morespecifically, Web accessibility means thatpeopl...
A11Y == Usability
ACCESSIBILITY IS THE MOST IMPORTANT THING WHEN WE START       A NEW WEBPROJECT     SAID NO ONE EVERhttp://www.flickr.com/p...
„Zugängliche Websiteswerden nur von ganzkleinen Nutzergruppenbenötigt, die vernachlässigtwerden können.“              – Ra...
Einer von siebenMenschen hat eine                                   15%Behinderunghttp://www.who.int/mediacentre/factsheet...
„Der Kunde bezahlt uns dieZugänglichkeitsfeaturesnicht, wir können uns dasnicht leisten.“               – Random Productma...
SO YOUR CLIENTS PAY YOU FOR UNACCESSIBILTY FEATURES?
A11Y ist für Menschenmit Behinderungen?
A11Y ist für ALLE**Es ist nur eine Frage der Zeit, wann sie für uns wichtig wird.
„The first Web pages ever wereresponsive from the start [...] alsoaccessible by default. We do things[...] to make them un...
*Folie die mir sagen soll, dass die nächste eine mit Video und Sound ist. Alsonicht unbedarft weiterklicken.
Die erste Website: im Screenreader und responsive.http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Progressive               HTML5     CSS3Enhancement   Texte       Farben   Tastatur
1. ProgressiveEnhancement
„You start by establishing a basiclevel of user experience that allbrowsers will be able to provide whenrendering your web...
„Don’t interfere with defaultbrowser behavior. Don’tcreate a form inside a canvasjust because you can“                    ...
http://alistapart.com/article/understandingprogressiveenhancement
1.HTML2.CSS3.JavaScript
2. HTML(5)
<input type=“text“>
<label for=“name“>Name</label><input type=“text“ id=“name“>            !
Screenreader Element.scr-element {   position: absolute;   left: -9999px;}Hide label on focushttp://codepen.io/MoritzGiess...
„Every time you usedisplay:none, a kitten dies.“                      – Jeremy Keith
Sprachauszeichnungen<span lang=“en“>Download</span>Abkürzungen<abbr title=“light amplification by stimulatedemission of ra...
Neue Strukturelemente &  Aria landmark roles <header> <footer> <aside> <section> <article> role=“main“, role=“contentinfo“...
http://www.youtube.com/watch?v=IhWMou12_Vk
3. CSS3
@font-face!Endlich ist Text wieder Text :)
WenigerSchrott
4. Grafiken
1.Welchen Zweck erfüllt das Bild?2. Welchen Inhalt bietet das Bild?3. Wenn das Bild nicht angezeigtwird, geht eine wichtig...
Grafik mit Text<img src=“#“ alt=“Text der grafik“>Foto, Logo, Sonstige Grafik die fürden Inhalt wichtig ist<img src=“#“ al...
5. Farben
Farbe !== alleinigesUnterscheidungsmerkmalFehlermeldungen: Text+Icon+Farbe!Kontrast!       http://leaverou.github.com/cont...
6. Tastatur
Sichtbarer Fokusa:hover, a:focus {  text-decoration:underline;}Niemals :focus{outline: none}
Kann man bestimmt auf der Folie nicht lesen:*:before {   content:I can has CSS-generated content;}
Skiplinkshttp://jsfiddle.net/MoritzGiessmann/DFrVC/LIVEDEMO TIME!www.eyeworkers.de mit der Tastaturund einem Screenreader ...
Skiplinkshttp://jsfiddle.net/MoritzGiessmann/DFrVC/LIVEDEMO TIME!
Zusammenfassung1. Progressive Enhancement2. Neues HTML verwenden   (<inputs> brauchen <label>!111einself)3. @font-face und...
MEHR!   Web Content Accessibility Guidelines    http://www.w3.org/TR/WCAG/    Barrierefreie Informationstechnik-Verordnu...
Danke =)@MoritzGiessmannmoritz-giessmann.deFolien:Slideshare.net/MoritzGiessmannNächster Webmontag Karlsruhe13. Mai 2013, ...
Barrierefreiheit zum Mitnehmen und Liebhaben
Barrierefreiheit zum Mitnehmen und Liebhaben
Barrierefreiheit zum Mitnehmen und Liebhaben
Barrierefreiheit zum Mitnehmen und Liebhaben
Barrierefreiheit zum Mitnehmen und Liebhaben
Upcoming SlideShare
Loading in …5
×

Barrierefreiheit zum Mitnehmen und Liebhaben

850 views

Published on

Barrierefreiheitstipps für Websites.

Published in: Technology
  • Be the first to comment

Barrierefreiheit zum Mitnehmen und Liebhaben

  1. 1. BARRIEREFREIHEIT zum Mitnehmen und ♥ haben.Moritz GießmannDevCampKA 2013
  2. 2. https://twitter.com/MoritzGiessmann/status/314453725089525761
  3. 3. http://www.pirmasens.de/ Von einem Screenreader vorgelesen.
  4. 4. http://www.klampfer.atVon einem Screenreader vorgelesen.
  5. 5. @MoritzGiessmann HTML-Fundamentalist moritz-giessmann.de Webmontag Karlsruhe
  6. 6. A11Y == Accessibility 11A11Y == Zugänglichkeit
  7. 7. „Web accessibility means that people withdisabilities can use the Web. Morespecifically, Web accessibility means thatpeople with disabilities can perceive,understand, navigate, and interact withthe Web, and that they can contribute tothe Web. Web accessibility also benefitsothers, including older people withchanging abilities due to aging.“ – W3C Web Accessibility Initiative http://www.w3.org/WAI/intro/accessibility.php
  8. 8. A11Y == Usability
  9. 9. ACCESSIBILITY IS THE MOST IMPORTANT THING WHEN WE START A NEW WEBPROJECT SAID NO ONE EVERhttp://www.flickr.com/photos/desertbusforhope/8205567002/sizes/o/in/photostream/
  10. 10. „Zugängliche Websiteswerden nur von ganzkleinen Nutzergruppenbenötigt, die vernachlässigtwerden können.“ – Random Productmanager
  11. 11. Einer von siebenMenschen hat eine 15%Behinderunghttp://www.who.int/mediacentre/factsheets/fs352/en/index.html
  12. 12. „Der Kunde bezahlt uns dieZugänglichkeitsfeaturesnicht, wir können uns dasnicht leisten.“ – Random Productmanager
  13. 13. SO YOUR CLIENTS PAY YOU FOR UNACCESSIBILTY FEATURES?
  14. 14. A11Y ist für Menschenmit Behinderungen?
  15. 15. A11Y ist für ALLE**Es ist nur eine Frage der Zeit, wann sie für uns wichtig wird.
  16. 16. „The first Web pages ever wereresponsive from the start [...] alsoaccessible by default. We do things[...] to make them un-responsive andun-accessible.Instead of talking about making Webpages accessible and responsive, weneed to talk about keeping Webpages accessible and responsive.“ – Jeremy Keith
  17. 17. *Folie die mir sagen soll, dass die nächste eine mit Video und Sound ist. Alsonicht unbedarft weiterklicken.
  18. 18. Die erste Website: im Screenreader und responsive.http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  19. 19. Progressive HTML5 CSS3Enhancement Texte Farben Tastatur
  20. 20. 1. ProgressiveEnhancement
  21. 21. „You start by establishing a basiclevel of user experience that allbrowsers will be able to provide whenrendering your web site, but you also build in more advancedfunctionality that will automaticallybe available to browsers that can useit.“ – W3C Blog
  22. 22. „Don’t interfere with defaultbrowser behavior. Don’tcreate a form inside a canvasjust because you can“ – Eric Eggert Vortrag bei Beyond Tellerrand Play 2012
  23. 23. http://alistapart.com/article/understandingprogressiveenhancement
  24. 24. 1.HTML2.CSS3.JavaScript
  25. 25. 2. HTML(5)
  26. 26. <input type=“text“>
  27. 27. <label for=“name“>Name</label><input type=“text“ id=“name“> !
  28. 28. Screenreader Element.scr-element { position: absolute; left: -9999px;}Hide label on focushttp://codepen.io/MoritzGiessmann/pen/IwnvJ
  29. 29. „Every time you usedisplay:none, a kitten dies.“ – Jeremy Keith
  30. 30. Sprachauszeichnungen<span lang=“en“>Download</span>Abkürzungen<abbr title=“light amplification by stimulatedemission of radiation “ lang=“en“>Laser</abbr>
  31. 31. Neue Strukturelemente & Aria landmark roles <header> <footer> <aside> <section> <article> role=“main“, role=“contentinfo“, role=“banner“, role=“form“, role=“complementary“, role=“navigation“
  32. 32. http://www.youtube.com/watch?v=IhWMou12_Vk
  33. 33. 3. CSS3
  34. 34. @font-face!Endlich ist Text wieder Text :)
  35. 35. WenigerSchrott
  36. 36. 4. Grafiken
  37. 37. 1.Welchen Zweck erfüllt das Bild?2. Welchen Inhalt bietet das Bild?3. Wenn das Bild nicht angezeigtwird, geht eine wichtige Aussageverloren?
  38. 38. Grafik mit Text<img src=“#“ alt=“Text der grafik“>Foto, Logo, Sonstige Grafik die fürden Inhalt wichtig ist<img src=“#“ alt=“Beschreibung“>Schmuckgrafik, Hintergrundbild<span class=“bg“>Text</span><img src=“#“ alt=““>Funktionsgrafik<a class=“ico-home“>Home</a> (text-indent:-9999px)<a href=“#“><img src=“#“ alt=“Artikel lesen“></a>
  39. 39. 5. Farben
  40. 40. Farbe !== alleinigesUnterscheidungsmerkmalFehlermeldungen: Text+Icon+Farbe!Kontrast! http://leaverou.github.com/contrast-ratio/ http://snook.ca/technical/colour_contrast/colour.html
  41. 41. 6. Tastatur
  42. 42. Sichtbarer Fokusa:hover, a:focus { text-decoration:underline;}Niemals :focus{outline: none}
  43. 43. Kann man bestimmt auf der Folie nicht lesen:*:before { content:I can has CSS-generated content;}
  44. 44. Skiplinkshttp://jsfiddle.net/MoritzGiessmann/DFrVC/LIVEDEMO TIME!www.eyeworkers.de mit der Tastaturund einem Screenreader bedient.
  45. 45. Skiplinkshttp://jsfiddle.net/MoritzGiessmann/DFrVC/LIVEDEMO TIME!
  46. 46. Zusammenfassung1. Progressive Enhancement2. Neues HTML verwenden (<inputs> brauchen <label>!111einself)3. @font-face und CSS3 statt Bildern/Flash/Canvas whatever4. Grafiken je nach Funktion mit Texten versehen5. Farben nicht zur alleinigen Kennzeichnung verwenden6. Tastaturbedienbarkeit rockt!
  47. 47. MEHR! Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/ Barrierefreie Informationstechnik-Verordnung http://www.gesetze-im-internet.de/bitv_2_0/ Barrierefreiheit verstehen und umsetzen (Buch) http://www.dpunkt.de/buecher/2537.html WCAG in leicht zu Verstehen http://www.3pha.com/wcag2/4 Videos von WAI-ARIA Tests http://www.flickr.com/photos/martin-kliehm/sets/72157 610155705200/with/3724648166/
  48. 48. Danke =)@MoritzGiessmannmoritz-giessmann.deFolien:Slideshare.net/MoritzGiessmannNächster Webmontag Karlsruhe13. Mai 2013, 19:00 UhrHoepfner Schalanderhttp://www.flickr.com/photos/39337180@N04/8040943907/sizes/k/in/photostream/

×