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
   

   View Slide

2. The best learning experiences,
   for everyone, anywhere.
   

   View Slide

3. Accessibility 101:
   

   View Slide

4. Accessibility 101:
   • Keyboard navigable
   

   View Slide

5. Accessibility 101:
   • Keyboard navigable
   • Provide text alternatives
   

   View Slide

6. Accessibility 101:
   • Keyboard navigable
   • Provide text alternatives
   • Use more than just colour
   

   View Slide

7. Accessibility 101:
   • Keyboard navigable
   • Provide text alternatives
   • Use more than just colour
   • Clear and simple language
   

   View Slide

8. Accessibility 101:
   • Keyboard navigable
   • Provide text alternatives
   • Use more than just colour
   • Clear and simple language
   • Obvious information hierarchy
   

   View Slide

9. Accessibility 101:
   • Keyboard navigable
   • Provide text alternatives
   • Use more than just colour
   • Clear and simple language
   • Obvious information hierarchy
   

   View Slide

10. Giving user feedback
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. click/enter/press
    

    View Slide

15. 
    
    
    
    1
    
    
    
    
    
    2
    
    click/enter/press
    

    View Slide

16. “Like 1”
    

    View Slide

17. “Like 1” “ … ”
    click/enter/press
    

    View Slide

18. 
    
    
    1
    
    
    
    
    
    2
    
    click/enter/press
    

    View Slide

19. Giving user feedback
    

    View Slide

20. View Slide

21. JavaScript, ARIA and CSS
    

    View Slide

22. Focus
    https://www.flickr.com/photos/trishhamme/7335222774
    

    View Slide

23. $(‘#updatedElement’).focus()
    

    View Slide

24. What happens if you don’t?
    

    View Slide

25. View Slide

26. Don't lose focus()
    

    View Slide

27. ARIA roles
    Accessible Rich Internet Applications
    https://www.flickr.com/photos/trishhamme/7335222774
    

    View Slide

28. View Slide

29. aria-live
    

    View Slide

30. Because we want
    changed or inserted
    content to be read out
    

    View Slide

31. Be polite
    

    View Slide

32. “1 Like”
    click/enter/press
    

    View Slide

33. “1 Like” “2 Like”
    click/enter/press
    
    2
    
    
    
    
    

    View Slide

34. Hidden content
    https://www.flickr.com/photos/bevgoodwin/9541505476
    

    View Slide

35. Use CSS/ARIA to hide some
    text just for screenreaders
    

    View Slide

36. View Slide

37. click/enter/press
    
    
    1
    
    1
    
    
    
    
    
    
    2 Likes. You like this.
    
    2
    
    
    
    
    

    View Slide

38. click/enter/press
    “1 Like” “2 Likes. You like this.”
    

    View Slide

39. JavaScript, ARIA, CSS
    For everyone, anywhere.
    

    View Slide

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
    

    View Slide