Children of a Lesser dev

Children of a Lesser dev

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

August 15, 2018
Tweet

Transcript

  1. Children of a Lesser dev

  2. “Accessibility is like a blueberry muffin –
 you can’t push

    the berries in there afterward.”
 CORDELIA MCGEE-TUBB
  3. https:!//codepen.io/gunnarbittersmann/pen/VBNypL

  4. <img> immer mit alt
 wenn kein Alternativtext nötig: alt="" <html>

    immer mit lang
  5. “Everybody is a keyboard user 
 when eating lunch with

    their mouse hand.”
 ADRIAN ROSELLI
  6. “Disability is never a binary state. Hard of hearing, lack

    of vision, inability to comprehend. All are a sliding scale and all can affect you sooner than you may think.”
 CHRISTIAN HEILMANN
  7. visuell motorisch Gehör kognitiv temporär permanent situationsbezogen • • •

    • • • • Beeinträchtigungen
  8. https:!//codepen.io/gunnarbittersmann/pen/GBaMEO

  9. Nur interaktive Elemente 
 als Targets für click-Events: <a> für

    Verlinkungen <button> für Aktionen
  10. <div id="my-widget"> <button id="my-widget-a">A!</button> <button id="my-widget-b">B!</button> !</div> let myWidget =

    document.querySelector(#my-widget); myWidget.addEventListener('click', event !=> { if (event.target.nodeName !!=== 'BUTTON') { !// !!... } });
  11. <div id="my-widget"> <button id="my-widget-a">A</button> <button id="my-widget-b">B</button> </div> let myWidget =

    document.querySelector(#my-widget); myWidget.addEventListener('click', event => { if (event.target.nodeName === 'BUTTON') { // ... } });
  12. Wo immer :hover, da auch :focus! nicht outline: none (wenn

    keine anderen Stile für :focus)
  13. Wo immer :hover, da auch :focus! nicht outline: none (wenn

    keine anderen Stile für :focus)
  14. https:!//codepen.io/gunnarbittersmann/pen/rKVBXR

  15. https:!//codepen.io/gunnarbittersmann/pen/pZmdNj

  16. <label> für <input> nicht display: none für interaktive Elemente

  17. <span class="icon icon-star" aria-hidden="true"></span> @font-face { font-family: 'icons'; src: …;

    } .icon { font-family: 'icons' } .icon-star::after { content: '\e83a' }
  18. None
  19. <svg> <use xlink:href="icons.svg#star"/> </svg>

  20. Verwende keine Iconfonts! Verwende SVG: <use>

  21. https:!//webaim.org/resources/contrastchecker/

  22. • wahrnehmbar • bedienbar • verständlich • robust WCAG

  23. “How do I convince stakeholders?” “Don’t! Just go ahead and

    do it anyway!”
 LÉONIE WATSON
  24. “Arguing with teammates over ‘bothering with accessibility’ makes me so

    angry.
 Every. Time.
 So. Angry.
 Yes. ‘Bother.’ It’s your job.”
 JEN SIMMONS
  25. THE END

  26. NOT THE END