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
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