If It's Interactive, It Needs a Focus Style with Eric Bailey

Focus styles don't have to be ugly! Focus styles are an integral part of any mature design system.

This talk will discuss the intersection of WCAG compliance and Inclusive Design, as well as new focus-related CSS selectors. Additionally, strategies for how to effectively implement them in your organization will be discussed.

About the speaker

Eric Bailey is a Boston-based designer who helps create straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs using accessible, performant, device-agnostic technology. He's an inclusive design advocate, A11Y Project maintainer, MDN Web Docs contributor, and recovering curmudgeon.

Transcript

1. If it’s interactive, it needs a focus style April 14, 2020 The Chicago Digital Accessibility & Inclusive Design Meetup
3. Is it beautiful? Is it useful?
5. Is it beautiful? Is it useful?
7. Is it beautiful? Is it useful?
8. * { outline: none; }
9. Focus styles aren’t ugly. It’s your thinking that is.
10. What makes a good link?
11. link
12. link link link link link link link link link link link link link link link link link link link link link link link link link
13. home gifts stores lists deals registry faq locations help departments tracking services shipping returns your profile events corporate catalogs rewards feedback jobs site map press privacy investors
14. Affordances are hints about how something should be used
15. your profile pdate inform
16. your profile pdate inform
17. your profile pdate inform
18. your profile pdate inform
19. your profile pdate inform
20. your profile pdate inform
21. inform pdate your profile
22. inform pdate your profile
23. inform pdate your profile
24. pdate inform your profile
25. your profile a { ... } your profile a:active { ... } your profile a:hover { ... } your profile a:focus { ... } your profile ✔ a:visited { ... }
27. a { text-decoration: underline; } /* Quick and dirty */ a:hover, a:focus { text-decoration: none; }
28. button { ... } SAVE button:focus { ... } SAVE button:hover { ... } SAVE button:active { ... } SAVE button[disabled] { ... } SAVE
29. Poor affordances won’t make you rich (GET IT?)
33. Identify and activate
34. <a> <button> <details> <object> (sometimes) <label> with <input> <select> or <textarea>
36. alt="A puppy in a flower pot."
37. LINK. IMAGE. A happy-looking Saint Bernard puppy resting his paw on the lid of the clay flower pot he’s been placed inside of. His tongue is hanging out and he is looking straight at the camera. The flower pot is placed in front of a flowering yellow plant on a bright Spring day.
38. https://twitter.com/karlgroves/status/1071482532762394624
39. align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size block-size border border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside caption-side caret-color clear clip clip-path color color-adjust column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-start grid-row grid-row-end grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens image-orientation image-rendering inherit initial inline-size inset-block-end inset-block-start inset-inline-end inset-inline-start isolation justify-content justify-items justify-self left letter-spacing line-break line-height list-style list-style-image list-style-position list-style-type margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type max-height max-width min-block-size min-height min-inlin-size min-width mix-blend-mode negative object-fit object-position opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-wrap overflow-x overflow-y padding padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin place-content place-items pointer-events position quotes range (@counter-style) resize revert right rotate row-gap scale scroll-behavior scroll-snap-type shape-image-threshold shape-margin shape-outside tab-size table-layout text-align text-align-last text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-indent text-justify text-orientation text-overflow text-rendering text-shadow text-transform text-underline-position top touch-action transform transform-box transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate turn unicode-bidi unset vertical-align visibility white-space widows width will-change word-break word-spacing word-wrap writing-mode Z-index etc.
41. button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none; } SAVE
42. button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none; } SAVE
43. button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none; } SAVE button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none; }
44. button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none; } SAVE SAVE button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none; @media screen and (-ms-high-contrast: active) { background-color: buttonFace; color: window; } }
46. https://youtu.be/FJoo9Tcq9-0
47. New ways to focus
48. A pseudo-class that is activated when an element is focused, or contains an element that is focused.” MDN form:focus-within { /* Your styles here */ }
50. Station Channel City/Market Owned Since KNBC 4 (36) Los Angeles 1949 KNSD 39 (40) San Diego 1996 KNTV 11 (12) San Jose/San Francisco 2002 WRC-TV 4 (48) Washington, D.C. 1947 List of NBC television affiliates
51. Station Channel City/Market Owned Since KNBC 4 (36) Los Angeles 1949 KNSD 39 (40) San Diego 1996 KNTV 11 (12) San Jose/San Francisco 2002 WRC-TV 4 (48) Washington, D.C. 1947 List of NBC television affiliates San Diego
52. table caption tr td a
53. table caption tr:focus-within td a:focus
54. table caption tr:focus-within td a:focus Add background color
55. table caption tr:focus-within td a:focus Add background color
56. table caption tr:focus-within td a:focus Add background color Add background color
57. https://twitter.com/keithjgrant/status/861749201725788160
58. Other people’s opinions
59. A pseudo-class that is activated when an element is focused and UA determines via heuristics the user’s input modality.” MDN a:focus-visible { /* Your styles here */ }
60. Website link This week, Ikea opened its first store in India-a feat the company has been planning for many years.
61. Website link User identifies This week, Ikea opened its first store in India-a feat the company has been planning for many years.
62. Website link User identifies UA Heuristics This week, Ikea opened its first store in India-a feat the company has been planning for many years.
63. Website link User identifies UA Heuristics Cursor input This week, Ikea opened its first store in India-a feat the company has been planning for many years.
64. Website link User identifies UA Heuristics Keyboard input This week, Ikea opened its first store in India-a feat the company has been planning for many years. tab tab
65. This week, Ikea opened its first store in India-a feat the company has been planning for many years. This week, Ikea opened its first store in India-a feat the company has been planning for many years.
68. Can you trust your heuristics? (I AM PARANOID SKEPTICAL)
70. The web is more than just mice and keyboards
80. https://webaim.org/projects/screenreadersurvey7/ 62.3%
81. Activate, don’t identify
82. Repeating the mistakes of browser sniffing Concerns
83. Repeating the mistakes of browser sniffing Sharing PII without knowing how it will be used Concerns
84. Repeating the mistakes of browser sniffing Sharing PII without knowing how it will be used Bad design decisions made in good faith Concerns
85. Repeating the mistakes of browser sniffing Sharing PII without knowing how it will be used Bad design decisions made in good faith Being forced into an AT-only companion experience Concerns
86. Fully able Expert Completely unfamiliar Severely impaired
87. Fully able Expert Completely unfamiliar Severely impaired Google Docs
88. Fully able Expert Completely unfamiliar Severely impaired Google Docs Meetup
89. Fully able Expert Completely unfamiliar Severely impaired Google Docs Differential calculus Meetup
90. Fully able Expert Completely unfamiliar Severely impaired Google Docs Differential calculus Moscow Metro Meetup
91. Fully able Expert Completely unfamiliar Severely impaired Google Docs Moscow Metro Differential calculus Meetup
92. It’s not about what a system identifies me as. It’s about how well a system responds to who I am and what I experience when I use it.
93. Embrace the unknown
98. https://twitter.com/drewm/status/977882252943200257
99. Good user experiences meet people where they are, not where we hope they’ll be.
100. Thank you! noti.st/ericwbailey ericwbailey.design @ericwbailey
101. References
102. Reboot, Resets, and Reasoning CSS-Tricks https://css-tricks.com/reboot-resets-reasoning/ Link Contrast Checker WebAIM https://webaim.org/resources/linkcontrastchecker/ Accessible Links Re:visited Filament Group, Inc. https://www.filamentgroup.com/lab/a11y-links.html How to Disable Links CSS-Tricks https://css-tricks.com/how-to-disable-links/
103. Privacy and the :visited selector MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector Assistive Technologies – The Switch Axess Lab https://axesslab.com/switches/ Supporting users who change colours on GOV.UK GOV.UK https://accessibility.blog.gov.uk/2018/08/01/supporting-users-who-change-colours-on-gov-uk/ §9.5. The Focus Container Pseudo-class: ‘:focus-within’ W3C Editor’s Draft - Selectors Level 4 https://drafts.csswg.org/selectors-4/#focus-within-pseudo
104. :focus-within - CSS: Cascading Style Sheets MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within CSS :focus-within scottohara.me https://www.scottohara.me/blog/2017/05/14/focus-within.html §9.4. The Focus-Indicated Pseudo-class: ‘:focus-visible’ W3C Editor’s Draft - Selectors Level 4 https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo :focus-visible - CSS: Cascading Style Sheets MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
105. Screen Reader User Survey #7 Results WebAIM https://webaim.org/projects/screenreadersurvey7/ The most popular smartphones in 2018 Device Atlas https://deviceatlas.com/blog/most-popular-smartphones#india Thoughts on screen reader detection Tink https://tink.uk/thoughts-on-screen-reader-detection/ Why screen reader detection on the web is a bad thing Marco's Accessibility Blog https://www.marcozehe.de/2014/02/27/why-screen-reader-detection-on-the-web-is-a-bad-thing/
106. Survey finds 85% of underserved students have access to only one digital device Education Dive https://www.educationdive.com/news/survey-finds-85-of-underserved-students-have-access-to-only-one-digi tal-de/531919/ The Web is Made of Edge Cases - Taylor Hunt CodePen https://codepen.io/tigt/post/the-web-is-made-of-edge-cases