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
  2. Possible issues • Missing or insufficient focus styles • Off-screen

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

    and using basic HTML • Manage focus • Trap focus
  4. 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>
  5. 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(); }
  6. 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(); }
  7. 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
  8. 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
  9. 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