Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How we made Futurelearn more accessible

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/

nicky

February 12, 2015
Tweet

More Decks by nicky

Other Decks in Technology

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