A presentation at Free Code Camp Vienna in in Vienna, Austria by Manuel Matuzovic
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
Surfing the web without a mouse sucks…
…and it’s our fault!
BUT!
We can fix it!
Possible issues • Missing or insu ffi cient focus style s • Off-screen content
• Bad semantics (e.g. bu $ on)
• Bad focus management (e.g. modal window)
Possible solutions • :focus styling
• Se $ ing tabindex
• Knowing and using basic HTML • Manage focus
• T rap focus
:focus styling
a : focus
{
color :
#FF00FF ;
}
Se " ing tabindex
<h2"0"
A focusable heading
</h2>Semantics ma " er
<!-- DON'T: --> <div"btn"
I'm a div
</div> <div"btn"
"0"
I'm a div
</div> <div"btn"
"0"
"button"
I'm a div
</div> <!-- DO: --> <button> Just use button </button>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 ();
}
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 ();
}
Who are we making this for? https://www.microsoft.com/en-us/design/inclusive
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
Plugins and best practices • h $ ps://frend.co/
• h $ ps://inclusive-components.design
• h $ p://heydonworks.com/ practical_aria_examples/
TWEETABLE TAKE-AWAY Make sure to test JS components for keyboard support before you use them .
Pens • h $ ps://codepen.io/matuzo/pen/jmZzPK?editors=1000
• h $ ps://codepen.io/matuzo/pen/QvNJOW?editors=1100
• h $ ps://codepen.io/matuzo/pen/EmKrZq?editors=1100
• h $ p://codepen.io/matuzo/pen/YVqRaj?editors=1010
• h $ ps://codepen.io/matuzo/pen/xgwxNw
• h $ ps://codepen.io/matuzo/pen/YNyPMj
• h $ ps://codepen.io/matuzo/pen/BpQreX
• h $ ps://codepen.io/matuzo/pen/pRNVJN
• h $ ps://codepen.io/matuzo/pen/GrNdvK
More links.. • h $ ps://www.meetup.com/webclerks/
• h $ ps://medium.com/alistapart/writing-html-with-accessibility-in- mind-a62026493412
• h $ ps://medium.com/@matuzo/writing-javascript-with-accessibility-in- mind-a1f6a5f467b9
• h $ ps://uxdesign.cc/i-totally-forgot-about-print-style-sheets- f1e6604cfd6
• h $ ps://medium.com/@matuzo/ge $ ing-started-with-css-font-loading- e24e7ffaa791
THANK YOU Manuel Matuzovi ć
@mmatuzo
matuzo.at
medium.com/@matuzo
meetup.com/webclerks
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.
The following resources were mentioned during the presentation or are useful additional information.
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
for free. You
can too.