Article element, sliders and VoiceOver

Hi WAI interest group,

Does it say somewhere in the HTML specification that interactive elements like sliders cannot be placed within an HTML article element? My understanding of article is from the specification:

“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.”

The independent item in my situation is a simulation screen. A simulation for us is an interactive science or math simulation used for learning. A simulation can have anywhere from a single screen to 5 screens.

When I have VoiceOver enabled and I use the MacOS shortcuts for the Home and End keys on a slider, my focus moves in unexpected and strange ways. 

When on a slider and I press the shortcut for the Home key, my focus moves from the slider to the H1 element (the first element within the article element), and when I press the shortcut for the End key, my focus moves to the Reset All button (the last element within the article element). Focus can also move to the previous or next interactive element on the sim screen instead of just jumping to the start or end of the actual slider.

The issue creates a really bad user experience for VoiceOver users, and it only happens with VoiceOver in the more recent releases of MacOS. We submitted a bug report to Apple in July 2021, but we have not heard back. We have submitted many bugs to Apple, and have never heard back.

To make our simulations accessible to learners who use screen reader software, we have created an experience that allows learners to have constant access to what we call State Descriptions when using a screen reader and then while interacting with interactive objects screen reader users receive Responsive Descriptions. We have created what we call a Parallel DOM or PDOM to house all the State and many of the Responsive Descriptions within the PDOM. We thought it made sense to use the HTML article element to be the root of this PDOM because it is an "independent item of content", specifically a sim screen. The content is highly dynamic, but nothing in the specification says the content cannot be dynamic.

We could change the root element to a section element or a div element, but that seems like a temporary workaround.

Any thoughts from anyone on this list how long one should wait for Apple to fix this VoiceOver issue?

If you would like to experience the issue with VoiceOver you can try anyone of our simulations that have sliders and Interactive Description. I suggest trying Gravity Force Lab: Basics <https://phet.colorado.edu/sims/html/gravity-force-lab-basics/latest/gravity-force-lab-basics_en.html>, because it has 4 sliders. 

Here’s a link to our filter page that has all our simulations with Interactive Description:
https://phet.colorado.edu/en/simulations/filter?type=html&a11yFeatures=interactive-description&sort=alpha&view=grid <https://phet.colorado.edu/en/simulations/filter?type=html&a11yFeatures=interactive-description&sort=alpha&view=grid>

Respectfully,

Taliesin Smith
talilief@gmail.com

~.~.~
Also reachable at:
Taliesin.Smith@colorado.edu
Inclusive Design Researcher
PhET Interactive Simulations
https://phet.colorado.edu/en/accessibility
Physics Department
University of Colorado, Boulder