Save 37% off PRO during our Black Friday Sale! »

Accessibility ABC: critical thinking

C1d9295b73069d0182d61895048713d8?s=47 DaFED
February 08, 2016

Accessibility ABC: critical thinking

DaFED#40
Speaker: Tamaš Tot
Ukoliko imate nedoumice da li je vašem markup-u potreban Schema.org; ako niste sigurni kako da pravilno primenite WAI-ARIA i u čemu se on razlikuje od WCAG 2.0; ako vas interesuje sprega između UX, performanse i accessibility-ja i zašto je ovo goruća tema danas, onda je ovo predavanje za vas.

C1d9295b73069d0182d61895048713d8?s=128

DaFED

February 08, 2016
Tweet

Transcript

  1. Accessibility ABC critical thinking 1/125

  2. hello! I am Tamás Tóth My Flappy Bird score is

    566. I am here because I love to give presentations. 2/125
  3. Table of contents WCAG 2.0 WAI-ARIA Schema.org UX Performance 3/125

    © Jela
  4. Table of contents WCAG 2.0 WAI-ARIA Schema.org UX Performance 4/125

    Why?
  5. 5/125 MOV AX, BX Instead of...

  6. 6/125 Cogito ergo sum © José Luis Gómez Merino

  7. 1. WCAG 2.0 7/125

  8. WCAG 2.0 Wikipedia quote goes here… 8/125 “

  9. Web Content Accessibility Guidelines 2.0 9/125

  10. Web Content Accessibility Guidelines 2.0 boring 10/125

  11. WCAG 2.0 ~ Microsoft Word 11/125 © tt

  12. WCAG 2.0 ~ Microsoft Word 12/125

  13. The Dawn of the Internet Age 13/125

  14. WCAG 2.0 examples Page title Heading structure Don’t auto play

    video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 14/125 } Word
  15. “Genius” mouse not working 15/125

  16. BBS 16/125

  17. WCAG 2.0 examples Page title Heading structure Don’t auto play

    video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 17/125 } Word
  18. 18/125 “alt” text

  19. 19/125 “alt” text

  20. 20/125 “alt” text

  21. 21/125 “alt” text

  22. WCAG 2.0 examples Page title Heading structure Don’t auto play

    video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 22/125 } Word
  23. 23/125 Always label

  24. 24/125 Always label

  25. 25/125 Native validation

  26. 26/125 Native validation: l10n

  27. 27/125

  28. 28/125 Forms Done right?

  29. WCAG 2.0 examples Page title Heading structure Don’t auto play

    video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 29/125 } Word
  30. 30/125 Never use maximum-scale!

  31. 31/125 Never use maximum-scale!

  32. WCAG 2.0 examples Page title Heading structure Don’t auto play

    video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 32/125 } Word
  33. 33/125 Skip navigation

  34. Bootstrap and screen readers 34/125

  35. Bootstrap and screen readers 35/125

  36. WCAG 2.0 examples Page title Heading structure Don’t auto play

    video/audio, provide alternatives Contrast (check on your phone with low brightness) Resize Text (up to 200% zoom) Image text alternatives ("alt text") Forms, labels, and errors Never use maximum-scale=1 (e.g. Ghostery) Skip navigation links Keyboard access and visual focus (aka “dotted lines”) . . . 36/125 } Word
  37. 37/125 Never remove the “dotted lines”

  38. 38/125 Never remove the “dotted lines”

  39. 39/125 Provide alternative

  40. Use case: Smashing magazine 40/125

  41. Link vs. button 41/125

  42. Button vs. role=”button” 42/125

  43. Button vs. role=”button” 43/125

  44. Button vs. role=”button” 44/125

  45. Button vs. role=”button” 45/125

  46. A11y and Bootstrap 46/125

  47. 47/125 Icons in Bootstrap 2

  48. 48/125 <i> for icons?

  49. 49/125 <i> The <i> element represents a span of text

    that offset from the normal prose. “
  50. 50/125 Icons in Bootstrap 2

  51. 51/125 Icons in Bootstrap 3

  52. Material icons 52/125

  53. Icons: ligatures 53/125

  54. 54/125 <i> for icons!

  55. ...or SVG icons 55/125

  56. ...or SVG icons 56/125

  57. ...or SVG icons 57/125

  58. Use case: AChecker 58/125

  59. 59/125 2. WAI-ARIA

  60. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications 60/125

  61. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications 61/125

    boring “
  62. WAI-ARIA ~ Ai Weiwei 62/125 © humanrightslogo.net + photomontage

  63. WAI-ARIA excuse for bad (non-semantic) markup role=”” custom components tabindex

    Voiceover, NVDA, JAWS, … 63/125
  64. To WAI-ARIA or not to WAI-ARIA? 64/125

  65. To WAI-ARIA or not to WAI-ARIA? 65/125

  66. To WAI-ARIA or not to WAI-ARIA? 66/125

  67. WAI-ARIA roles: List 67/125

  68. WAI-ARIA roles: List 68/125

  69. HTML equivalent? 69/125

  70. 70/125

  71. 71/125 3. Schema.org

  72. semantic markup Schema. org SEO UX 72/125 3 in 1

  73. semantic markup Schema. org SEO UX 73/125 3 in 1

  74. Schema.org 74/125

  75. Schema.org 75/125

  76. 76/125

  77. 77/125

  78. Schema.org/PostalAddress 78/125

  79. 79/125 4. UX

  80. UX gray (like dark) patterns: don’t annoy users FAQ pages

    with hidden email disable right click (inspect element) it’s ok to hate IE8 but hate it with style (fallback) fb overlay, popups animation lar pour lar (good example Material design) parallax Hyperbole and a Half: be honest and unobtrusive 80/125
  81. 81/125 Gray (like dark) patterns: “Do not annoy the users”

  82. 82/125 Bootstrap “as”

  83. Bootstrap “as” 83/125

  84. Motion provides meaning (Material design) 84/125 “

  85. 85/125

  86. 86/125 Parallax © Disney

  87. 87/125 Parallax != Scrolljacking (but it’s ok sometimes) © Robby

    Leonardi
  88. 88/125 The long journey © Boulet

  89. 89/125 5. Performance

  90. Performance 90/125 Google 10 things: fast is better than slow

    PageSpeed Insights, WebPagetest, YSlow, ... above the fold/critical CSS async vs. defer minify HTML? SASS mess 3D, FOIT/FOUT/FOFT - always patching browser issues? 60 fps (e.g. parallax) . . .
  91. 91/125 Google 10 things: fast is better than slow

  92. 92/125 Pagespeed Insights, Webpagetest, YSlow, …

  93. 93/125 async vs. defer

  94. 94/125 Above the fold/critical CSS, lazy loading...

  95. 95/125 SASS mess

  96. 96/125 Specificity

  97. 97/125

  98. Why? 98/125

  99. Mission critical 99/125 © tt

  100. Just create me a ticket and i’ll fix it. 100/125

  101. Just create me a ticket and i’ll fix it. 101/125

  102. I care. 102/125

  103. 103/125 Baker vs. programmer

  104. 104/125 © Varljivo leto ‘68 Jagodinka Simonović Baker vs. programmer

    problem
  105. 105/125 © ZojaKu STARTIT.RS: Muškarci vladaju svetom zato što žene

    misle da to ne zaslužuju – Hajde da to promenimo Baker vs. programmer problem
  106. A nation's greatness is measured by how it treats its

    weakest members. 106/125 “ © Kenneth Anderson
  107. Comply or explain 107/125 “

  108. 2h to fix vs. 2h to discard educate your clients

    separate your hacks fight browser behaviors? brand identity vs. clean code 108/125 Pixel perfect vs. generic?
  109. 109/125 Naming is important ?

  110. Delegation of the core problem 110/125 wireframes in Balsamiq/Visio/by hand/…?

    BEM/SMACSS/OOCSS/…? use personas/don’t use personas? chicken/egg? . . .
  111. 111/125 Process customer designer frontend backend

  112. 112/125 Process customer designer frontend backend

  113. Lesser people have done greater things. 113/125 “

  114. The customer is always right 114/125 “

  115. 115/125 ? The customer is always right “

  116. 116/125 © Chris Stain

  117. 117/125 © Neradnik The word spreads out. - “Neradnik” “

  118. 118/125 Be honest © Hyperbole and a Half

  119. 119/125 {placekitten}

  120. 120/125 {placekitten}

  121. 121/125 {placekitten}

  122. 122/125 © Duncan Hull

  123. 123/125

  124. thanks! Questions? @talpitoo 124/125

  125. Credits Special thanks to all the people who made and

    released these awesome resources for free: Presentation template by SlidesCarnival 125/125