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

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 Slide

2. Surfing the web without
   a mouse sucks…
   

   View Slide

3. …and it’s our fault!
   

   View Slide

4. BUT!
   

   View Slide

5. We can fix it!
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Setting tabindex
   
   A focusable heading
   
   

   View Slide

10. Semantics matter
    
    I'm a div
    I'm a div
    role="button">I'm a div
    
    Just use button
    

    View Slide

11. 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 Slide

12. 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 Slide

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

    View Slide

14. 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 Slide

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

    View Slide

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

    View Slide

17. 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 Slide

18. 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 Slide

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

    View Slide