You want to learn how to build an accessible WordPress website or plugin and have no idea what is important or where to start? Let me give you some tips. Video on WordPress.tv: http://wordpress.tv/2016/12/12/rian-rietveld-web-accessibility-where-to-start/

1. Web Accessibility
where to start?
Rian Rietveld
WordPress Engineer @ Human Made

2. Web Accessibility
where to start?
Rian Rietveld
WordPress Engineer @ Human Made

3. • Project manager

4. • Project manager
• Information architect

5. • Project manager
• Information architect
• Designer

6. • Project manager
• Information architect
• Designer
• Frontend developer

7. • Project manager
• Information architect
• Designer
• Frontend developer
• Backend developer

8. • Project manager
• Information architect
• Designer
• Frontend developer
• Backend developer
• Content manager

9. Everyone is involved

10. In this talk
• what not to do

11. In this talk
• what not to do
• tips for everyone involved

12. In this talk
• what not to do
• tips for everyone involved
• design and code example

13. In this talk
• what not to do
• tips for everyone involved
• design and code example
• but most of all…

14. Change your
point of view!

15. What not to do
Check the accessibility at the end,
just going before online

16. What not to do
Add a bunch accessibility plugins
and hope for the best

17. Not that important
Text enlarger
AAAAAAAAA

21. Not that important
Read speaker

22. Browsers get smarter
Users have their own AT

23. So..
What should I do?

24. You are a high end user
but your visitors not

25. You are a high end user
but your visitors not
Don’t create a website
for yourself

26. Start project
• include accessibility from the beginning

27. Start project
• include accessibility from the beginning
• train your people and yourself

28. Start project
• include accessibility from the beginning
• train your people and yourself
• it is part of the project, like responsive design

29. ( usability === accessibility )

30. Think twice
about functionality

31. ( good SEO === accessibility )

32. Designers

33. Colour contrast
Contrast matters
Contrast matters
Contrast matters
Contrast matters

34. Colour contrast
webaxe.org/color-contrast-tools/
text: 1 : 4.5
large text: 1: 3.1

35. 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

36. Sim Daltonism

37. Gestalt design
Keep together
what belongs together

40. Coders

41. Tell a story with HTML5

42. Headings
• one unique <h1> per view

43. Headings
• one unique <h1> per view
• the rest meaningful

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

49. Meaningful link text

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

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

58. <a href=“your-url" class="fa fa-twitter”>
<span class=“screen-reader-text“>Twitter</span>
</a>

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

60. Read more …
<a href=“link-to-post“>
Read more
<span class=“screen-reader-text“>about cute kittens</span>
</a>

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

62. Use the right elements

63. "If it's
supposed to act
like a button,
it should be a
button."
Joe Dolson

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

65. use a
<button>

66. Images

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

68. If an image is purely
decorative,and part
of the content:
add an empty alt
<img src=“img-url” alt=“” />

69. If an image is giving
information:
use a short
describing alt text
<img src=“img-url” alt=“cute kitten” />

70. Forms

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

72. no positive tab-index

73. Test software

74. aXe by Deque Labs
Chrome plugin
github.com/dequelabs/axe-core

76. WAVE
Chrome plugin
or online
http://wave.webaim.org

78. tenon.io
Automatic reports of your production site
WordPress integration with the plugin
Access Monitor

80. webaim.org
make.wordpress.org/accessibility/handbook

81. "Inclusive Design Patterns"
by Heydon Pickering

82. Make it work
before you make it nice

83. @rianrietveld