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

Fee3aee3642c55f15adfcbeab11e6bb6?s=128

Manuel Matuzovic

May 21, 2017
Tweet

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
  2. Surfing the web without a mouse sucks…

  3. …and it’s our fault!

  4. BUT!

  5. We can fix it!

  6. Possible issues • Missing or insufficient focus styles • Off-screen

    content • Bad semantics (e.g. button) • Bad focus management (e.g. modal window)
  7. Possible solutions • :focus styling • Setting tabindex • Knowing

    and using basic HTML • Manage focus • Trap focus
  8. :focus styling a:focus { color: #FF00FF; }

  9. Setting tabindex <h2 tabindex="0"> A focusable heading </h2>

  10. Semantics matter <!-- DON'T: --> <div class="btn">I'm a div</div> <div

    class="btn" tabindex="0">I'm a div</div> <div class="btn" tabindex="0" role="button">I'm a div</div> <!-- DO: --> <button>Just use button</button>
  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(); }
  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(); }
  13. Who are we making this for? https://www.microsoft.com/en-us/design/inclusive

  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
  15. Plugins and best practices • https://frend.co/ • https://inclusive-components.design • http://heydonworks.com/

    practical_aria_examples/
  16. TWEETABLE TAKE-AWAY Make sure to test JS components for keyboard

    support before you use them.
  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
  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
  19. THANK YOU Manuel Matuzović @mmatuzo matuzo.at medium.com/@matuzo meetup.com/webclerks