search

TaitoUnited / full-stack-template

Template for cloud-native applications and microservices running as containers/functions on Kubernetes, Docker Compose, or cloud. You can choose the stack during project creation.
https://taitounited.github.io/taito-cli/templates
MIT License
36 stars 8 forks source link

Routing accessibility #150

Open Jonesus opened 1 year ago

Jonesus commented 1 year ago

Background

AFAIK, the current client app doesn't manage focus nor do page change announcements when navigating between pages, both of which would be quite essential for keyboard and low/no-vision accessibility. We should thus have some way to:

  1. Move the current focus to page root whenever navigation happens
  2. Announce to screen readers that the user has navigated to a new page
  3. Make using these as easy as possible (or omitting them as hard as possible :wink: )

Discussion on including these features in react-router https://github.com/remix-run/react-router/discussions/9555

User research report on accessible SPA routing: https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/

Suggestion

  1. Wrap the whole application in a <div tabIndex={-1} id="focus-root" />
  2. Add a sibling element to #focus-root: <div aria-live="polite" id="navigation-announcement" />
  3. Add logic to useDocumentTitle(newTitle)
    • When this hook is called, move focus to #focus-root
    • Replace the text content of #navigation-announcement with the newTitle (perhaps with some prefix like "Navigated to ...", this should be tested to figure out what's reasonable)
  4. Include a skip link element as the first element in tab order after #focus-root
    • This should move focus to main content (main landmark) after any navigation
    • A reasonable default would most likely be the Content element of PageLayout.tsx
  5. Test to ensure that these things actually work as they do in my mind :smile:

With this implementation we would get accessible routing behavior with the only requirement for the developer being that they remember to useDocumentTitle, which should be quite easy and natural

Temzasse commented 1 year ago

Great idea! 💯👌

I wonder if the implementation should be instead baked into the route entry utils since using the document title hook doesn't always tie into a page navigation 🤔 I can give a tour of the current route entry pattern and we can think how to best incorporate the a11y stuff to it. If you wanna dive head first into it you can take a look at the /routes/route-utils file 😄