Mac OS VoiceOver and Role Application - frustration

Hi Folks,

Our team makes highly interactive STEM learning resources.

To deliver descriptions interactively on custom interactions like sortable transport proteins in the example below, we make heavy use of ARIA role application. AND to make the role of the custom interaction understandable, we also make heavy use of aria-roledescription.

We have designed an interaction that works well and allows a screen reader user to navigate, grab, sort and delete transport proteins from a cell membrane, after the user has already added proteins to the membrane (a separate interaction and not the subject of this email).

The interaction can be thought of like a sortable list, but we could not get ARIA role application to work with a list structure, so we rolled our own countable list with div’s.

The interaction has 3 modes:
1. on focus, the proteins are “navigable", and arrow keys navigate between proteins. This works well.
2. Space or Enter keys activate a grabbed mode, an din this grabbed mode the protein becomes “sortable” and the arrow keys (or alternates A and D keys) now move the grabbed protein to a new location in membrane. This works well.
3.  A third mode is just reading through the list of existing proteins like reading through a document of content. We have a heading, “Cell Membrane”, and a div with each existing protein. When reading through the list of proteins, macOS VoiceOver reads out each protein 3 times. This is really undesirable!

To get this interaction to work, we had to put role application on each protein. We had no success on adding role application to a single parent element - we tried a parent UL and a parent DIV.

MY QUESTIONS:

  1.  Can any explain why VoiceOver reads out each individual protein 3 times when reading through the proteins with the VO cursor keys? I think it is because it somehow computes the role, the role description and the actual name as 3 unique things.
  2.  Are there any recommendations to improve the mark-up in order to get both an nice interactive experience of navigating and sorting while also being able to review what you have with the cursor keys?

Here’s the link to the git hub issues where are working on this issue: https://github.com/phetsims/membrane-transport/issues/198#issuecomment-2941337235


Here’s some simplified markup of the “Proteins in Membrane” interaction. This markup is valid html.

Note that we use both an aria-label and an accessible name because iOS VoiceOver does not recognize the accessible name when a custom aria-roledescription is in place (so frustrating)! And we have  role=“application” on each item because we could not get the dynamic roles, “navigable" and “sortable” to work one we just had  role=“application” on the parent DIV.

If anyone is interested I can share a link a prototype of the simulation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Test</title>
</head>
<body>
<div>
 <h4>Cell Membrane</h4>

 <div>
   <div role="application"
        aria-roledescription="navigable"
        aria-label="Sodium Ion, Leakage, open, 1 of 3 Proteins in Membrane"
        tabindex="-1">
     Sodium Ion, Leakage, open, 1 of 3 Proteins in Membrane
   </div>

   <div role="application"
        aria-roledescription="navigable"
        aria-label="Sodium Ion, Leakage, open, 2 of 3 Proteins in Membrane"
        tabindex="-1">
     Sodium Ion, Leakage, open, 2 of 3 Proteins in Membrane
   </div>

   <div role="application"
        aria-roledescription="navigable"
        aria-label="Sodium Ion, Leakage, open, 3 of 3 Proteins in Membrane"
        tabindex="-1">
     Sodium Ion, Leakage, open, 3 of 3 Proteins in Membrane
   </div>
 </div>
</div>
</body>
</html>


~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~
Taliesin L. Smith
taliesin.smith@colorado.edu

Inclusive Design Research Specialist
PhET Interactive Simulations
http://phet.colorado.edu/

Department of Physics
University of Colorado, Boulder

Received on Thursday, 5 June 2025 14:52:14 UTC