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

tabindex

"0"

A focusable heading

</h2>

Semantics ma " er

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

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