Open KatieWoe opened 3 years ago
So according to https://webaim.org/articles/voiceover/ these keys should jump the virtual cursor to the top/end of the page.
VO + Home: Jump to top of page (on laptop keyboards, fn + ← is Home) VO + End: Jump to bottom of page (on laptop keyboards, fn + → is End)
It is just weird that it still does this while focus is on a slider. I am going to see if it happens on a random HTMl slider.
This is not happening in example sliders I am finding around the Web, so this might be something we need to fix.
I thought maybe an event.preventDefault might be causing this, but I removed the one in AccessibleValueHandler and it had no impact on this behavior.
I think I found it, it seems to be because of the article
tag we use in sims, which maybe puts VoiceOver in a different mode. For this HTML, pressing home and end on a Mac correctly changes the slider.
<h1>My heading</h1>
<p>My slider:</p>
<input type="range" min="1" max="10">
<button>My Button</button>
But for this markup, pressing Home/End on a Mac changes the slider value AND moves the virtual cursor to the start/end of the article.
<article>
<h1>My heading</h1>
<p>My slider:</p>
<input type="range" min="1" max="10">
<button>My Button</button>
</article>
@terracoda assigning to you to review the behavior from this markup. Is there anything you would like to do, or should we just document and move on?
I think @zepumph and I once had a similar issue with sliders inside a list. It was in GFL or GFLB. We are using article elements for the parent screen element, right?
Would we no longer have a parent container? or would we need to use a different element, like a div?
I can't seem to reproduce this, but I am not running the latest MacOS. What sim is causing the issue?
We are using article elements for the parent screen element, right?
Correct.
I can't seem to reproduce this, but I am not running the latest MacOS. What sim is causing the issue?
I was able to see this with macOS 11.2 in all sims that use a slider (OL, GFL, JT, others).
Would we no longer have a parent container? or would we need to use a different element, like a div?
Exactly, one way to fix this could be to replace the article
with a div
. But I am not sure how important that element is, would that be an acceptable fix? Otherwise, we could leave this as-is, maybe submit a bug report to Apple and see if this is intended. Or spend time searching for a different workaround if you think this issue is sever.
@jessegreenberg, I did a little reading on the article
element. We seem to be using it correctly. It is for self-contained pieces of a larger thing.
First, I do think it is worth submitting a bug report to Apple because we are using the element correctly and VO is not handling it properly with regards to sliders.
For article
the spec says:
“The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
Since our sims screen can be used individually, though I am not sure the Home screen fits that category, it seems to make sense to use an article
element. I am curious if <div role="article">
would be any different than <article>
. In theory, it shouldn't be any different. But with screen readers and browsers, you never know what exactly is what.
For section
the spec says:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. And it also advises: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The tutorial plain language definition for section
from the W3C says:
The HTML5
<section>
element marks a general region of a web page or an article. It is used for thematic grouping of content.
I think it is logical to think of a sim screen as a thematic grouping or a chapter-like thing. I still think the article
element is better, since our sims are less document-like and more widget-like. That said since the article
element it is causing usability issues, I think it would be acceptable to use a section
element if Apple won't fix the bug or Apple takes a long time to fix the bug.
According to the spec a div
element has no semantics and should be used as a last resort. Given that advice, I think it best not to put another div
in our PDOM. The sim screens are clear sections of a sim in my opinion.
Suggested action: Given all that, @jessegreenberg, can you first submit a bug and see if we get a response from Apple? The fix might be on the horizon, and then we do not need to make the change.
If a response doesn't come and/or you don't think a response is forthcoming, do you see any issue replacing the sim screen article
elements with sim-screen section
elements?
Articles I read on the subject:
Sounds good @terracoda. I submitted a bug report to apple about this. Unfortunately, they have responded to zero of the ten bug reports we have submitted so I think it is unlikely that we will get a response. That being said, I am OK leaving as wontfix
since this seems to be a problem on their end. But I also don't see an issues with changing to a section
element if that is best.
I am experiencing this issue with Big Sur, and I am also finding that using the function and arrow shortcut keys for Home and End can move focus. In GFLB, it only seems to happen with function right arrow, which moves the slider to max or End.
@jessegreenberg, I'll open a new issue just in case.
Yes based on what you described it sounds like this is still an issue with macOS VoiceOver. We submitted a bug report to Apple about this, but I haven't heard back yet. In https://github.com/phetsims/a11y-research/issues/164#issuecomment-786021683 we found a potential workaround where removing <section>
elements from the PDOM fixed it. But that will be a change that impacts all screen readers. Let me know if you would like to proceed with that, or if you would rather leave this as wontfix
.
Before this issue also involved focus changes?
I think we might want to consider removing section elements. But to fix all sims, ti would mean maintenance releases for all our sims with Interactive Description, right?
Just to be clear, what exactly is the fix? We can use article as the main container, but we remove section elements? It might be that we just need to remove the Play Area and Control section elements? The navbar Sim Resources doesn't have sliders.
Before this issue also involved focus changes?
Oh , I see - no you are correct, it was just the virtual cursor before but focus remained on the slider.
Sorry, I meant to say <article>
elements. The fix might be to replace <article>
s with <section>
or some other element. I don't see notes in this issue about testing <section>
to see if that actually fixes it. If it works out it would be fixed in master and in all sims moving forward. If we wanted to fix it in sims that have already published we would have to do a maintenance release for each of them.
Hmm, I think our current structure is actually correct and Apple has messed things up with the Article element.
That said, I think it is perfectly legal to nest section elements.
@jessegreenberg, could you test if changing the a11y-root <article>
element to a <section>
element to see if that helps.
And, did your previous test include changing the a11y-root <article>
element to a div
.
There might be one other thing to try, and that is to add the the explicit role="contentinfo"
to the <article>
. I don't know if that will help, but you never can tell with screen readers.
I think our current structure is actually correct and Apple has messed things up with the Article element.
Totally agree!
could you test if changing the a11y-root
element to a element to see if that helps.
Sure, Ill try this out.
And, did your previous test include changing the a11y-root
element to a div.
Yes, I believe that is the only thing we tested so far.
Would a fix for this issue impact this issue https://github.com/phetsims/a11y-research/issues/32
Every sim with interactive description that has a slider, suffers from this Apple-induced bug when VoiceOver is enabled. It is a bad experience.
We may need to reconsider using a work around and doing maintenance releases on sims with sliders:
Found during https://github.com/phetsims/QA/issues/614 on several sims on MacOS 11 on Safari with VO. Also seen on published. If you use home or end on a slider, it is meant to jump to the ends of the slider. On a Mac this involves the fn key. When you use this to jump to the ends of the slider the "reset all button" or the start of the sim will start being read before going back to what happened to the slider. From slack: