Focusing on Focus

A presentation at Lansing DevOps Meetup in July 2019 in by Chris DeMars

Slide 1

Slide 1

I 💚 the #DeveloperCommunity Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Michael Supa https://ibm.co/2XMSUBX

Slide 5

Slide 5

Why? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 6

Slide 6

Focusing On Focus Twitter: @saltnburnem | Site: chrisdemars.com Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 7

Slide 7

Chris DeMars Front-End Developer Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 8

Slide 8

Chris DeMars ! @saltnburnem 😢 #KCDC2019 ! #DeveloperCommunity

Slide 9

Slide 9

That’s Me! Google Developer Expert Microsoft MVP International Speaker 🌎 Founder of Vuetroit Co-organizer of the Ann Arbor A11y Group Host of Tales From the Script 🔊 💚 Tattoos & Horror 👻 🤡 ☠. ). * Chris DeMars ! @saltnburnem ♿ #KCDC2019 ! #DeveloperCommunity

Slide 10

Slide 10

Twitter: @TalesFTScript | Site: tftscript.com 9

Slide 11

Slide 11

Question Time Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 12

Slide 12

20% of people have a disability Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 13

Slide 13

A11y? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 14

Slide 14

Numeronym Accessibility A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 15

Slide 15

What is accessibility? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 16

Slide 16

b e w⌄ What is accessibility? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 17

Slide 17

“Web accessibility means that people with disabilities can use the Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 18

Slide 18

Open Web = Inclusive Web = Web for all! Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 19

Slide 19

“Web accessibility means that EVERYONE can use the Web.” - Me (Chris DeMars) Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 20

Slide 20

“The web is not a barrier to people with disabilities, it is the solution..” http://webaim.org/articles/pour/ Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 21

Slide 21

Soooooo? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 22

Slide 22

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 23

Slide 23

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 24

Slide 24

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 25

Slide 25

Federal Website Accessibility Lawsuits by State in 2017 Number of Lawsuits 400 335 325 300 200 100 0 6 9 AZ CA 58 8 1 7 24 9 10 15 2 1 4 FL GA IL MA NH MI NJ NY OH PA PR TX VA Total Number of Suits Nationwide: At least 814 Chris DeMars | @saltnburnem http://bit.ly/2Ds4EPd

Slide 26

Slide 26

Focus? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 27

Slide 27

Focus? :focus Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 28

Slide 28

Why do we need focus? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 29

Slide 29

23

Slide 30

Slide 30

23

Slide 31

Slide 31

Developer Chris DeMars ! @saltnburnem Designer #KCDC2019 ! #DeveloperCommunity

Slide 32

Slide 32

Don’t Do It! Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 33

Slide 33

Don’t Do It! Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 34

Slide 34

Eric Meyer’s Reset Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 35

Slide 35

What about Normalize? Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 36

Slide 36

:focus-ring = :-moz-focusring Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 37

Slide 37

:focus-visible Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 38

Slide 38

:-moz-focusring Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 39

Slide 39

Importance of Focus Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 40

Slide 40

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. https://https://www.w3.org/TR/WCAG21/#focus-visible Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 41

Slide 41

Browsers & Focus Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 42

Slide 42

Chrome Mouse Focus Chris DeMars ! @saltnburnem

Slide 43

Slide 43

Chrome Mouse Focus Chris DeMars ! @saltnburnem

Slide 44

Slide 44

Chrome Keyboard Focus Chris DeMars ! @saltnburnem

Slide 45

Slide 45

Chrome Keyboard Focus Chris DeMars ! @saltnburnem

Slide 46

Slide 46

Firefox Mouse Focus Chris DeMars ! @saltnburnem

Slide 47

Slide 47

Firefox Mouse Focus Chris DeMars ! @saltnburnem

Slide 48

Slide 48

Firefox Keyboard Focus Chris DeMars ! @saltnburnem

Slide 49

Slide 49

Firefox Keyboard Focus Chris DeMars ! @saltnburnem

Slide 50

Slide 50

Safari Mouse Focus Chris DeMars ! @saltnburnem

Slide 51

Slide 51

Safari Mouse Focus Chris DeMars ! @saltnburnem

Slide 52

Slide 52

Safari Keyboard Focus Chris DeMars ! @saltnburnem

Slide 53

Slide 53

Safari Keyboard Focus Chris DeMars ! @saltnburnem

Slide 54

Slide 54

Edge 16 Mouse Focus Chris DeMars ! @saltnburnem

Slide 55

Slide 55

Edge 16 Mouse Focus Chris DeMars ! @saltnburnem

Slide 56

Slide 56

Edge 16 Keyboard Focus Chris DeMars ! @saltnburnem

Slide 57

Slide 57

Edge 16 Keyboard Focus Chris DeMars ! @saltnburnem

Slide 58

Slide 58

Tabindex tabindex=-1 Chris DeMars ! @saltnburnem tabindex=0 tabindex=1 #KCDC2019 ! #DeveloperCommunity

Slide 59

Slide 59

Focus Styles Borders Chris DeMars ! @saltnburnem Background Font #KCDC2019 ! #DeveloperCommunity

Slide 60

Slide 60

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 61

Slide 61

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 62

Slide 62

Focus Visible :focus-visible Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 63

Slide 63

CSS 4 Spec

Slide 64

Slide 64

Focus Visible :focus-visible Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 65

Slide 65

Focus Visible Polyfill https://github.com/WICG/focus-visible Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 66

Slide 66

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 67

Slide 67

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 68

Slide 68

Focus Within :focus-within Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 69

Slide 69

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 70

Slide 70

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 71

Slide 71

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 72

Slide 72

Awesome People! Marcy Sutton Rob Dodson Alice Boxhall Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 73

Slide 73

Awesome Companies! Deque IBM The Paciello Group Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 74

Slide 74

Resources https://bit.ly/2KxP4VO Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Slide 75

Slide 75

Thank You! Chris DeMars | @saltnburnem Slides https://bit.ly/2AOJGO6 CodePen https://bit.ly/2rebkfn