Accessible client side routing - Nick Colley
1 like550 views
The document discusses making client-side routing accessible in single-page applications. It notes that 1 in 5 people in the UK have a disability and accessibility is important for all users. Assistive technologies like screen readers rely on cues from the browser. Client-first frameworks render pages with JavaScript in the browser rather than on the server. To improve accessibility, techniques like announcer patterns and managing focus can be used. Links to examples and additional resources on the topic are provided.
Accessible client side routing - Nick Colley
- 1. Nick Colley Frontend Developer Government Digital Service @nickcolley
- 3. In the UK, 1 in 5 people have a disability
- 4. accessibility doesn’t just apply to people with disabilities
- 6. Assistive technologies rely on cues from the browser
- 10. Pages are rendered on the server
- 13. Pages are rendered in the browser with JavaScript
- 14. Show the thing
- 15. Server-first
- 19. What can we do to fix this?
- 20. ● Announcer patterns ● Managing focus
- 21. ● Announcer patterns ● Managing focus
- 25. 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