The document discusses making websites accessible to all users, including those with disabilities. It provides tips for making content readable by people who are visually impaired, deaf, or have mobility issues. Key recommendations include adding alt text, captions, keyboard navigation, clear labeling of form fields, and testing sites using accessibility validation tools. The goal is to ensure all people can understand and interact with content regardless of their abilities or devices.

2. accessibility-ready
Take your theme to the next level
Rian Rietveld @rianrietveld
WordCamp Europe 2015

3. Who is over 50?

4. Can you read this?
Awesome stylish footer text
Very classy colours on my Retina iMac 27 inch

5. Contrast matters

6. Who is colour blind?

7. Spot the links
• You can buy our gadgets online
• Contact our customer service

8. DON’T
MAKE
ME
GUESS

9. Who has trouble hearing?

10. Video

11. Subtitles

12. Provide an alternative
• subtitles
• alt text
• description
• link to extra info

13. Amanda Rush @cswordpress

15. Read more …

17. <a href="url">
Read more
</a>

18. <a href="url">Read more
<span class="screen-reader-text">
about cute kittens
</span>
</a>

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

20. Let the headings
tell a story

21. One H1
too rule them all

22. Divide your content and structure with
meaningful headings, like a book.

23. • Title attribute on links

24. • Title attribute on links
• Positive tabindex

25. • Title attribute on links
• Positive tabindex
• Accesskey

26. • Title attribute on links
• Positive tabindex
• Accesskey
Must die();

27. Life without a
mouse

28. Can I use everything
with keyboard only?

29. use .focus
with .hover

30. Forms
input <3 label

31. for needs id
<label for=”yourid”>Name</label>
<input name=”name” type=”text” value=”” id=”yourid”>

32. Placeholders are not labels

33. Lean back and ask
yourself 4 questions …

34. 1:Is all content
available
for everyone?

35. 2:Can a visitor
use
all functionality?

36. 3:Can a visitor
understand
all content?

37. DON’T
MAKE
ME
GUESS

38. 4:Does my site
work
on every device?

39. • make.wordpress.org/accessibility
• Requirements for the accessibility-ready tag
• Theme Developer Handbook: Accessibility explained
• Code patterns on GitHub
• Rian's blog
How do I do that?

40. How do I test that?
• validator.w3.org
• put aside the mouse
• turn of the stylesheet
• make.wordpress.org/
accessibility/useful-tools/
• tenon.io
• WAVE Evaluation Tool

41. be awesome
be inclusive

43. Credits
• Photo old man: Marco Nedermeijer https://www.flickr.com/photos/
mnedermeijer/
• Reading child: Susana Fernandez https://www.flickr.com/photos/
susivinh/
• Double rainbow: Gordon Robertson https://www.flickr.com/photos/
gordon_robertson/
• Mouse: Duncan Hull https://www.flickr.com/photos/dullhunk/
• Twist: Thomas Leth-Olsen https://www.flickr.com/photos/
thomasletholsen/
• Deaf: Washed Out https://www.flickr.com/photos/blikeng/
• Embraced by Words: Robbert van der Steeg https://www.flickr.com/
photos/robbie73/
• School Book: Al Ibrahim https://www.flickr.com/photos/crazysphinx/
• Form: OpenClips-30363 http://pixabay.com
• Quote “be awesome, be inclusive” by Meri Williams (@geek_manager)