Focusing on Focus

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

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

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

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

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

Chris DeMars ! @saltnburnem 😢 #KCDC2019 ! #DeveloperCommunity

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

Twitter: @TalesFTScript | Site: tftscript.com 9

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

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

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

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

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

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

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

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

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

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

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

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

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

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

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

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

23

23

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

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

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

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

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

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

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

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

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

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

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

Chrome Mouse Focus Chris DeMars ! @saltnburnem

Chrome Mouse Focus Chris DeMars ! @saltnburnem

Chrome Keyboard Focus Chris DeMars ! @saltnburnem

Chrome Keyboard Focus Chris DeMars ! @saltnburnem

Firefox Mouse Focus Chris DeMars ! @saltnburnem

Firefox Mouse Focus Chris DeMars ! @saltnburnem

Firefox Keyboard Focus Chris DeMars ! @saltnburnem

Firefox Keyboard Focus Chris DeMars ! @saltnburnem

Safari Mouse Focus Chris DeMars ! @saltnburnem

Safari Mouse Focus Chris DeMars ! @saltnburnem

Safari Keyboard Focus Chris DeMars ! @saltnburnem

Safari Keyboard Focus Chris DeMars ! @saltnburnem

Edge 16 Mouse Focus Chris DeMars ! @saltnburnem

Edge 16 Mouse Focus Chris DeMars ! @saltnburnem

Edge 16 Keyboard Focus Chris DeMars ! @saltnburnem

Edge 16 Keyboard Focus Chris DeMars ! @saltnburnem

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

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

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

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

CSS 4 Spec

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

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

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

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

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #KCDC2019 ! #DeveloperCommunity

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

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

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

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