Simple techniques
to make your site more
Moritz Gießmann
TecDay 17.11.2016 @ 1&1
Accessible!
7
https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg
7
https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg
„Life's most persistent and
urgent question is,
...
9https://flic.kr/p/4xtq5o
@MoritzGiessmann
Frontend @ 3C Development
moritz-giessmann.de
A11Y == Accessibility
A11Y == Accessibility
11
Barrierefrei?
Barrierefrei?
Accessible?
Zugänglich!
„Web accessibility means that people with
disabilities can use the Web. More
specifically,Web accessibility means that
peo...
http://www.who.int/mediacentre/factsheets/fs352/en/index.html
Einer von sieben Menschen
hat eine Behinderung
http://www.who.int/mediacentre/factsheets/fs352/en/index.html
Einer von sieben Menschen
hat eine Behinderung
http://www.who.int/mediacentre/factsheets/fs352/en/index.html
Einer von sieben Menschen
hat eine Behinderung
15%
A11Y ist für Menschen
mit Behinderungen?
A11Y ist für ALLE*
*Es ist nur eine Frage der Zeit, wann es für uns wichtig wird.
A11Y == Usability
Barrieren?
Akustisch Motorisch
Kognitiv Visuell
Barrieren
Akustisch
https://www.youtube.com/watch?v=2v79hFGGcGo
Motorisch
https://en.wikipedia.org/wiki/Boxer%27s_fracture#/media/File:Neck_Fracture_of_the_Fourth_
Metacarpal_Bone.png
Maus
http://www.integramouse.com/startseite/
Kognitiv
http://www.nachrichtenleic
ht.de/streit-ueber-
schokolade.2046.de.html?dr
am:article_id=355252
Visuell
42
https://flic.kr/p/8VCm2w
https://flic.kr/p/r2zzf5
Nur das Wichtigste
wird in diesem
Vortrag besprochen
Sehr wichtige Sache
Akustisch Motorisch
Kognitiv Visuell
Barrieren
Akustisch Motorisch
Kognitiv Visuell
Barrieren
1 2
43
Wahrnehmbar Bedienbar
Verständlich Robust
Wahrnehmbar
Semantisches
HTML
Screenreader
navigieren
via Semantik
http://ajaxian.com/wp-content/images/periodic_table.png
???
http://ajaxian.com/wp-content/images/periodic_table.png
Standardmäßig
fokussierbare
Elemente!
Interaktionselement
<span class=“button“ onclick=“alert(‘…‘)“>
Delete Mail
</span>
Interaktionselement
<span class=“button“ onclick=“alert(‘…‘)“>
Delete Mail
</span>
Interaktionselement
<button class=“button“ onclick=“alert(‘…‘)“>
Delete Mail
</button>
Content verstecken
Screenreader lesen
nichts vor was mit
display:none;
versteckt wurde!
display:none; ?
.is-insivible {
display:none;
}
display:none; ?
.is-insivible {
display:none;
}
Screenreader
Element
.is-invisible {
position: absolute;
left: -9999px;
}
Alternativen für
Nicht-Text-Content
1. Welchen Zweck erfüllt das Bild?
2. Was beinhaltet das Bild?
3. Fehlt ohne das Bild eine
wichtige Aussage?
Fragen!
Textgrafik
<img src=“[…]“ alt=“GMX“>
Foto, Grafik, etc.
<img src=“[…]“ alt=“Heino Cyrus“>
http://web.de/magazine/unterhaltung/stars/heino-18418494
<a class=“ico-back“ style=“text-indent:-9999px;“>
Back to mail list
</a>
Funktionsgrafik
<button >
<img src=“#“ alt=“Delet...
Schmuckgrafik,
Tracking Pixel etc.
<span style=“background: url(bg.png)“></span>
<img src=“tracking.pixel. gif“ alt=““>
Farben
Farbe !== alleiniges
Unterscheidungsmerkmal
1 2
43
Wahrnehmbar Bedienbar
Verständlich Robust
71http://9gag.com/gag/aGwwgQ7
Bedienbar
Alle Formularfelder
brauchen <label>!
<input type=“text“ placeholder=“name“/>
<input type=“text“ placeholder=“name“/>
Formulare ohne
<label> können vom
Screenreader-Nutzer
nicht verstanden werden
<label for=“name“>Name</label>
<input type=“text“id=“name“[…]/>
Alle Formularfelder
brauchen <label>!
<label for=“name“ class=“is-invisible“>
Name</label>
<input type=“text“id=“name“[…]/>
Alle Formularfelder
brauchen <label>!
Pinch to Zoom
https://www.raywenderlich.com/50398/opengl-es-transformations-gestures
Zoom verbieten?
<meta name="viewport" content=„[…],
user-scalable=no,initial-scale=1,
minimum-scale=1,maximum-scale=1">
Zoom verbieten?
<meta name="viewport" content=„[…],
user-scalable=no,initial-scale=1,
minimum-scale=1,maximum-scale=1">
Zoom zulassen!
<meta name="viewport" content=„[…],
user-scalable=yes,initial-scale=1,
minimum-scale=1,maximum-scale=3">
Tastatur
Fokus
https://www.youtube.com/watch?v=jHgQHq5FEhU
https://www.youtube.com/watch?v=oY77G4O-zUo
Niemals!
:focus{outline: none}
Niemals!
:focus{outline: none}
Sichtbarer Fokus
a:hover,a:focus {
text-decoration:underline;
was: dem-designer-so-einfällt;
}
input {
outline: 2px solid ...
1 2
43
Wahrnehmbar Bedienbar
Verständlich Robust
89
https://flic.kr/p/6fvfLy
Verständlich
LANG=?
Sag deiner Seite
in welcher Sprache
der Inhalt vorliegt
Lang Attribut
<html lang=“de“>
[…]
<p>Hallo Freund!</p>
<p lang=“en“>Hello,friend!</p>
1 2
43
Wahrnehmbar Bedienbar
Verständlich Robust
Robust
Progressive
Enhancement
http://alistapart.com/article/understandingprogressiveenhancement
1.HTML
2.CSS
3.JavaScript
Robust
Verlässlich
Fehlertolerant
Zugänglich
„You start by establishing a
basic level of user experience that
all browsers will be able to
provide when rendering your ...
„The first Web pages ever were
responsive from the start [...] also
accessible by default. We do
things [...] to make them...
http://info.cern.ch/hypertext/WWW/TheProject.html
1 2
43
Wahrnehmbar Bedienbar
Verständlich Robust
Ressourcen!
 Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
 The Web Accessibility Basics
https://www.m...
Tools!
 Screenreader (kostenlos):
Mac:Voiceover(integriert),Windows:NVDA, Linux:Orca
 Mobile Screenreader:
Android Talkb...
https://www.youtube.com/watch?v=NJbAjxkaxnA
https://de.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:Sir_Tim_Berners-Lee.jpg
https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:This_is_for_Everyone.jpg
https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:This_is_for_Everyone.jpg
This is for everyone!
What are YOU
doing for others?
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Simple techniques to make your site more Accessible
Nächste SlideShare
Wird geladen in …5
×

Simple techniques to make your site more Accessible

254 Aufrufe

Veröffentlicht am

Ist die eigene Web-App/Seite für Blinde zugänglich? Fragende Blicke und zuckende Schultern sind oftmals das Ergebnis dieser Frage. Dabei kann man die meisten Hürden, mit denen körperlich eingeschränkte Menschen im Web tagtäglich kämpfen, mit ein wenig Know-How und geringem Extra-Aufwand im Vorbeigehen erledigen. Der Vortrag bespricht einfache Lösungen für die häufigsten Fallstricke.

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

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

Keine Notizen für die Folie

Simple techniques to make your site more Accessible

  1. 1. Simple techniques to make your site more Moritz Gießmann TecDay 17.11.2016 @ 1&1 Accessible!
  2. 2. 7 https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg
  3. 3. 7 https://commons.wikimedia.org/wiki/File:1-19-Martin-Luther-King-ftr.jpg „Life's most persistent and urgent question is, – Martin Luther King 'What are you doing for others?' “
  4. 4. 9https://flic.kr/p/4xtq5o
  5. 5. @MoritzGiessmann Frontend @ 3C Development moritz-giessmann.de
  6. 6. A11Y == Accessibility
  7. 7. A11Y == Accessibility 11
  8. 8. Barrierefrei?
  9. 9. Barrierefrei?
  10. 10. Accessible?
  11. 11. Zugänglich!
  12. 12. „Web accessibility means that people with disabilities can use the Web. More specifically,Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web,and that they can contribute to the Web. Web accessibility also benefits others,including older people with changing abilities due to aging.“ – W3C Web Accessibility Initiative http://www.w3.org/WAI/intro/accessibility.php 19
  13. 13. http://www.who.int/mediacentre/factsheets/fs352/en/index.html Einer von sieben Menschen hat eine Behinderung
  14. 14. http://www.who.int/mediacentre/factsheets/fs352/en/index.html Einer von sieben Menschen hat eine Behinderung
  15. 15. http://www.who.int/mediacentre/factsheets/fs352/en/index.html Einer von sieben Menschen hat eine Behinderung 15%
  16. 16. A11Y ist für Menschen mit Behinderungen?
  17. 17. A11Y ist für ALLE* *Es ist nur eine Frage der Zeit, wann es für uns wichtig wird.
  18. 18. A11Y == Usability
  19. 19. Barrieren?
  20. 20. Akustisch Motorisch Kognitiv Visuell Barrieren
  21. 21. Akustisch
  22. 22. https://www.youtube.com/watch?v=2v79hFGGcGo
  23. 23. Motorisch
  24. 24. https://en.wikipedia.org/wiki/Boxer%27s_fracture#/media/File:Neck_Fracture_of_the_Fourth_ Metacarpal_Bone.png
  25. 25. Maus http://www.integramouse.com/startseite/
  26. 26. Kognitiv
  27. 27. http://www.nachrichtenleic ht.de/streit-ueber- schokolade.2046.de.html?dr am:article_id=355252
  28. 28. Visuell
  29. 29. 42 https://flic.kr/p/8VCm2w
  30. 30. https://flic.kr/p/r2zzf5
  31. 31. Nur das Wichtigste wird in diesem Vortrag besprochen
  32. 32. Sehr wichtige Sache
  33. 33. Akustisch Motorisch Kognitiv Visuell Barrieren
  34. 34. Akustisch Motorisch Kognitiv Visuell Barrieren
  35. 35. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  36. 36. Wahrnehmbar
  37. 37. Semantisches HTML
  38. 38. Screenreader navigieren via Semantik
  39. 39. http://ajaxian.com/wp-content/images/periodic_table.png
  40. 40. ??? http://ajaxian.com/wp-content/images/periodic_table.png
  41. 41. Standardmäßig fokussierbare Elemente!
  42. 42. Interaktionselement <span class=“button“ onclick=“alert(‘…‘)“> Delete Mail </span>
  43. 43. Interaktionselement <span class=“button“ onclick=“alert(‘…‘)“> Delete Mail </span>
  44. 44. Interaktionselement <button class=“button“ onclick=“alert(‘…‘)“> Delete Mail </button>
  45. 45. Content verstecken
  46. 46. Screenreader lesen nichts vor was mit display:none; versteckt wurde!
  47. 47. display:none; ? .is-insivible { display:none; }
  48. 48. display:none; ? .is-insivible { display:none; }
  49. 49. Screenreader Element .is-invisible { position: absolute; left: -9999px; }
  50. 50. Alternativen für Nicht-Text-Content
  51. 51. 1. Welchen Zweck erfüllt das Bild? 2. Was beinhaltet das Bild? 3. Fehlt ohne das Bild eine wichtige Aussage? Fragen!
  52. 52. Textgrafik <img src=“[…]“ alt=“GMX“>
  53. 53. Foto, Grafik, etc. <img src=“[…]“ alt=“Heino Cyrus“> http://web.de/magazine/unterhaltung/stars/heino-18418494
  54. 54. <a class=“ico-back“ style=“text-indent:-9999px;“> Back to mail list </a> Funktionsgrafik <button > <img src=“#“ alt=“Delete this mail“> </button>
  55. 55. Schmuckgrafik, Tracking Pixel etc. <span style=“background: url(bg.png)“></span> <img src=“tracking.pixel. gif“ alt=““>
  56. 56. Farben
  57. 57. Farbe !== alleiniges Unterscheidungsmerkmal
  58. 58. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  59. 59. 71http://9gag.com/gag/aGwwgQ7
  60. 60. Bedienbar
  61. 61. Alle Formularfelder brauchen <label>!
  62. 62. <input type=“text“ placeholder=“name“/>
  63. 63. <input type=“text“ placeholder=“name“/>
  64. 64. Formulare ohne <label> können vom Screenreader-Nutzer nicht verstanden werden
  65. 65. <label for=“name“>Name</label> <input type=“text“id=“name“[…]/> Alle Formularfelder brauchen <label>!
  66. 66. <label for=“name“ class=“is-invisible“> Name</label> <input type=“text“id=“name“[…]/> Alle Formularfelder brauchen <label>!
  67. 67. Pinch to Zoom
  68. 68. https://www.raywenderlich.com/50398/opengl-es-transformations-gestures
  69. 69. Zoom verbieten? <meta name="viewport" content=„[…], user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1">
  70. 70. Zoom verbieten? <meta name="viewport" content=„[…], user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1">
  71. 71. Zoom zulassen! <meta name="viewport" content=„[…], user-scalable=yes,initial-scale=1, minimum-scale=1,maximum-scale=3">
  72. 72. Tastatur
  73. 73. Fokus
  74. 74. https://www.youtube.com/watch?v=jHgQHq5FEhU
  75. 75. https://www.youtube.com/watch?v=oY77G4O-zUo
  76. 76. Niemals! :focus{outline: none}
  77. 77. Niemals! :focus{outline: none}
  78. 78. Sichtbarer Fokus a:hover,a:focus { text-decoration:underline; was: dem-designer-so-einfällt; } input { outline: 2px solid #dac0de; }
  79. 79. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  80. 80. 89 https://flic.kr/p/6fvfLy
  81. 81. Verständlich
  82. 82. LANG=?
  83. 83. Sag deiner Seite in welcher Sprache der Inhalt vorliegt
  84. 84. Lang Attribut <html lang=“de“> […] <p>Hallo Freund!</p> <p lang=“en“>Hello,friend!</p>
  85. 85. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  86. 86. Robust
  87. 87. Progressive Enhancement
  88. 88. http://alistapart.com/article/understandingprogressiveenhancement
  89. 89. 1.HTML 2.CSS 3.JavaScript
  90. 90. Robust Verlässlich Fehlertolerant Zugänglich
  91. 91. „You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site,but you also build in more advanced functionality that will automatically be available to browsers that can use it.“ – W3C Blog
  92. 92. „The first Web pages ever were responsive from the start [...] also accessible by default. We do things [...] to make them un- responsive and un-accessible. Instead of talking about making Web pages accessible and responsive, we need to talk about keeping Web pages accessible and responsive.“ – Jeremy Keith
  93. 93. http://info.cern.ch/hypertext/WWW/TheProject.html
  94. 94. 1 2 43 Wahrnehmbar Bedienbar Verständlich Robust
  95. 95. Ressourcen!  Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/  The Web Accessibility Basics https://www.marcozehe.de/2015/12/14/the-web- accessibility-basics/  Apps for all Book https://shop.smashingmagazine.com/products/apps- for-all
  96. 96. Tools!  Screenreader (kostenlos): Mac:Voiceover(integriert),Windows:NVDA, Linux:Orca  Mobile Screenreader: Android Talkback (integriert),iOS Voiceover (integriert)  Testing Tools: Chrome #a11y devtools (Plugin),chrome://accessibility/ tota11y bookmarklet
  97. 97. https://www.youtube.com/watch?v=NJbAjxkaxnA
  98. 98. https://de.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:Sir_Tim_Berners-Lee.jpg
  99. 99. https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:This_is_for_Everyone.jpg
  100. 100. https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:This_is_for_Everyone.jpg This is for everyone!
  101. 101. What are YOU doing for others?

×