WordCamp Milano: Web Accessibility, where to start

Web Accessibilitywhere to start?

Rian Rietveld

WordPress Engineer @ Human Made

Web Accessibilitywhere to start?

Rian Rietveld

WordPress Engineer @ Human Made

• Project manager

• Project manager

• Information architect

• Project manager

• Information architect

• Designer

• Project manager

• Information architect

• Designer

• Frontend developer

• Project manager

• Information architect

• Designer

• Frontend developer

• Backend developer

• Project manager

• Information architect

• Designer

• Frontend developer

• Backend developer

• Content manager

Everyone is involved

In this talk• what not to do

In this talk• what not to do

• tips for everyone involved

In this talk• what not to do

• tips for everyone involved

• design and code example

In this talk• what not to do

• tips for everyone involved

• design and code example

• but most of all…

Change your point of view!

What not to do

Check the accessibility at the end,

just going before online

What not to do

Add a bunch accessibility plugins

and hope for the best

Not that important

Text enlarger

AAAAAAAAA

Not that important

Read speaker

Browsers get smarter

Users have their own AT

So..What should I do?

You are a high end user but your visitors not

You are a high end user but your visitors not

Don’t create a website for yourself

Start project• include accessibility from the beginning

Start project• include accessibility from the beginning

• train your people and yourself

Start project• include accessibility from the beginning

• train your people and yourself

• it is part of the project, like responsive design

( usability === accessibility )

Think twice about functionality

( good SEO === accessibility )

Designers

Colour contrast

Contrast matters

Contrast matters

Contrast matters

Contrast matters

Colour contrast

webaxe.org/color-contrast-tools/

text: 1 : 4.5 large text: 1: 3.1

Not by colour alone

I'm gonna make you an offer you can't refuse

I'm gonna make you an offer you can't refuse

I'm gonna make you an offer you can't refuse

Sim Daltonism

Gestalt design

Keep together

what belongs together

Coders

Tell a story with HTML5

Headings

• one unique <h1> per view

Headings

• one unique <h1> per view • the rest meaningful

Headings

• one unique <h1> per view • the rest meaningful • do not skip a level

Meaningful link text

<a href=“your-url" class="fa fa-twitter”></a>

<a href=“your-url" class="fa fa-twitter”>Twitter</a>

<a href=“your-url" class="fa fa-twitter”>

<span class=“screen-reader-text“>Twitter</span>

</a>

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden;}

Read more …

<a href=“link-to-post“> Read more

<span class=“screen-reader-text“>about cute kittens</span></a>

<a href=“your-url"> <img src=“your-image-url” alt=“follow me on Twitter /></a>

Use the right elements

"If it's supposed to act like a button, it should be a

button."

Joe Dolson

<div> or <span>is not for a menu toggle

use a<button>

Images

If an image is purely decorative:add it to the CSS as background image

If an image is purelydecorative,and part of the content:add an empty alt

<img src=“img-url” alt=“” />

If an image is givinginformation:use a short describing alt text

<img src=“img-url” alt=“cute kitten” />

Forms

for needs id

<label for=”yourid”>Name</label>

<input name=”name” type=”text” value=”” id=”yourid”>

no positive tab-index

Test software

aXe by Deque Labs

Chrome plugin

github.com/dequelabs/axe-core

WAVE

Chrome plugin

or onlinehttp://wave.webaim.org

tenon.io

Automatic reports of your production site

WordPress integration with the plugin Access Monitor

webaim.org

make.wordpress.org/accessibility/handbook

"Inclusive Design Patterns"

by Heydon Pickering

Make it work

before you make it nice

@rianrietveld