How we made Futurelearn more accessible

The slides from my talk at Ember London on Feb 12th 2015.

EmberLondon video: https://vimeo.com/119842870

Blog post with more links: http://www.knotnicky.com/emberlondontalk-2015/

Transcript

1. How we made FutureLearn more accessible BY NICKY THOMPSON AT EMBER LONDON IN FEBRUARY 2015 CC BY-SA 4.0
2. The best learning experiences, for everyone, anywhere.
3. Accessibility 101:
4. Accessibility 101: • Keyboard navigable
5. Accessibility 101: • Keyboard navigable • Provide text alternatives
6. Accessibility 101: • Keyboard navigable • Provide text alternatives • Use more than just colour
7. Accessibility 101: • Keyboard navigable • Provide text alternatives • Use more than just colour • Clear and simple language
8. Accessibility 101: • Keyboard navigable • Provide text alternatives • Use more than just colour • Clear and simple language • Obvious information hierarchy
9. Accessibility 101: • Keyboard navigable • Provide text alternatives • Use more than just colour • Clear and simple language • Obvious information hierarchy
10. Giving user feedback
14. click/enter/press
15. <div> <form> <input type="submit" value=“Like”> </form> <p>1</p> </div> <div> <form> <input type="submit" value=“Like”> </form> <p>2</p> </div> click/enter/press
16. “Like 1”
17. “Like 1” “ … ” click/enter/press
18. <div> <form> <input type="submit" value=“Like”> </form <p>1</p> </div> <div> <form> <input type="submit" value=“Like”> </form> <p>2</p> </div> click/enter/press
19. Giving user feedback
21. JavaScript, ARIA and CSS
22. Focus https://www.flickr.com/photos/trishhamme/7335222774
23. $(‘#updatedElement’).focus()
24. What happens if you don’t?
26. Don't lose focus()
27. ARIA roles Accessible Rich Internet Applications https://www.flickr.com/photos/trishhamme/7335222774
29. aria-live
30. Because we want changed or inserted content to be read out
31. Be polite
32. “1 Like” click/enter/press
33. “1 Like” “2 Like” click/enter/press <div aria-live=“polite”> <p>2</p> <form> <input type="submit" value=“Like”> </form> </div>
34. Hidden content https://www.flickr.com/photos/bevgoodwin/9541505476
35. Use CSS/ARIA to hide some text just for screenreaders
36. <div aria-live=“polite”> <p class=“is-visually-hidden”> 1 </p> <p aria-hidden=“true”>1</p> <form> <input type="submit" value=“Like”> </form> </div>
37. click/enter/press <div aria-live=“polite”> <p class=“is-visually-hidden”> 1 </p> <p aria-hidden=“true”>1</p> <form> <input type="submit" value=“Like”> </form> </div> <div aria-live=“polite”> <p class=“is-visually-hidden”> 2 Likes. You like this. </p> <p aria-hidden=“true”>2</p> <form> <input type="submit" value=“Like”> </form> </div>
38. click/enter/press “1 Like” “2 Likes. You like this.”
39. JavaScript, ARIA, CSS For everyone, anywhere.
40. Questions? @knotnicky futurelearn.com/blog More: • https://gdstechnology.blog.gov.uk/2014/08/14/improving-accessibility-on-gov-uk-search/ • https://speakerdeck.com/edds/accessibility-and-how-to-get-the-most-from-your- screenreader-front-end-north • https://about.futurelearn.com/blog/accessible-like-button/ • https://the-pastry-box-project.net/anne-gibson/2014-july-31 • No Coffee vision simulator Chrome extension • Sim Daltonism vision simulator app