VO reads out other aspects of sim when pressing home/end on a slider

[KatieWoe]

Found during phetsims/qa#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:

When using home or end on a slider to jump the extremes it will first read either "reset all button" or "heading level 1 ..." depending on which way you jumped. You can still move around in the slider though. Hard to get a recording though as I don't have enough hands
Jesse Greenberg 3:55 PM
Oh weird. I am totally seeing that too. It looks like Function + Arrow keys on any component moves the virtual cursor around as you described.

[jessegreenberg]

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.

[jessegreenberg]

This is not happening in example sliders I am finding around the Web, so this might be something we need to fix.

[jessegreenberg]

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.

[jessegreenberg]

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?

[terracoda]

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?

[terracoda]

I can't seem to reproduce this, but I am not running the latest MacOS. What sim is causing the issue?

[jessegreenberg]

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.

[terracoda]

@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:

• https://html.spec.whatwg.org/#the-article-element
• https://html.spec.whatwg.org/#the-section-element
• https://html.spec.whatwg.org/#the-div-element
• https://www.w3.org/WAI/tutorials/page-structure/content/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section#Example_A
• https://www.smashingmagazine.com/2020/01/html5-article-section/

[jessegreenberg]

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.

[terracoda]

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.

[terracoda]

@jessegreenberg, I'll open a new issue just in case.

[jessegreenberg]

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 #164 (comment) 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.

[terracoda]

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?

[terracoda]

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.

[jessegreenberg]

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.

[terracoda]

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.

[jessegreenberg]

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.

[terracoda]

Would a fix for this issue impact this issue
#32

[jessegreenberg]

#32 does not seem related to this issue. But it is also possible that improvements to the way we can set accessibleOrder have made #32 more possible. I made comments in that issue.

[terracoda]

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:

• John Travoltage
• Gravity Force Lab
• Gravity Force Lab: Basics
• Molarity
• Ohm's Law
• Ratio and Proportion
• Resistance in a Wire