(This post was originally published at Up Your A11y: Handling Focus on Route Change in React)
Any client-side route rendering can result in confus...
For further actions, you may consider blocking this person and/or reporting abuse
Could focusing the
<title />element be an alternative if you don't have anyh1elements on the page?Every page in your app should have an H1 - it's a really important landmark for users, especially those using screen readers.
If your design means that you really need the H1 to not look like an H1, then of course it could be styled with CSS to make it appear similar to other page text. Another option would be to display it off screen altogether using CSS, but I'd question carefully whether you need to do that. Having a clear H1 element at the top of your page helps all users, not just those using assistive technology 🙂
This is a great read. Thanks so much! I did not know one could leverage outline: none for accessible use-cases, but it makes sense here.
So glad you found the post useful!
I'd very very rarely suggest removing the focus outline, but in this one particular case it can help restore context with minimum confusion 🙂
Makes sense!