Accessibility tips & tricks for CSS developers

Slide 1

Slide 1 text

Accessibility tips & tricks for CSS developers Marco Solazzi - @dwightjack CSS Day 2016 - cssday.it

Slide 2

Slide 2 text

About me - Senior Front-end @ AQuest - Co-founder Frontenders Verona

Slide 3

Slide 3 text

HTML semantics Progressive enhancement Mobile first Responsive UX

Slide 4

Slide 4 text

“ … enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. ” Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility

Slide 5

Slide 5 text

“ … enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. ” Accessibility - https://developer.mozilla.org/en-US/docs/Web/Accessibility

Slide 6

Slide 6 text

If you follow best practices you’re already providing some accessibility

Slide 7

Slide 7 text

- vision impairments - limited fine motor control - cognitive disabilities - hearing impairments - older people (ourselves tomorrow) For whom?

Slide 8

Slide 8 text

Because we have to. Goverments are enforcing accessibility by legislation. Why? - US: List of Web Accessibility-Related Litigation and Settlements (http://bit.ly/1n1JkQl) - IT: Legge Stanca (https://it.wikipedia.org/wiki/Legge_Stanca)

Slide 9

Slide 9 text

Because we should. Why?

Slide 10

Slide 10 text

“I’m going to do the website that way. If people can’t use it they can go f**k themselves!” Everyday rant... - random world class designer / developer

Slide 11

Slide 11 text

“I’m going to put stairs here. If people can’t climb them they can go f**k themselves!” What if... - random world class architect

Slide 12

Slide 12 text

Websites are like shops, restaurants and theatres: if you leave me out you don’t deserve my money.

Slide 13

Slide 13 text

- unreadable beauty - table syndrome - outline dilemma - out of sight... How?

Slide 14

Slide 14 text

Unreadable beauty

Slide 15

Slide 15 text

- blindness - low vision - color blindness Unreadable beauty

Slide 16

Slide 16 text

Unreadable beauty award-winning flash site, mid 2000

Slide 17

Slide 17 text

Unreadable beauty award-winning flash site, mid 2000

Slide 18

Slide 18 text

Unreadable beauty award-winning HTML site, mid 2010

Slide 19

Slide 19 text

Unreadable beauty award-winning HTML site, mid 2010

Slide 20

Slide 20 text

1. set html font-size to 100% 2. use rem fonts and em media queries 3. high-contrast optional theme Unreadable beauty

Slide 21

Slide 21 text

1. set html font-size to 100% 2. use rem fonts and em media queries 3. high-contrast optional theme Bonus: Use currentColor for flexible theming Unreadable beauty

Slide 22

Slide 22 text

Unreadable beauty

Slide 23

Slide 23 text

Unreadable beauty

Slide 24

Slide 24 text

Table syndrome

Slide 25

Slide 25 text

Every tag has its place in the world document.

Slide 26

Slide 26 text

Every tag has its place in the world document. … even - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby

Slide 27

Slide 27 text

s are evil! Let’s use

s … and display: table Table syndrome

Slide 28

Slide 28 text

s are evil! Let’s use

s … and display: table Problems: 1. not semantic 2. unannounced by screen-readers Table syndrome

Slide 29

Slide 29 text

s are ugly! Let’s use s and s with JS Table syndrome

Slide 30

Slide 30 text

s are ugly! Let’s use s and s with JS Problems: 1. missing focus 2. different/missing keyboard interactions Table syndrome

Slide 31

Slide 31 text

Table syndrome

Slide 32

Slide 32 text

Table syndrome

Slide 33

Slide 33 text

Outline dilemma

Slide 34

Slide 34 text

“ … provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). ” Outline dilemma - http://www.outlinenone.com

Slide 35

Slide 35 text

“ … provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). ” - http://www.outlinenone.com Outline dilemma

Slide 36

Slide 36 text

default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma

Slide 37

Slide 37 text

default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma

Slide 38

Slide 38 text

Outline dilemma

Slide 39

Slide 39 text

Outline dilemma

Slide 40

Slide 40 text

Outline dilemma

Slide 41

Slide 41 text

If you really can’t stand outline, remove it just for mouse / touch interactions. Outline dilemma - https://github.com/lindsayevans/outline.js - https://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an- accessible-manner/

Slide 42

Slide 42 text

Out of sight

Slide 43

Slide 43 text

How many ways to hide something? 1. opacity: 0 2. visibility: hidden 3. display: none Out of sight

Slide 44

Slide 44 text

How many ways to hide something? 1. opacity: 0 2. visibility: hidden 3. display: none ← accessibility friendly Out of sight

Slide 45

Slide 45 text

Options for element transitions: 1. display: none onComplete 2. tabindex=”-1” for every link / button Out of sight

Slide 46

Slide 46 text

Don’t speak bonus:

Slide 47

Slide 47 text

Don’t speak

Slide 48

Slide 48 text

Don’t speak Warning: totally unreliable!

Slide 49

Slide 49 text

Don’t speak Always prefer SVGs (even for icons)

Slide 50

Slide 50 text

I want more! Resources - http://a11yproject.com/ - https://www.paciellogroup.com/ - http://webaim.org/ - http://a11yweekly.com/ People - https://twitter.com/LeonieWatson - https://twitter.com/stevefaulkner

Slide 51

Slide 51 text

Thanks