Accessibility 101, or
“Oh gosh, I’ve been doing this wrong.”
@cordeliadillon
“Web accessibility means people with disabilities can perceive, understand, navigate, and interact with the Web.”
@cordeliadillon
Provide a good user experience for everyone.
@cordeliadillon
How can I tell if I’m
doing this right?
@cordeliadillon
Tools for quick testing:
@cordeliadillon
Let me know where I am.
@cordeliadillon
:focus {
outline: none;
}
Label your inputs.
<label>
Username
<input type=“text”/>
</label>
<label for=“un”>Username</label>
<input type= “text” id= “un”/>
@cordeliadillon
Use colors wisely.
@cordeliadillon
Convey meaning through more than just color.
@cordeliadillon
Convey meaning through more than just color.
@cordeliadillon
Confusing
Convey meaning through more than just color.
@cordeliadillon
Confusing
Clear
Color contrast matters.
Would you agree with that?
Can you see this?
What about this?
And this?
Are you squinting yet?
@cordeliadillon
Color resources:
@cordeliadillon
Show AND tell.
@cordeliadillon
Give every <img> on
your site an alt attribute.
Yes, every single one!
(Psst… it can be alt=“” if the image is decorative.)
@cordeliadillon
Good:
<img alt=“” src=“decorativeSectionDivider.png”/>
<img alt=“{{a description of the image that’s relevant to its context}}” src=“myImage.png”/>
Bad:
<img src=“imageThatMayOrMayNotBeImportant.png”/>
<img alt=“photo” src=“importantImage.png”/>
@cordeliadillon
Give anchors
some love.
@cordeliadillon
Links should have
text in them.
@cordeliadillon
Link text should make sense out of context.
@cordeliadillon
<a> and <button> always trump clickable <div>, <span>, <i>, etc.
@cordeliadillon
Don’t just hover.
Focus.
@cordeliadillon
Additional Resources:
@cordeliadillon
Who’s brave enough to have their site tested with VoiceOver?
@cordeliadillon