Mobile VO starts in the middle of the sim
Closed this issue · 8 comments
Device
iPad
OS
iPadOS 13
Browser
Safari
Problem Description
For phetsims/qa#503
When you have Mobile VO active and follow a link to the sim, the focus for the sim starts in the middle, on the button to turn on the light. Swiping left/right shows that this is where the focus seems to start by default. I would expect it to start at the top of the scene description instead. If this is intended or preferred, please close.
Visual
https://drive.google.com/file/d/10CRJZNzzA610p-4ig_M9iOITKAJXNZCh/view?usp=sharing
Browsers, typically place focus on the first focusable element. I am not sure this is a bug.
I did some reading and I only found one example of where a developer was intentionally setting focus on an H1 to improve the screen reader UX. General documentation about focus was silent on where focus should start on page load.
At Tuesday's design meeting you and I also thought it is essential for the screen reader UX to start at the top of the page.
With that in mind and since this does not happen by default, is it possible for us to intentionally set focus to the H1 in the PDOM on page load?
Links to the resources I read are in the design doc here at Notes & Research on Issues.
If this is intended or preferred, please close.
This is not intended, but also not sure if it is an issue. What is shown in the video is the screen reader cursor, not DOM focus. We have seen that NVDA sometimes "remembers" where the cursor was the last time the user was on the page and puts it back there next load. Maybe that is what is happening here, but I couldn't get it to happen with consistency. I went from phetsims/qa#503 to the linked sim about 10 times on iOS VoiceOver and didn't only saw this happen about 1/10 times. All other times the cursor started at the H1 of the page. I would feel OK closing this issue without fixing.
Reassigning to @terracoda if you feel more time should be spent for #350 (comment).
Just as a data point, the "remembering" where cursor is definitely happens on MacOS VoiceOver. If you move the virtual cursor somewhere then reload the page, the cursor will still be there after sim is reloaded.
@jessegreenberg, did you review the react example? I know it's not exactly the same situation as for us, but on page load, the focus is set intentionally to the H1. This achieves 2 things:
- ensures the stale VO cursor does not appear on the new page
- ensures reading starts from the top
Both seem worthwhile to me, at least for VoiceOver users.
Are there specific reasons not to set the focus on the H1 on page load from your perspective?
From the video:
You'll see some red squigglies here and note that I now have an ESLint finding, because it has this rule that only interactive elements -- elements that you can take actions on -- should be focusable.
I disagree with this, and I believe that the user experience of setting the focus at the page title when routing from one page to the next is a better user experience than setting the focus on whatever the first focusable element may be.
My personal preference would be to agree with ESlint and google (from notes in your doc)
There's generally no need to focus something if the user can't interact with it.
My opinion is that this breaks convention and is not necessary. But if we feel this is best, considerations for implementation:
- Scenery currently assumes focus only lands on visible objects in the sim. The H1 is purely in the PDOM, so we will need to change things there to gracefully support this.
- The h1 needs to have a tabindex to be focusable. Part of the work would presumably be to remove the h1 from focus order at some point.
We discussed at meeting. @jessegreenberg to add notes and create a11y-research issue.
We won't fix this for MAL publication, but will consider as a general design issue post MAL publication.