Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility in the age of the headless CMS

766 views

Published on

Video on WordPress.tv: http://wordpress.tv/2017/06/22/rian-rietveld-accessibility-in-the-age-of-the-headless-cms/
Blogpost with all the text and links: http://rianrietveld.com/2017/06/09/wceu17/
WordCamp Europe 2017 in Paris.

Published in: Internet
  • Be the first to comment

Accessibility in the age of the headless CMS

  1. 1. Accessibility in the age of the headless CMS Rian Rietveld WordCamp Europe 2017
  2. 2. Topics in this talk 1. The DOM 2. Dynamic content 3. Progressive enhancement
  3. 3. Sit back and relax Text & links & more at: rianrietveld.com/wceu17
  4. 4. 1: The DOM
  5. 5. Code is poetry
  6. 6. <rant>
  7. 7. Get out of your JavaScript bubble!
  8. 8. <li style={lang === props.selectedLanguage ? {color: '#d0021b'} : null} onClick={props.onSelect.bind(null, lang)} key={lang}> {lang} </li>
  9. 9. render: function() { return ( <div> <div style = {{ background: this.state.color, width: 100, height: 100 }} onClick = {this.changeColor} > </div> </div> ); }
  10. 10. Demo tabs React https://rrwd.github.io/wceu17/wceu-app/build/
  11. 11. For crying out load: <div> and <span> don’t get keyboard focus
  12. 12. Use: <a> for change of location <button> for action
  13. 13. Learn HTML5 Deeply html5doctor.com
  14. 14. Code is poetry
  15. 15. Code is poetry Take pride in your workmanship
  16. 16. </rant>
  17. 17. Validate the DOM • W3C HTML validator • W3C CSS validator • aXe accessibility validator
  18. 18. Demo aXe https://wordpress.org/ https://2017.europe.wordcamp.org/
  19. 19. 2. Dynamic changes
  20. 20. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications
  21. 21. First rule of ARIA:
  22. 22. First rule of ARIA: Don’t use ARIA!
  23. 23. It’s all about feedback • what happens on the page • what does this mean • how can I interact
  24. 24. ARIA Attributes <div aria-hidden=“true”> <input id="name" type=“text" aria-required="true" />
  25. 25. <div aria-live=“polite”> <p>This is where the magic happens</p> </div>
  26. 26. • aria-live=“polite” = updates announced if the user is idle • aria-live=“assertive” = updates announced as soon as possible aria-live has different behaviours:
  27. 27. Demo dynamic changes
  28. 28. Menu open or closed?
  29. 29. aria-expanded
  30. 30. Demo aria-expanded
  31. 31. 3. Progressive enhancement what comes first?
  32. 32. Does it all happen in <div id="app"></div> ?
  33. 33. HTML5 framework
  34. 34. CSS separate
  35. 35. What changes dynamically?
  36. 36. Serve initial content
  37. 37. users over authors over implementors over specifiers over theoretical purity W3C - HTML Design Principles
  38. 38. Developers are so preoccupied with whether or not they could, that they didn't stop to think if they should.
  39. 39. Code is poetry
  40. 40. Code is poetry Write a poem with your HTML5
  41. 41. Learn HTML5 Deeply html5doctor.com
  42. 42. Credits • Cyclist: Henry Bloomsfield • Tile: Paul van Buuren • Fightclub: wallpapercraft.net

×