Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. Accessibility 101: • Keyboard navigable • Provide text alternatives •

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

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

    Use more than just colour • Clear and simple language • Obvious information hierarchy
  5. <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
  6. <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
  7. 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>
  8. 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