Forcing changes to aria-hidden to take effect immediately on Mobile Safari

Question

I'm creating a basic menu in HTML with CSS3. When you click on a div, the adjacent list either expands or contracts using a CSS transition. For example:

<style>
    ul {
        -webkit-transition: height 200ms linear;
        overflow: hidden;
    }
</style>
<div>Tap to expand</div>
<ul style="height: 0" aria-hidden="true">
    ....
</ul>

On tapping the div, the ul height is updated to the sum of its childrens' offset heights and aria-hidden is set for false or removed. Tapping again sets the height to 0 and sets aria-hidden="true".

The problem I'm facing is that Mobile Safari doesn't really play too nicely with adjacent elements changing their aria-hidden value. From some experimentation, it works best if the changing element is at least 2 focusable elements away and a DOM change occurs. I've experimented with the following while appending a <div> to the end of the document.

<div>Tap to expand</div>
<div>x</div>
<div>x</div>
<ul><!-- This works -->


<div>Tap to expand</div>
<div>x</div>
<ul><!-- This doesn't -->

<div>Tap to expand</div>
<div></div>
<div></div>
<ul><!-- Nor does this -->

Other tricks like wrapping them in separate divs or inserting and removing two divs right in front of the target doesn't work either. It seems like VoiceOver has already made its choice on what element to play next when it first selects an element.

Has anyone been successful with this kind of accessible functionality?

Answer 1

After working on this problem some more, there are some shades of grey. The correct element will be advanced to if you wait for VoiceOver to finish reading. When a change occurs, VoiceOver's first response is to reread the current element and then reevaluate where to go next.

The solution is then just to keep the text as short as possible without losing meaning. My actual text was much longer but I've reduced it down to <div role="link">Expand</div> so all the reader has to say is Expand Link or Collapse Link.