Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial Focus Position #97

Open
mgifford opened this issue Feb 14, 2022 · 1 comment
Open

Initial Focus Position #97

mgifford opened this issue Feb 14, 2022 · 1 comment

Comments

@mgifford
Copy link
Contributor

I initially posted this here w3c/wcag-em-report-tool#534 then remembered that -- it has been depreciated.

When evaluating the OpenACR editor I noticed that the focus didn't start at the top of the page, but rather with the main content. I'd looked at this historically with Drupal's search. What is the best experience for screen reader users when navigating a new page. In that we'd decided to start at the top of the page, rather than with the search box. Partly this was for consistency, but we understood this was the preferred pattern for screen reader users. So I opened a issue there:
GSA/openacr#332

But of course, this is also an issue in the WCAG-EM Tool, as we based it off of yours. So is this a bug in svelte? Is this an intentional design decision for the WCAG-EM tool? Is this a bug in Svelte which should be changed there?

Screen Shot of focus on page load

@hidde
Copy link
Member

hidde commented Mar 10, 2022

Hey @mgifford! This is intentional. There are various ways to manage focus when switching “pages” in an SPA, moving focus to start of document (eg “reset”) is closest to how the web normally works when you have multiple pages. Some people like this. However, moving focus to something more useful is what we've gone for here, since we're fairly certain that we'd have “something useful”, as all pages have a h1 that nicely describe the page. We have light tested this within the team, and it is an approach others use too.

The [svelte-navigator](https://github.com/mefechoel/svelte-navigator) library is what we use for ”routing” (eg changing pages), and it has this focus behaviour built in.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants