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

Children of a Lesser dev

Children of a Lesser dev

Gunnar Bittersmann

August 15, 2018
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. Children of a Lesser dev

    View Slide

  2. “Accessibility is like a blueberry muffin –

    you can’t push the berries in there afterward.”

    CORDELIA MCGEE-TUBB

    View Slide

  3. https:!//codepen.io/gunnarbittersmann/pen/VBNypL

    View Slide

  4. immer mit alt

    wenn kein Alternativtext nötig: alt=""
    immer mit lang

    View Slide

  5. “Everybody is a keyboard user 

    when eating lunch with their mouse hand.”

    ADRIAN ROSELLI

    View Slide

  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

    View Slide

  7. visuell
    motorisch
    Gehör
    kognitiv
    temporär
    permanent
    situationsbezogen







    Beeinträchtigungen

    View Slide

  8. https:!//codepen.io/gunnarbittersmann/pen/GBaMEO

    View Slide

  9. Nur interaktive Elemente 

    als Targets für click-Events:
    für Verlinkungen
    für Aktionen

    View Slide


  10. A!
    B!
    !
    let myWidget = document.querySelector(#my-widget);
    myWidget.addEventListener('click', event !=> {
    if (event.target.nodeName !!=== 'BUTTON')
    {
    !// !!...
    }
    });

    View Slide


  11. A
    B

    let myWidget = document.querySelector(#my-widget);
    myWidget.addEventListener('click', event => {
    if (event.target.nodeName === 'BUTTON')
    {
    // ...
    }
    });

    View Slide

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

    View Slide

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

    View Slide

  14. https:!//codepen.io/gunnarbittersmann/pen/rKVBXR

    View Slide

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

    View Slide

  16. für
    nicht display: none für interaktive Elemente

    View Slide


  17. @font-face
    {
    font-family: 'icons';
    src: …;
    }
    .icon { font-family: 'icons' }
    .icon-star::after { content: '\e83a' }

    View Slide

  18. View Slide




  19. View Slide

  20. Verwende keine Iconfonts!
    Verwende SVG:

    View Slide

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

    View Slide

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

    View Slide

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

    LÉONIE WATSON

    View Slide

  24. “Arguing with teammates over
    ‘bothering with accessibility’ makes me so angry.

    Every. Time.

    So. Angry.

    Yes. ‘Bother.’ It’s your job.”

    JEN SIMMONS

    View Slide

  25. THE END

    View Slide

  26. NOT THE END

    View Slide