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
   

   View Slide

2. View Slide

3. Is it beautiful?
   Is it useful?
   

   View Slide

4. View Slide

5. Is it beautiful?
   Is it useful?
   

   View Slide

6. View Slide

7. Is it beautiful?
   Is it useful?
   

   View Slide

8. * {
   outline: none;
   }
   

   View Slide

9. Focus styles
   aren’t ugly.
   It’s your thinking
   that is.
   

   View Slide

10. What makes a
    good link?
    

    View Slide

11. link
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. Affordances are hints
    about how something
    should be used
    

    View Slide

15. your profile
    pdate inform
    

    View Slide

16. your profile
    pdate inform
    

    View Slide

17. your profile
    pdate inform
    

    View Slide

18. your profile
    pdate inform
    

    View Slide

19. your profile
    pdate inform
    

    View Slide

20. your profile
    pdate inform
    

    View Slide

21. inform
    pdate your profile
    

    View Slide

22. inform
    pdate your profile
    

    View Slide

23. inform
    pdate your profile
    

    View Slide

24. pdate inform
    your profile
    

    View Slide

25. your profile
    a { ... }
    your profile
    a:active { ... }
    your profile
    a:hover { ... }
    your profile
    a:focus { ... }
    your profile ✔
    a:visited { ... }
    

    View Slide

26. View Slide

27. a {
    text-decoration: underline;
    }
    /* Quick and dirty */
    a:hover,
    a:focus {
    text-decoration: none;
    }
    

    View Slide

28. button { ... }
    SAVE
    button:focus { ... }
    SAVE
    button:hover { ... }
    SAVE
    button:active { ... }
    SAVE
    button[disabled] { ... }
    SAVE
    

    View Slide

29. Poor affordances
    won’t make you rich
    (GET IT?)
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. Identify and
    activate
    

    View Slide

34. 
    
    
    
    (sometimes)
    
    with
    
    
    or
    
    

    View Slide

35. View Slide

36. alt="A puppy in a
    flower pot."
    

    View Slide

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.
    

    View Slide

38. https://twitter.com/karlgroves/status/1071482532762394624
    

    View Slide

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.
    

    View Slide

40. View Slide

41. button:focus {
    box-shadow:
    0 0 0 3px $color-background;
    0 0 0 6px $color-focus;
    outline: none;
    }
    SAVE
    

    View Slide

42. button:focus {
    box-shadow:
    0 0 0 3px $color-background;
    0 0 0 6px $color-focus;
    outline: none;
    }
    SAVE
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    }
    

    View Slide

45. View Slide

46. https://youtu.be/FJoo9Tcq9-0
    

    View Slide

47. New ways
    to focus
    

    View Slide

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 */
    }
    

    View Slide

49. View Slide

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
    

    View Slide

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
    

    View Slide

52. table
    caption
    tr
    td
    a
    

    View Slide

53. table
    caption
    tr:focus-within
    td
    a:focus
    

    View Slide

54. table
    caption
    tr:focus-within
    td
    a:focus Add background color
    

    View Slide

55. table
    caption
    tr:focus-within
    td
    a:focus Add background color
    

    View Slide

56. table
    caption
    tr:focus-within
    td
    a:focus Add background color
    Add background color
    

    View Slide

57. https://twitter.com/keithjgrant/status/861749201725788160
    

    View Slide

58. Other people’s
    opinions
    

    View Slide

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 */
    }
    

    View Slide

60. Website link
    This week, Ikea opened its first store in India-a feat
    the company has been planning for many years.
    

    View Slide

61. Website link User identifies
    This week, Ikea opened its first store in India-a feat
    the company has been planning for many years.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

66. View Slide

67. View Slide

68. Can you trust
    your heuristics?
    (I AM PARANOID SKEPTICAL)
    

    View Slide

69. View Slide

70. The web is more
    than just mice and
    keyboards
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. https://webaim.org/projects/screenreadersurvey7/
    62.3%
    

    View Slide

81. Activate,
    don’t identify
    

    View Slide

82. Repeating the mistakes
    of browser sniffing
    Concerns
    

    View Slide

83. Repeating the mistakes
    of browser sniffing
    Sharing PII without
    knowing how it will be used
    Concerns
    

    View Slide

84. Repeating the mistakes
    of browser sniffing
    Sharing PII without
    knowing how it will be used
    Bad design decisions
    made in good faith
    Concerns
    

    View Slide

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
    

    View Slide

86. Fully able
    Expert
    Completely
    unfamiliar
    Severely
    impaired
    

    View Slide

87. Fully able
    Expert
    Completely
    unfamiliar
    Severely
    impaired
    Google Docs
    

    View Slide

88. Fully able
    Expert
    Completely
    unfamiliar
    Severely
    impaired
    Google Docs
    Meetup
    

    View Slide

89. Fully able
    Expert
    Completely
    unfamiliar
    Severely
    impaired
    Google Docs
    Differential
    calculus
    Meetup
    

    View Slide

90. Fully able
    Expert
    Completely
    unfamiliar
    Severely
    impaired
    Google Docs
    Differential
    calculus
    Moscow
    Metro
    Meetup
    

    View Slide

91. Fully able
    Expert
    Completely
    unfamiliar
    Severely
    impaired
    Google Docs
    Moscow
    Metro
    Differential
    calculus
    Meetup
    

    View Slide

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.
    

    View Slide

93. Embrace the
    unknown
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. https://twitter.com/drewm/status/977882252943200257
    

    View Slide

99. Good user experiences
    meet people where
    they are, not where we
    hope they’ll be.
    

    View Slide

100. Thank you!
     noti.st/ericwbailey
     ericwbailey.design
     @ericwbailey
     

     View Slide

101. References
     

     View Slide

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/
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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/
     

     View Slide

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
     

     View Slide