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. 1.

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

    2020 The Chicago Digital Accessibility & Inclusive Design Meetup
  2. 2.
  3. 4.
  4. 6.
  5. 11.
  6. 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
  7. 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
  8. 25.

    your profile a { ... } your profile a:active {

    ... } your profile a:hover { ... } your profile a:focus { ... } your profile ✔ a:visited { ... }
  9. 26.
  10. 27.

    a { text-decoration: underline; } /* Quick and dirty */

    a:hover, a:focus { text-decoration: none; }
  11. 28.

    button { ... } SAVE button:focus { ... } SAVE

    button:hover { ... } SAVE button:active { ... } SAVE button[disabled] { ... } SAVE
  12. 30.
  13. 31.
  14. 32.
  15. 35.
  16. 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.
  17. 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.
  18. 40.
  19. 41.

    button:focus { box-shadow: 0 0 0 3px $color-background; 0 0

    0 6px $color-focus; outline: none; } SAVE
  20. 42.

    button:focus { box-shadow: 0 0 0 3px $color-background; 0 0

    0 6px $color-focus; outline: none; } SAVE
  21. 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; }
  22. 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; } }
  23. 45.
  24. 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 */ }
  25. 49.
  26. 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
  27. 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
  28. 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 */ }
  29. 60.

    Website link This week, Ikea opened its first store in

    India-a feat the company has been planning for many years.
  30. 61.

    Website link User identifies This week, Ikea opened its first

    store in India-a feat the company has been planning for many years.
  31. 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.
  32. 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.
  33. 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
  34. 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.
  35. 66.
  36. 67.
  37. 69.
  38. 71.
  39. 72.
  40. 73.
  41. 74.
  42. 75.
  43. 76.
  44. 77.
  45. 78.
  46. 79.
  47. 84.

    Repeating the mistakes of browser sniffing Sharing PII without knowing

    how it will be used Bad design decisions made in good faith Concerns
  48. 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
  49. 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.
  50. 94.
  51. 95.
  52. 96.
  53. 97.
  54. 101.
  55. 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/
  56. 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
  57. 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
  58. 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/
  59. 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