if it’s interactive, it needs a focus style · tracking shipping your profile returns services...
TRANSCRIPT
![Page 1: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/1.jpg)
If it’s interactive, it needs a focus styleOctober 15, 2018# a11y TO Conf
![Page 2: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/2.jpg)
![Page 3: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/3.jpg)
Is it beautiful?Is it useful?
![Page 4: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/4.jpg)
![Page 5: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/5.jpg)
Is it beautiful?Is it useful?
![Page 6: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/6.jpg)
![Page 7: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/7.jpg)
Is it beautiful?Is it useful?
![Page 8: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/8.jpg)
* { outline: none;}
![Page 9: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/9.jpg)
Focus styles aren’t ugly.It’s your thinking that is.
![Page 10: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/10.jpg)
What makes a good link?
![Page 11: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/11.jpg)
link
![Page 12: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/12.jpg)
link linklink linklink
link linklink linklink
link linklink linklink
link linklink linklink
link linklink linklink
![Page 13: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/13.jpg)
home giftsstores listsdeals
registry faqlocations helpdepartments
tracking servicesshipping returnsyour profile
events corporatecatalogs rewardsfeedback
jobs site mappress privacyinvestors
![Page 14: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/14.jpg)
Affordances are hints about how something should be used
![Page 15: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/15.jpg)
your profileupdate informa
![Page 16: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/16.jpg)
your profileupdate informa
![Page 17: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/17.jpg)
your profileupdate informa
![Page 18: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/18.jpg)
your profileupdate informa
![Page 19: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/19.jpg)
your profileupdate informa
![Page 20: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/20.jpg)
your profileupdate informa
![Page 21: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/21.jpg)
informaupdate your profile
![Page 22: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/22.jpg)
informaupdate your profile
![Page 23: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/23.jpg)
informaupdate your profile
![Page 24: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/24.jpg)
update informayour profile
![Page 25: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/25.jpg)
your profilea { ... }
your profilea:active { ... }
your profilea:hover { ... }
your profilea:focus { ... }
your profile ✔a:visited { ... }
![Page 26: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/26.jpg)
a { text-decoration: underline;}
/* Quick and dirty */a:hover,a:focus { text-decoration: none;}
![Page 27: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/27.jpg)
button { ... }
SAVE button:focus { ... }
SAVE button:hover { ... }
SAVE
button:active { ... }
SAVE button[disabled] { ... }
SAVE
![Page 28: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/28.jpg)
Identify and activate
![Page 29: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/29.jpg)
<a>
<button>
<select>
<details>
<object>(sometimes)
<label>with
<input>or
<textarea>
![Page 30: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/30.jpg)
![Page 31: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/31.jpg)
![Page 32: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/32.jpg)
alt="A puppy in a flower pot."
![Page 33: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/33.jpg)
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeblock-sizeborderborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline-end
border-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-colorclearclipclip-pathcolorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumns
contentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areas
grid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-orientationimage-renderinginheritinitialinline-sizeinset-block-endinset-block-startinset-inline-endinset-inline-startisolationjustify-contentjustify-itemsjustify-selfleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemax-heightmax-widthmin-block-sizemin-height
min-inlin-sizemin-widthmix-blend-modenegativeobject-fitobject-positionopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originplace-contentplace-itemspointer-eventspositionquotesrange (@counter-style)resizerevertrightrotaterow-gapscalescroll-behaviorscroll-snap-typeshape-image-thresholdshape-marginshape-outside
tab-sizetable-layouttext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-positiontoptouch-actiontransformtransform-boxtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslateturnunicode-bidiunsetvertical-alignvisibilitywhite-spacewidowswidthwill-changeword-breakword-spacingword-wrapwriting-modeZ-index
etc.
![Page 34: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/34.jpg)
![Page 35: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/35.jpg)
button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none;}
SAVE
![Page 36: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/36.jpg)
button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none;}
SAVE
![Page 37: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/37.jpg)
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;}
![Page 38: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/38.jpg)
button:focus { box-shadow: 0 0 0 3px $color-background; 0 0 0 6px $color-focus; outline: none;}
SAVESAVE
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; }}
![Page 39: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/39.jpg)
![Page 40: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/40.jpg)
https://youtu.be/FJoo9Tcq9-0
![Page 41: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/41.jpg)
New ways to focus
![Page 42: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/42.jpg)
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 */}
![Page 43: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/43.jpg)
![Page 44: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/44.jpg)
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
![Page 45: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/45.jpg)
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
![Page 46: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/46.jpg)
table
caption
tr
td
a
![Page 47: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/47.jpg)
table
caption
tr:focus-within
td
a:focus
![Page 48: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/48.jpg)
table
caption
tr:focus-within
td
a:focus Add background color
![Page 49: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/49.jpg)
table
caption
tr:focus-within
td
a:focus Add background color
![Page 50: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/50.jpg)
table
caption
tr:focus-within
td
a:focus Add background color
Add background color
![Page 51: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/51.jpg)
https://twitter.com/keithjgrant/status/861749201725788160
![Page 52: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/52.jpg)
Other people’s opinions
![Page 53: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/53.jpg)
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 */}
![Page 54: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/54.jpg)
Website link
This week, Ikea opened its first store in India-a feat the company has been planning for many years.
![Page 55: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/55.jpg)
Website link User identifies
This week, Ikea opened its first store in India-a feat the company has been planning for many years.
![Page 56: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/56.jpg)
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.
![Page 57: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/57.jpg)
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.
![Page 58: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/58.jpg)
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.
tabtab
![Page 59: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/59.jpg)
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.
![Page 60: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/60.jpg)
![Page 61: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/61.jpg)
![Page 62: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/62.jpg)
Can you trust your heuristics?
(I AM PARANOID SKEPTICAL)
![Page 63: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/63.jpg)
![Page 64: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/64.jpg)
The web is more than just mice and keyboards
![Page 65: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/65.jpg)
![Page 66: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/66.jpg)
![Page 67: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/67.jpg)
![Page 68: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/68.jpg)
![Page 69: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/69.jpg)
![Page 70: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/70.jpg)
![Page 71: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/71.jpg)
![Page 72: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/72.jpg)
![Page 73: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/73.jpg)
![Page 74: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/74.jpg)
https://webaim.org/projects/screenreadersurvey7/
62.3%
![Page 75: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/75.jpg)
Activate,don’t identify
![Page 76: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/76.jpg)
Repeating the mistakes of browser sniffing
Concerns
![Page 77: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/77.jpg)
Repeating the mistakes of browser sniffing
Sharing PII without knowing how it will be used
Concerns
![Page 78: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/78.jpg)
Repeating the mistakes of browser sniffing
Sharing PII without knowing how it will be used
Bad design decisions made in good faith
Concerns
![Page 79: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/79.jpg)
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
![Page 80: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/80.jpg)
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.
![Page 81: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/81.jpg)
Embrace the unknown
![Page 82: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/82.jpg)
![Page 83: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/83.jpg)
![Page 84: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/84.jpg)
![Page 85: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/85.jpg)
![Page 86: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/86.jpg)
https://twitter.com/drewm/status/977882252943200257
![Page 87: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/87.jpg)
Good user experiences meet the user where they are, not where we hope they’ll be.
![Page 88: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/88.jpg)
Thank you!noti.st/ericwbaileyericwbailey.design@ericwbailey
![Page 89: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/89.jpg)
References
![Page 90: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/90.jpg)
Reboot, Resets, and ReasoningCSS-Trickshttps://css-tricks.com/reboot-resets-reasoning/
Link Contrast CheckerWebAIMhttps://webaim.org/resources/linkcontrastchecker/
Accessible Links Re:visitedFilament Group, Inc.https://www.filamentgroup.com/lab/a11y-links.html
How to Disable Links CSS-Trickshttps://css-tricks.com/how-to-disable-links/
![Page 91: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/91.jpg)
Privacy and the :visited selectorMDN Web Docshttps://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
Assistive Technologies – The SwitchAxess Labhttps://axesslab.com/switches/
Supporting users who change colours on GOV.UKGOV.UKhttps://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 4https://drafts.csswg.org/selectors-4/#focus-within-pseudo
![Page 92: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/92.jpg)
:focus-within - CSS: Cascading Style Sheets MDN Web Docshttps://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
CSS :focus-withinscottohara.mehttps://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 4https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
:focus-visible - CSS: Cascading Style Sheets MDN Web Docshttps://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
![Page 93: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/93.jpg)
Screen Reader User Survey #7 ResultsWebAIMhttps://webaim.org/projects/screenreadersurvey7/
The most popular smartphones in 8Device Atlashttps://deviceatlas.com/blog/most-popular-smartphones#india
Thoughts on screen reader detectionTinkhttps://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/
![Page 94: If it’s interactive, it needs a focus style · tracking shipping your profile returns services events catalogs feedback rewards corporate ... unicode-bidi unset vertical-align visibility](https://reader035.vdocument.in/reader035/viewer/2022071021/5fd5ef05d9f29b11f84389fa/html5/thumbnails/94.jpg)
Survey finds 85% of underserved students have access to only one digital deviceEducation Divehttps://www.educationdive.com/news/survey-finds-85-of-underserved-students-have-access-to-only-one-digital-de/531919/
The Web is Made of Edge Cases - Taylor HuntCodePenhttps://codepen.io/tigt/post/the-web-is-made-of-edge-cases