モバイルSafariでaria-hiddenの変更をすぐに有効にする

Question

CSS3でHTMLで基本メニューを作成しています。 divをクリックすると、隣接するリストがCSSトランジションを使用して拡大または縮小されます。たとえば：divをタップで

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

、ul高さは、その子どものオフセット高さの合計に更新され、aria-hiddenはfalseまたは削除のために設定されています。再度タップすると高さが0に設定され、aria-hidden="true"に設定されます。

私が直面している問題は、モバイルSafariが本当にあまりにもうまくプレイして隣接エレメントがアリア隠し値を変更しないということです。いくつかの実験から、変更要素が少なくとも2 フォーカス可能要素離れており、DOMが変更された場合に最適です。私は以下を試してきたが、文書の最後に<div>を追加している。別のdiv要素でそれらをラップするか、挿入し、右のターゲットの前で2つのdivを削除するよう

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

他のトリックはどちらか動作しません。 VoiceOverは、最初に要素を選択したときに、次に再生する要素をVoiceOverが選択したようです。

誰もこのような種類のアクセシビリティ機能に成功しましたか？

Answer 1

この問題をもう少し解説した後、いくつかの色合いのグレーがあります。 VoiceOverが読み終わるのを待っている場合は、正しい要素が進みます。変更が発生すると、VoiceOverの最初の応答は、現在の要素を再読み込みし、次にどこに行くかを再評価することです。

解決策は、意味を失うことなくテキストをできるだけ短く保つことです。私の実際のテキストはずっと長くなりましたが、私はそれを<div role="link">Expand</div>に減らしました。すべての読者はExpand LinkまたはCollapse Linkです。