Slide 1

Slide 1 text

What HTML5 Means for Web Accessibility Kevin Lamping All logos, trade marks and brand names used belong to the respective owners

Slide 2

Slide 2 text

@klamping

Slide 3

Slide 3 text

My Start

Slide 4

Slide 4 text

2007

Slide 5

Slide 5 text

A Favor

Slide 6

Slide 6 text

?.com

Slide 7

Slide 7 text

Just Imagine

Slide 8

Slide 8 text

WCAG 2.0

Slide 9

Slide 9 text

Your Job

Slide 10

Slide 10 text

Acce$$ibility

Slide 11

Slide 11 text

Good News Bad News

Slide 12

Slide 12 text

Accessibility is easy

Slide 13

Slide 13 text

HTML is mostly accessible

Slide 14

Slide 14 text

✓ Alt Text ✓ Labels ✓ Semantics

Slide 15

Slide 15 text

Let’s skip that and talk HTML5!

Slide 16

Slide 16 text

Accessibility is hard...

Slide 17

Slide 17 text

for non-trivial stuff

Slide 18

Slide 18 text

Even simple non-trivial stuff

Slide 19

Slide 19 text

WCAG 2.0

Slide 20

Slide 20 text

Support

Slide 21

Slide 21 text

Accessibility is Frustrating

Slide 22

Slide 22 text

We forget about it We make excuses

Slide 23

Slide 23 text

We all need forgiveness

Slide 24

Slide 24 text

Bless me father, for I have sinned

Slide 25

Slide 25 text

It has been days since I last used a screen reader

Slide 26

Slide 26 text

I am sorry for this and all the sins of my past life, especially for .

Slide 27

Slide 27 text

Amen

Slide 28

Slide 28 text

What’s the point?

Slide 29

Slide 29 text

You have a choice

Slide 30

Slide 30 text

They don’t

Slide 31

Slide 31 text

We’re Zuul

Slide 32

Slide 32 text

Accessibility is good for you

Slide 33

Slide 33 text

Accessibility Usability

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

“For my 1 year old daughter a magazine is an iPad that doesn’t work” - YouTube Video

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

“...people aren’t talking about how he made his [tech] accessible”

Slide 38

Slide 38 text

“a 15-year-old kid can be playing with Garage Band and come up with unbelievable ideas”

Slide 39

Slide 39 text

“He has leveled the playing field.”

Slide 40

Slide 40 text

“His company made it accessible without screaming, ‘This is for the blind, this is for the deaf’”

Slide 41

Slide 41 text

“I’m just hoping his life [will] challenge those to do what he has done”

Slide 42

Slide 42 text

“you just make it one of your apps. That will create a world accessible to anyone”

Slide 43

Slide 43 text

“Thanks” - Stevie W onder

Slide 44

Slide 44 text

All you need is love

Slide 45

Slide 45 text

What does HTML5 mean for web accessibility?

Slide 46

Slide 46 text

article, aside, footer, header, nav, section

Slide 47

Slide 47 text

Slide 48

Slide 48 text

==

Slide 49

Slide 49 text

==

Slide 50

Slide 50 text

==

Slide 51

Slide 51 text

==

Slide 52

Slide 52 text

==

Slide 53

Slide 53 text

html5accessibility . com

Slide 54

Slide 54 text

Unsupported Supported

Slide 55

Slide 55 text

Unsupported Supported

Slide 56

Slide 56 text

What does “supported” really mean? Disclaimer

Slide 57

Slide 57 text

Listens to Talks to

Slide 58

Slide 58 text

and here Support needed here Listens to Talks to

Slide 59

Slide 59 text

Users are here 2008 2009 2010 2011 2012 2013

Slide 60

Slide 60 text

Users are here 2008 2009 2010 2011 2012 2013 Support is

Slide 61

Slide 61 text

Is there any hope?

Slide 62

Slide 62 text

Belt Suspenders 㽊

Slide 63

Slide 63 text

article, aside, footer, header, nav, section

Slide 64

Slide 64 text

It ain’t over till the fat lady sings an ARIA

Slide 65

Slide 65 text

ARIA

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Can you improve?

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Keyboard Support It’s not just for Screen Readers

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Slide 78

Slide 78 text

Chrome Audio Controls Firefox Video Controls

Slide 79

Slide 79 text

Custom Audio Controls

Slide 80

Slide 80 text

Slide 81

Slide 81 text

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

My Son...

Slide 87

Slide 87 text

Slide 88

Slide 88 text

photo 1 My Son... (photo 1).

Slide 89

Slide 89 text

it’s complicated

Slide 90

Slide 90 text

Shapes

A circle and box.

Slide 91

Slide 91 text

http://is.gd/ OTCv0x

Slide 92

Slide 92 text

Support

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

Two things about Mobile Accessibility

Slide 96

Slide 96 text

Test for it.

Slide 97

Slide 97 text

Use HTML5 elements They’re natively supported

Slide 98

Slide 98 text

Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test

Slide 99

Slide 99 text

!= != !=

Slide 100

Slide 100 text

Does HTML5 improve web accessibility or make it worse?

Slide 101

Slide 101 text

It’s kinda both

Slide 102

Slide 102 text

How have screen readers adapted?

Slide 103

Slide 103 text

It’s getting better all the time

Slide 104

Slide 104 text

Does HTML5 remove the need for accessibility testing?

Slide 105

Slide 105 text

No. Not at all. Test your stuff

Slide 106

Slide 106 text

The only constant is change

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Credits http://www.flickr.com/photos/oakleyoriginals/ 7944244598/ http://www.flickr.com/photos/seandreilinger/ 2137302514/ http://www.iconarchive.com/show/scrap-icons- by-deleket/Magnifying-Glass-2-icon.html http://www.clarissapeterson.com/2012/11/ html5-accessibility

Slide 109

Slide 109 text

github.com/ klamping/ html5tx-a11y @klamping