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

C93a2f095a8dce6dbc3176db3e837db0?s=47 A11YChi
April 12, 2020

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.

C93a2f095a8dce6dbc3176db3e837db0?s=128

A11YChi

April 12, 2020
Tweet

Transcript

  1. If it’s interactive, it needs a focus style April 14,

    2020 The Chicago Digital Accessibility & Inclusive Design Meetup
  2. None
  3. Is it beautiful? Is it useful?

  4. None
  5. Is it beautiful? Is it useful?

  6. None
  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 { ... }
  26. None
  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?)

  30. None
  31. None
  32. None
  33. Identify and activate

  34. <a> <button> <details> <object> (sometimes) <label> with <input> <select> or

    <textarea>
  35. None
  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.
  40. None
  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; } }
  45. None
  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 */ }
  49. None
  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.
  66. None
  67. None
  68. Can you trust your heuristics? (I AM PARANOID SKEPTICAL)

  69. None
  70. The web is more than just mice and keyboards

  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  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

  94. None
  95. None
  96. None
  97. None
  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