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
Slide 2
Slide 2 text
Surfing the web without
a mouse sucks…
Slide 3
Slide 3 text
…and it’s our fault!
Slide 4
Slide 4 text
BUT!
Slide 5
Slide 5 text
We can fix it!
Slide 6
Slide 6 text
Possible issues
• Missing or insufficient focus styles
• Off-screen content
• Bad semantics (e.g. button)
• Bad focus management (e.g. modal window)
Slide 7
Slide 7 text
Possible solutions
• :focus styling
• Setting tabindex
• Knowing and using basic HTML
• Manage focus
• Trap focus
Slide 8
Slide 8 text
:focus styling
a:focus {
color: #FF00FF;
}
Slide 9
Slide 9 text
Setting tabindex
A focusable heading
Slide 10
Slide 10 text
Semantics matter
I'm a div
I'm a div
I'm a div
Just use button
Slide 11
Slide 11 text
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();
}
Slide 12
Slide 12 text
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();
}
Slide 13
Slide 13 text
Who are we making this for?
https://www.microsoft.com/en-us/design/inclusive
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Plugins and best practices
• https://frend.co/
• https://inclusive-components.design
• http://heydonworks.com/
practical_aria_examples/
Slide 16
Slide 16 text
TWEETABLE TAKE-AWAY
Make sure to test JS components
for keyboard support before you
use them.