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.

1. Nick Colley
Frontend Developer
Government Digital Service
@nickcolley

2. Accessible
Client-side Routing

3. In the UK, 1 in 5
people have a
disability

4. accessibility
doesn’t just
apply to people
with disabilities

5. Assistive
technologies

6. Assistive
technologies rely on
cues from the
browser

7. Server vs Client
rendering

8. Server-first
frameworks

10. Pages are rendered
on the server

11. Client-first
frameworks

13. Pages are rendered in
the browser with
JavaScript

14. Show the thing

15. Server-first

17. Client-first
(react-router)

19. What can we do to fix
this?

20. ● Announcer patterns
● Managing focus

21. ● Announcer patterns
● Managing focus

24. Nick Colley
@nickcolley
Thanks!

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