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.

1. Accessibility in the age of the
headless CMS
Rian Rietveld
WordCamp Europe 2017

3. Topics in this talk
1. The DOM
2. Dynamic content
3. Progressive enhancement

4. Sit back and relax
Text & links & more at:
rianrietveld.com/wceu17

5. 1: The DOM

6. Code is poetry

8. <rant>

9. Get out of your JavaScript bubble!

10. <li
style={lang === props.selectedLanguage ? {color: '#d0021b'} : null}
onClick={props.onSelect.bind(null, lang)}
key={lang}>
{lang}
</li>

11. render: function() {
return (
<div>
<div
style = {{
background: this.state.color,
width: 100,
height: 100
}}
onClick = {this.changeColor}
>
</div>
</div>
);
}

12. Demo tabs React
https://rrwd.github.io/wceu17/wceu-app/build/

13. For crying out load:
<div> and <span>
don’t get keyboard focus

14. Use:
<a> for change of location
<button> for action

15. Learn HTML5 Deeply
html5doctor.com

16. Code is poetry

17. Code is poetry
Take pride in your workmanship

18. </rant>

19. Validate the DOM
• W3C HTML validator
• W3C CSS validator
• aXe accessibility validator

20. Demo aXe
https://wordpress.org/
https://2017.europe.wordcamp.org/

21. 2. Dynamic changes

22. WAI-ARIA
Web Accessibility Initiative –
Accessible Rich Internet Applications

23. First rule of ARIA:

24. First rule of ARIA:
Don’t use ARIA!

25. It’s all about feedback
• what happens on the page
• what does this mean
• how can I interact

26. ARIA Attributes
<div aria-hidden=“true”>
<input id="name" type=“text"
aria-required="true" />

27. <div aria-live=“polite”>
<p>This is where the magic happens</p>
</div>

28. • aria-live=“polite” = updates announced if the user is idle
• aria-live=“assertive” = updates announced as soon as possible
aria-live has different behaviours:

29. Demo dynamic changes

31. Menu open or closed?

32. aria-expanded

33. Demo aria-expanded

35. 3. Progressive enhancement
what comes first?

37. Does it all happen in
<div id="app"></div>
?

38. HTML5 framework

39. CSS separate

40. What changes dynamically?

41. Serve initial content

42. users
over authors
over implementors
over specifiers
over theoretical purity
W3C - HTML Design Principles

44. Developers are so preoccupied with whether or not they could,
that they didn't stop to think if they should.

45. Code is poetry

46. Code is poetry
Write a poem with your HTML5

47. Learn HTML5 Deeply
html5doctor.com

48. Credits
• Cyclist: Henry Bloomsfield
• Tile: Paul van Buuren
• Fightclub: wallpapercraft.net