Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible client side routing - Nick Colley

57 views

Published on

FrontEnders - 15 March 2018

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Accessible client side routing - Nick Colley

  1. 1. Nick Colley Frontend Developer Government Digital Service @nickcolley
  2. 2. Accessible Client-side Routing
  3. 3. In the UK, 1 in 5 people have a disability
  4. 4. accessibility doesn’t just apply to people with disabilities
  5. 5. Assistive technologies
  6. 6. Assistive technologies rely on cues from the browser
  7. 7. Server vs Client rendering
  8. 8. Server-first frameworks
  9. 9. Pages are rendered on the server
  10. 10. Client-first frameworks
  11. 11. Pages are rendered in the browser with JavaScript
  12. 12. Show the thing
  13. 13. Server-first
  14. 14. Client-first (react-router)
  15. 15. What can we do to fix this?
  16. 16. ● Announcer patterns ● Managing focus
  17. 17. ● Announcer patterns ● Managing focus
  18. 18. Nick Colley @nickcolley Thanks!
  19. 19. Links Example of announcers patterns ● https://github.com/thinkcompany/react-a11y-announcer ● https://github.com/ember-a11y/a11y-announcer Excellent example of ‘doing it right’ by the Ember community https://github.com/ember-a11y/ember-a11y What assistive technologies should I test in? ● https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies#what-to-test ● https://webaim.org/projects/screenreadersurvey7/#used Examples used in videos (super scrappy code, not production quality) ● https://glitch.com/edit/#!/barebones-govuk ● https://glitch.com/edit/#!/barebones-govuk-client-routing ● https://glitch.com/edit/#!/barebones-govuk-client-routing-accessible More detail on this subject https://medium.com/@robdel12/single-page-apps-routers-are-broken-255daa310cf

×