Universal web design [HackerYou a11y club]

Slide 1

Slide 1 text

UNIVERSAL WEB DESIGN DAVE NE WTON • @N EWTRON HACKE RYO U A 11Y CLUB 2016

Slide 2

Slide 2 text

1950

Slide 3

Slide 3 text

Image: Boileau

Slide 4

Slide 4 text

Image: Baanlaesuan

Slide 5

Slide 5 text

Image: Goodnight Raleigh

Slide 6

Slide 6 text

Image: Museum of Disability History

Slide 7

Slide 7 text

Rehabilitation Act (1973) Americans with Disabilities Act (1990) Vocational Rehabilitation Amendment Act (1965) Architectural Barriers Act (1968) Education for Handicapped Children Act (1975) Fair Housing Amendments Act (1988) Image: Museum of Disability History

Slide 8

Slide 8 text

Image: Wikimedia Commons

Slide 9

Slide 9 text

Image: Flashmoment <ﬂashmomentcontinued.wordpress.com/2016/01/21/nyc-solomon-r-guggenheim-museum-ಅ嬄槹‧r‧ݘ໑ၹঢᗦ悬沣-20151123>

Slide 10

Slide 10 text

Image: Wikimedia Commons

Slide 11

Slide 11 text

“ Universal design is the design of products and environments to be usable by all people… ”   —Ron Mace

Slide 12

Slide 12 text

Images: CREEC , Encore

Slide 13

Slide 13 text

Now

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Disability

Slide 16

Slide 16 text

Disability Performance

Slide 17

Slide 17 text

Disability Performance Browsers/devices

Slide 18

Slide 18 text

“ Your success as a developer is not determined by the tools that you use, or even the style of your code, it is the business impact that your code has… ”   —Steven Michael Thomas

Slide 19

Slide 19 text

Make it easy Make it possible

Slide 20

Slide 20 text

Make it easy Make it possible (maybe)

Slide 21

Slide 21 text

Make it easy Make it possible (maybe)

Slide 22

Slide 22 text

Make it easy Make it possible (maybe)

Slide 23

Slide 23 text

Disability

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

19% of people have a disability CDC Colour Blind Awareness UNH

Slide 26

Slide 26 text

19% of people have a disability —  4% of adults have cognitive disabilities 8% of men (and 0.5% of women) are color blind 9% of adults have vision trouble 15% of adults have physical functioning difﬁculty 17% of adults have hearing trouble CDC Colour Blind Awareness UNH

Slide 27

Slide 27 text

Slide 28

Slide 28 text

The disability market is about the size of China and is emerging as other markets have in the past— 1.3 billion people and $1.2 trillion in annual disposable income Return on Disability

Slide 29

Slide 29 text

Performance

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

33% of US adults don’t have home broadband Pew

Slide 32

Slide 32 text

33% of US adults don’t have home broadband —  46% of black adults 50% of Hispanic adults —  37% of adults who make $20k–$50k/year 59% of adults who make under $20k/year —  45% of adults in rural areas Pew

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

19% of mobile connections in the US aren’t 4G/LTE OpenSignal   Ericsson

Slide 35

Slide 35 text

19% of mobile connections in the US aren’t 4G/LTE 24% of mobile connections in Canada OpenSignal   Ericsson

Slide 36

Slide 36 text

19% of mobile connections in the US aren’t 4G/LTE 24% of mobile connections in Canada 47% of mobile connections in the UK 51% of mobile connections in India OpenSignal   Ericsson

Slide 37

Slide 37 text

19% of mobile connections in the US aren’t 4G/LTE 24% of mobile connections in Canada 47% of mobile connections in the UK 51% of mobile connections in India 75% of mobile connections in Indonesia are 2G OpenSignal   Ericsson

Slide 38

Slide 38 text

Browser and device support

Slide 39

Slide 39 text

Image: OpenSignal

Slide 40

Slide 40 text

If you only support IE11+ and latest two versions of Chrome, Firefox, Opera, Safari: 360 Safe Browser Android BlackBerry Coc Coc IE (old) IEMobile (old) Maxthon MeeGo Microsoft-WebDAV Mozilla NetFront Nokia Phantom Pufﬁn QQ Browser Samsung Internet StatCounter Sogou Explorer Sony PS3 Sony PS4 SonyEricsson Tizen UC Browser Yandex Browser Other/unknown

Slide 41

Slide 41 text

If you only support IE11+ and latest two versions of Chrome, Firefox, Opera, Safari: you don’t support 30.03% of network trafﬁc 360 Safe Browser Android BlackBerry Coc Coc IE (old) IEMobile (old) Maxthon MeeGo Microsoft-WebDAV Mozilla NetFront Nokia Phantom Pufﬁn QQ Browser Samsung Internet + older Chrome/Chromium, Firefox, Opera/Opera Mini, Safari StatCounter Sogou Explorer Sony PS3 Sony PS4 SonyEricsson Tizen UC Browser Yandex Browser Other/unknown

Slide 42

Slide 42 text

Opera Mini UC Browser StatCounter

Slide 43

Slide 43 text

Opera Mini UC Browser StatCounter

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

JavaScript is not the enemy

Slide 46

Slide 46 text

JavaScript is not the enemy JavaScript is your friend

Slide 47

Slide 47 text

JavaScript is not the enemy JavaScript is your friend but…

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

1.1% of visits get a broken JavaScript experience gov.uk

Slide 50

Slide 50 text

1.1% of visits get a broken JavaScript experience — 0.1% turn it off or have a browser that doesn’t support it gov.uk

Slide 51

Slide 51 text

1.1% of visits get a broken JavaScript experience — 0.1% turn it off or have a browser that doesn’t support it 0.9% have JS that messes up gov.uk

Slide 52

Slide 52 text

page/script download malware blocking/manipulating scripts script parsing plugins/apps blocking/manipulate scripts ﬁrewalls CDN failure ﬂakey/dropped connections poorly-written JS ISP blocking/manipulating scripts browsers without modern JS support 1.1% of visits get a broken JavaScript experience — 0.1% turn it off or have a browser that doesn’t support it 0.9% have JS that messes up gov.uk

Slide 53

Slide 53 text

Image: Why availability matters

Slide 54

Slide 54 text

Image: Why availability matters

Slide 55

Slide 55 text

Tomorrow

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Resilience

Slide 58

Slide 58 text

“ At Internet scale, the best you can hope for is to build a reliable software platform on top of components that are completely unreliable. That puts you in an environment where complex failures are both inevitable and unpredictable. ”   —Jesse Robbins ACM Queue

Slide 59

Slide 59 text

separate but equal? nope.

Slide 60

Slide 60 text

Guess this wasn’t worthwhile…

Slide 61

Slide 61 text

Tap here to get the features you need

Slide 62

Slide 62 text

Click here to feel othered

Slide 63

Slide 63 text

I C PAPER

Slide 64

Slide 64 text

I C PAPER PAPER

Slide 65

Slide 65 text

Performance Accessibility Progressive Enhancement Responsive web design

Slide 66

Slide 66 text

let’s talk about progressive enhancement for a moment

Slide 67

Slide 67 text

Map your work to your users’ reality

Slide 68

Slide 68 text

“ Universal design is the design of products and environments to be usable by all people… ”   —Ron Mace