A11Y in React Router core

[NickColley]

At the moment React Router does a great job of emulating browser behaviour to give the user a great experience e.g. keeping scroll position, history etc.

However one pitfall is accessibility, right now when changing views a screenreader user will not get the same indications they would when performing a full page reload.

Do you think accessibility should be considered something that is in core?

However to do this seamlessly is not so simple:

• Include title updates as part of routing
• Include an 'announcer' (for example https://github.com/patrickfox/a11y_kit#announce---say-anything)
• Announce a page update when the router is updated 'title page has loaded'

You could argue that this should be done in userland, however if it were not an a11y issue I imagine this would be considered very broken - if scrolling were not persisted for example.

It'd be great if this were in core because it'd mean react-router projects would be more accessible out of the box and show the react communities commitment to accessibility.

(I'm not an expert in accessibility so feel free to correct anything I've misunderstood 😄)

[NickColley]

More I think about this the more I think this should be userland since there doesnt seem to be a good standard for implementing this, maybe we could include a11y docs but not include it in core?

[taion]

Yeah – judging by the things you have there, I think this has to be in userland; there doesn't seem to be a good generic solution that we can just pull into core.

[alansouzati]

How about resetting the focus on the route changes?

I have the feeling that every time that the route changes, the focus should be reset (emulating a page refresh).

Do you guys have any recommendation on this?

[iamrandys]

+1 I'm looking into a11y issues with the focus not being reset on route changes.

[LpmRaven]

Any update on resetting the focus on the route changes? @iamrandys @alansouzati

[afeld]

Discussion seems to have moved to #5210.