If it s interactive, it needs a focus style. October 15, 2018

Size: px

Start display at page:

Download "If it s interactive, it needs a focus style. October 15, 2018"

Marlene Lewis
5 years ago
Views:

1 If it s interactive, it needs a focus style October 15, 2018 # a11y TO Conf

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 stores deals lists gifts registry locations departments help faq tracking shipping your profile returns services events catalogs feedback rewards corporate jobs press investors privacy site map

14 Affordances are hints about how something should be used

15 date your profile inform

16 date your profile inform

17 date your profile inform

18 date your profile inform

19 date your profile inform

20 date your profile inform

21 date your profile inform

22 date your profile inform

23 date your profile inform

24 date your profile inform

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

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

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

28 Identify and activate

29 <a> <button> <select> <details> <object> <label> with <input> or <textarea> (sometimes)

32 alt="a puppy in a flower pot."

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

35 button:focus { box-shadow: } px $color-background; px $color-focus; outline: none; SAVE

36 button:focus { box-shadow: } px $color-background; px $color-focus; outline: none; SAVE

37 button:focus { box-shadow: px $color-background; px $color-focus; button:focus { outline: none; box-shadow: } px $color-background; px $color-focus; outline: none; } SAVE

38 button:focus { box-shadow: px $color-background; px $color-focus; outline: none; } media screen and SAVE (-ms-high-contrast: active) { background-color: buttonface; color: window; } }

41 New ways to focus

42 form:focus-within { } /* Your styles here */ A pseudo-class that is activated when an element is focused, or contains an element that is focused. MDN

44 List of NBC television affiliates 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

45 List of NBC television affiliates 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

46 table caption tr td a

47 table caption tr:focus-within td a:focus

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

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

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

52 Other people s opinions

53 a:focus-visible { } /* Your styles here */ A pseudo-class that is activated when an element is focused and UA determines via heuristics the user s input modality. MDN

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

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

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

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

58 This week, Ikea opened its first store in India-a feat the company has been planning for many years. tab Website link User identifies UA Heuristics Keyboard input

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

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

64 The web is more than just mice and keyboards

74 62.3%

75 Activate, don t identify

76 Concerns Repeating the mistakes of browser sniffing

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

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

79 Concerns 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

80 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 m experiencing when I use it.

81 Embrace the unknown

87 Good user experiences meet the user where they are, not where we hope they ll be.

88 Thank you! noti.st/ericwbailey

89 References

90 Reboot, Resets, and Reasoning CSS-Tricks Link Contrast Checker WebAIM Accessible Links Re:visited Filament Group, Inc. How to Disable Links CSS-Tricks

91 Privacy and the :visited selector MDN Web Docs Assistive Technologies The Switch Axess Lab Supporting users who change colours on GOV.UK GOV.UK The Focus Container Pseudo-class: :focus-within W3C Editor s Draft - Selectors Level 4

92 :focus-within - CSS: Cascading Style Sheets MDN Web Docs CSS :focus-within scottohara.me The Focus-Indicated Pseudo-class: :focus-visible W3C Editor s Draft - Selectors Level 4 :focus-visible - CSS: Cascading Style Sheets MDN Web Docs

93 Screen Reader User Survey #7 Results WebAIM The most popular smartphones in 8 Device Atlas Thoughts on screen reader detection Tink Why screen reader detection on the web is a bad thing Marco's Accessibility Blog

94 Survey finds 85% of underserved students have access to only one digital device Education Dive tal-de/531919/ The Web is Made of Edge Cases - Taylor Hunt CodePen

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors