How we made Futurelearn more accessible

F2de4c4ac96affef15366d36ffd0f0d4?s=47 nicky
February 12, 2015

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/

F2de4c4ac96affef15366d36ffd0f0d4?s=128

nicky

February 12, 2015
Tweet

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

  11. None
  12. None
  13. None
  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

  20. None
  21. JavaScript, ARIA and CSS

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

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

  24. What happens if you don’t?

  25. None
  26. Don't lose focus()

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

  28. None
  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