accessibility-ready

Take your theme to the next level

Rian Rietveld rianrietveld

WordCamp Europe 2015

Who is over 50

Can you read this

Awesome stylish footer text

Very classy colours on my Retina iMac 27 inch

Contrast matters

Who is colour blind

Spot the links

bull You can buy our gadgets online

bull Contact our customer service

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Who is over 50

Can you read this

Awesome stylish footer text

Very classy colours on my Retina iMac 27 inch

Contrast matters

Who is colour blind

Spot the links

bull You can buy our gadgets online

bull Contact our customer service

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Can you read this

Awesome stylish footer text

Very classy colours on my Retina iMac 27 inch

Contrast matters

Who is colour blind

Spot the links

bull You can buy our gadgets online

bull Contact our customer service

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Contrast matters

Who is colour blind

Spot the links

bull You can buy our gadgets online

bull Contact our customer service

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Who is colour blind

Spot the links

bull You can buy our gadgets online

bull Contact our customer service

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Spot the links

bull You can buy our gadgets online

bull Contact our customer service

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

DONrsquoTMAKEME

GUESS

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Who has trouble hearing

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Video

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Subtitles

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Provide an alternative

bull subtitles

bull alt text

bull description

bull link to extra info

Amanda Rush cswordpress

Amanda Rush cswordpress

Read more hellip

lta href=urlgt Read more ltagt

lta href=urlgtRead more

ltspan class=screen-reader-textgt about cute kittens ltspangt

ltagt

CSS in stylecss

screen-reader-text clip rect(1px 1px 1px 1px) position absoluteimportant height 1px width 1px overflow hidden

Let the headings tell a story

One H1 too rule them all

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

lta href=urlgt Read more ltagt

lta href=urlgtRead more

ltspan class=screen-reader-textgt about cute kittens ltspangt

ltagt

CSS in stylecss

screen-reader-text clip rect(1px 1px 1px 1px) position absoluteimportant height 1px width 1px overflow hidden

Let the headings tell a story

One H1 too rule them all

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

lta href=urlgtRead more

ltspan class=screen-reader-textgt about cute kittens ltspangt

ltagt

CSS in stylecss

screen-reader-text clip rect(1px 1px 1px 1px) position absoluteimportant height 1px width 1px overflow hidden

Let the headings tell a story

One H1 too rule them all

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

CSS in stylecss

screen-reader-text clip rect(1px 1px 1px 1px) position absoluteimportant height 1px width 1px overflow hidden

Let the headings tell a story

One H1 too rule them all

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Let the headings tell a story

One H1 too rule them all

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

One H1 too rule them all

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Divide your content and structure with meaningful headings like a book

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

bull Title attribute on links

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

bull Title attribute on links bull Positive tabindex

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

bull Title attribute on links bull Positive tabindex bull Accesskey

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

bull Title attribute on links bull Positive tabindex bull Accesskey

Must die()

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Life without a mouse

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Can I use everything with keyboard only

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

use focus with hover

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Forms

input lt3 label

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

for needs id

ltlabel for=rdquoyouridrdquogtNameltlabelgt

ltinput name=rdquonamerdquo type=rdquotextrdquo value=rdquordquo id=rdquoyouridrdquogt

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Placeholders are not labels

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

Lean back and ask yourself 4 questions hellip

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

1Is all content

available

for everyone

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

2Can a visitor

use

all functionality

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

3Can a visitor

understand

all content

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

DONrsquoTMAKEME

GUESS

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

4Does my site

work

on every device

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

bull makewordpressorgaccessibility

bull Requirements for the accessibility-ready tag

bull Theme Developer Handbook Accessibility explained

bull Code patterns on GitHub

bull Rians blog

How do I do that

How do I test that

bullvalidatorw3org

bullput aside the mouse

bullturn of the stylesheet

bullmakewordpressorgaccessibilityuseful-tools

bulltenonio

bullWAVE Evaluation Tool

be awesome

be inclusive

Creditsbull Photo old man Marco Nedermeijer httpswwwflickrcomphotosmnedermeijer

bull Reading child Susana Fernandez httpswwwflickrcomphotossusivinh

bull Double rainbow Gordon Robertson httpswwwflickrcomphotosgordon_robertson

bull Mouse Duncan Hull httpswwwflickrcomphotosdullhunk

bull Twist Thomas Leth-Olsen httpswwwflickrcomphotosthomasletholsen

bull Deaf Washed Out httpswwwflickrcomphotosblikeng

bull Embraced by Words Robbert van der Steeg httpswwwflickrcomphotosrobbie73

bull School Book Al Ibrahim httpswwwflickrcomphotoscrazysphinx

bull Form OpenClips-30363 httppixabaycom

bull Quote ldquobe awesome be inclusiverdquo by Meri Williams (geek_manager)

Creditsbull Photo old man Marco Nedermeijer httpswwwflickrcomphotosmnedermeijer

bull Reading child Susana Fernandez httpswwwflickrcomphotossusivinh

bull Double rainbow Gordon Robertson httpswwwflickrcomphotosgordon_robertson

bull Mouse Duncan Hull httpswwwflickrcomphotosdullhunk

bull Twist Thomas Leth-Olsen httpswwwflickrcomphotosthomasletholsen

bull Deaf Washed Out httpswwwflickrcomphotosblikeng

bull Embraced by Words Robbert van der Steeg httpswwwflickrcomphotosrobbie73

bull School Book Al Ibrahim httpswwwflickrcomphotoscrazysphinx

bull Form OpenClips-30363 httppixabaycom

bull Quote ldquobe awesome be inclusiverdquo by Meri Williams (geek_manager)