Web Accessibility, where to start

3,588 views

Published on


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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,588
On SlideShare
0
From Embeds
0
Number of Embeds
2,947
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Accessibility, where to start

  1. 1. Web Accessibility where to start? Rian Rietveld WordPress Engineer @ Human Made
  2. 2. Web Accessibility where to start? Rian Rietveld WordPress Engineer @ Human Made
  3. 3. • Project manager
  4. 4. • Project manager • Information architect
  5. 5. • Project manager • Information architect • Designer
  6. 6. • Project manager • Information architect • Designer • Frontend developer
  7. 7. • Project manager • Information architect • Designer • Frontend developer • Backend developer
  8. 8. • Project manager • Information architect • Designer • Frontend developer • Backend developer • Content manager
  9. 9. Everyone is involved
  10. 10. In this talk • what not to do
  11. 11. In this talk • what not to do • tips for everyone involved
  12. 12. In this talk • what not to do • tips for everyone involved • design and code example
  13. 13. In this talk • what not to do • tips for everyone involved • design and code example • but most of all…
  14. 14. Change your point of view!
  15. 15. What not to do Check the accessibility at the end, just going before online
  16. 16. What not to do Add a bunch accessibility plugins and hope for the best
  17. 17. Not that important Text enlarger AAAAAAAAA
  18. 18. Not that important Read speaker
  19. 19. Browsers get smarter Users have their own AT
  20. 20. So..
 What should I do?
  21. 21. You are a high end user but your visitors not
  22. 22. You are a high end user but your visitors not Don’t create a website for yourself
  23. 23. Start project • include accessibility from the beginning
  24. 24. Start project • include accessibility from the beginning • train your people and yourself
  25. 25. Start project • include accessibility from the beginning • train your people and yourself • it is part of the project, like responsive design
  26. 26. ( usability === accessibility )
  27. 27. Think twice about functionality
  28. 28. ( good SEO === accessibility )
  29. 29. Designers
  30. 30. Colour contrast Contrast matters Contrast matters Contrast matters Contrast matters
  31. 31. Colour contrast webaxe.org/color-contrast-tools/ text: 1 : 4.5 large text: 1: 3.1
  32. 32. 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
  33. 33. Sim Daltonism
  34. 34. Gestalt design Keep together what belongs together
  35. 35. Coders
  36. 36. Tell a story with HTML5
  37. 37. Headings • one unique <h1> per view
  38. 38. Headings • one unique <h1> per view • the rest meaningful
  39. 39. Headings • one unique <h1> per view • the rest meaningful • do not skip a level
  40. 40. Meaningful link text
  41. 41. <a href=“your-url" class="fa fa-twitter”> </a>
  42. 42. <a href=“your-url" class="fa fa-twitter”> Twitter </a>
  43. 43. <a href=“your-url" class="fa fa-twitter”> <span class=“screen-reader-text“>Twitter</span> </a>
  44. 44. .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
  45. 45. Read more … <a href=“link-to-post“> Read more <span class=“screen-reader-text“>about cute kittens</span> </a>
  46. 46. <a href=“your-url"> <img src=“your-image-url” alt=“follow me on Twitter /> </a>
  47. 47. Use the right elements
  48. 48. "If it's supposed to act like a button, it should be a button." Joe Dolson
  49. 49. <div> or <span> is not for a menu toggle
  50. 50. use a <button>
  51. 51. Images
  52. 52. If an image is purely decorative: add it to the CSS as background image
  53. 53. If an image is purely decorative,and part of the content: add an empty alt <img src=“img-url” alt=“” />
  54. 54. If an image is giving information: use a short describing alt text <img src=“img-url” alt=“cute kitten” />
  55. 55. Forms
  56. 56. for needs id <label for=”yourid”>Name</label> <input name=”name” type=”text” value=”” id=”yourid”>
  57. 57. no positive tab-index
  58. 58. Test software
  59. 59. aXe by Deque Labs Chrome plugin github.com/dequelabs/axe-core
  60. 60. WAVE Chrome plugin or online
 http://wave.webaim.org
  61. 61. tenon.io Automatic reports of your production site WordPress integration with the plugin Access Monitor
  62. 62. webaim.org make.wordpress.org/accessibility/handbook
  63. 63. "Inclusive Design Patterns" by Heydon Pickering
  64. 64. Make it work before you make it nice
  65. 65. @rianrietveld

×