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

Level-Up your Career – Become a Focus Manager

Level-Up your Career – Become a Focus Manager

The majority of users surf the web with a mouse, trackpad or via touch, but there are also users who rely on the keyboard as their primary input device. Manuel Matuzović will illustrate in his talk who those users are, why there are more of them than you might think and what you as a developer can do to make their lives easier and improve the overall user experience and accessibility of your websites and web apps. You will learn about focus and what you can do with CSS and JavaScript to improve it.

Examples

https://codepen.io/matuzo/pen/jmZzPK?editors=1000
https://codepen.io/matuzo/pen/QvNJOW?editors=1100
https://codepen.io/matuzo/pen/EmKrZq?editors=1100
http://codepen.io/matuzo/pen/YVqRaj?editors=1010
https://codepen.io/matuzo/pen/xgwxNw
https://codepen.io/matuzo/pen/YNyPMj
https://codepen.io/matuzo/pen/BpQreX
https://codepen.io/matuzo/pen/pRNVJN
https://codepen.io/matuzo/pen/GrNdvK

Misc

https://www.meetup.com/webclerks/
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9
https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6
https://medium.com/@matuzo/getting-started-with-css-font-loading-e24e7ffaa791

Manuel Matuzovic

May 21, 2017
Tweet

More Decks by Manuel Matuzovic

Other Decks in Technology

Transcript

  1. BECOME A
    FOCUS MANAGER
    LEVEL-UP YOUR CAREER
    Manuel Matuzović
    @mmatuzo
    Free Code Camp Vienna 05/2017
    webclerks
    meetup.com/webclerks
    @wearewebclerks
    Next meetup: 22.5.2017

    View full-size slide

  2. Surfing the web without
    a mouse sucks…

    View full-size slide

  3. …and it’s our fault!

    View full-size slide

  4. We can fix it!

    View full-size slide

  5. Possible issues
    • Missing or insufficient focus styles
    • Off-screen content
    • Bad semantics (e.g. button)
    • Bad focus management (e.g. modal window)

    View full-size slide

  6. Possible solutions
    • :focus styling
    • Setting tabindex
    • Knowing and using basic HTML
    • Manage focus
    • Trap focus

    View full-size slide

  7. :focus styling
    a:focus {
    color: #FF00FF;
    }

    View full-size slide

  8. Setting tabindex

    A focusable heading

    View full-size slide

  9. Semantics matter

    I'm a div
    I'm a div
    role="button">I'm a div

    Just use button

    View full-size slide

  10. Remember last focus
    // Store the last focused element
    let lastFocusedElement = document.activeElement;
    // Close the window by clicking the close button
    close.addEventListener('click', removeModal);
    function removeModal() {
    // Remove the modal window if it's visible
    modal.classList.remove('is-visible');
    // Return focus to last focused element
    lastFocusedElement.focus();
    }

    View full-size slide

  11. Trap focus
    // If the current element in focus is the first
    focusable element within the modal window…
    if (document.activeElement === firstTabStop) {
    e.preventDefault();
    // ...jump to the last focusable element
    lastTabStop.focus();
    }

    View full-size slide

  12. Who are we making this for?
    https://www.microsoft.com/en-us/design/inclusive

    View full-size slide

  13. TWEETABLE TAKE-AWAY
    Assuming that everybody is able to
    see, hear, say, and touch all the
    time creates the potential to
    ignore a lot of users.
    https://www.microsoft.com/en-us/design/inclusive

    View full-size slide

  14. Plugins and best practices
    • https://frend.co/
    • https://inclusive-components.design
    • http://heydonworks.com/
    practical_aria_examples/

    View full-size slide

  15. TWEETABLE TAKE-AWAY
    Make sure to test JS components
    for keyboard support before you
    use them.

    View full-size slide

  16. Pens
    • https://codepen.io/matuzo/pen/jmZzPK?editors=1000
    • https://codepen.io/matuzo/pen/QvNJOW?editors=1100
    • https://codepen.io/matuzo/pen/EmKrZq?editors=1100
    • http://codepen.io/matuzo/pen/YVqRaj?editors=1010
    • https://codepen.io/matuzo/pen/xgwxNw
    • https://codepen.io/matuzo/pen/YNyPMj
    • https://codepen.io/matuzo/pen/BpQreX
    • https://codepen.io/matuzo/pen/pRNVJN
    • https://codepen.io/matuzo/pen/GrNdvK

    View full-size slide

  17. More links..
    • https://www.meetup.com/webclerks/
    • https://medium.com/alistapart/writing-html-with-accessibility-in-
    mind-a62026493412
    • https://medium.com/@matuzo/writing-javascript-with-accessibility-in-
    mind-a1f6a5f467b9
    • https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-
    f1e6604cfd6
    • https://medium.com/@matuzo/getting-started-with-css-font-loading-
    e24e7ffaa791

    View full-size slide

  18. THANK YOU
    Manuel Matuzović
    @mmatuzo
    matuzo.at
    medium.com/@matuzo
    meetup.com/webclerks

    View full-size slide