Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility ABC: critical thinking

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.

DaFED

February 08, 2016
Tweet

More Decks by DaFED

Other Decks in Design

Transcript

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

    566. I am here because I love to give presentations. 2/125
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 49/125 <i> The <i> element represents a span of text

    that offset from the normal prose. “
  9. 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
  10. 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) . . .
  11. 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
  12. A nation's greatness is measured by how it treats its

    weakest members. 106/125 “ © Kenneth Anderson
  13. 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?
  14. Delegation of the core problem 110/125 wireframes in Balsamiq/Visio/by hand/…?

    BEM/SMACSS/OOCSS/…? use personas/don’t use personas? chicken/egg? . . .
  15. Credits Special thanks to all the people who made and

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