If it’s interactive, it needs a focus styleOctober 15, 2018# a11y TO Conf

Is it beautiful?Is it useful?

Is it beautiful?Is it useful?

Is it beautiful?Is it useful?

* { outline: none;}

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

What makes a good link?

link

link linklink linklink

link linklink linklink

link linklink linklink

link linklink linklink

link linklink linklink

home giftsstores listsdeals

registry faqlocations helpdepartments

tracking servicesshipping returnsyour profile

events corporatecatalogs rewardsfeedback

jobs site mappress privacyinvestors

Affordances are hints about how something should be used

your profileupdate informa

your profileupdate informa

your profileupdate informa

your profileupdate informa

your profileupdate informa

your profileupdate informa

informaupdate your profile

informaupdate your profile

informaupdate your profile

update informayour profile

your profilea { ... }

your profilea:active { ... }

your profilea:hover { ... }

your profilea:focus { ... }

your profile ✔a:visited { ... }

a { text-decoration: underline;}

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

button { ... }

SAVE button:focus { ... }

SAVE button:hover { ... }

SAVE

button:active { ... }

SAVE button[disabled] { ... }

SAVE

Identify and activate

<a>

<button>

<select>

<details>

<object>(sometimes)

<label>with

<input>or

<textarea>

alt="A puppy in a flower pot."

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.

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

SAVE

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

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

https://youtu.be/FJoo9Tcq9-0

New ways to focus

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

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

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

table

caption

tr

td

a

table

caption

tr:focus-within

td

a:focus

table

caption

tr:focus-within

td

a:focus Add background color

table

caption

tr:focus-within

td

a:focus Add background color

table

caption

tr:focus-within

td

a:focus Add background color

Add background color

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

Other people’s opinions

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

Website link

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

Website link User identifies

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

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

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 Keyboard input

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

tabtab

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.

Can you trust your heuristics?

(I AM PARANOID SKEPTICAL)

The web is more than just mice and keyboards

https://webaim.org/projects/screenreadersurvey7/

62.3%

Activate,don’t identify

Repeating the mistakes of browser sniffing

Concerns

Repeating the mistakes of browser sniffing

Sharing PII without knowing how it will be used

Concerns

Repeating the mistakes of browser sniffing

Sharing PII without knowing how it will be used

Bad design decisions made in good faith

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

Concerns

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.

Embrace the unknown

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

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

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

References

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/

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

: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

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/

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