Level-Up your Career – Become a Focus Manager

A presentation at Free Code Camp Vienna in May 2017 in Vienna, Austria by Manuel Matuzovic

Slide 1

Slide 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

Slide 2

Slide 2

Surfing the web without a mouse sucks…

Slide 3

Slide 3

…and it’s our fault!

Slide 4

Slide 4

BUT!

Slide 5

Slide 5

We can fix it!

Slide 6

Slide 6

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)

Slide 7

Slide 7

Possible solutions • :focus styling  

• Se $ ing tabindex

• Knowing and using basic HTML • Manage focus

• T rap focus

Slide 8

Slide 8

:focus styling  

a : focus

{

color :

#FF00FF ;

}

Slide 9

Slide 9

Se " ing tabindex

<h2

tabindex

"0"

A focusable heading

</h2>

Slide 10

Slide 10

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>

Slide 11

Slide 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 ();

}

Slide 12

Slide 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 ();

}

Slide 13

Slide 13

Who are we making this for? https://www.microsoft.com/en-us/design/inclusive

Slide 14

Slide 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

Slide 15

Slide 15

Plugins and best practices • h $ ps://frend.co/

• h $ ps://inclusive-components.design

• h $ p://heydonworks.com/ practical_aria_examples/

Slide 16

Slide 16

TWEETABLE TAKE-AWAY Make sure to test JS components for keyboard support before you use them .

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

THANK YOU Manuel Matuzovi ć

   @mmatuzo

matuzo.at

medium.com/@matuzo

meetup.com/webclerks