Embed Size (px)
Citation preview
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
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
