3

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

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

をタップするdivと、ul高さはその子のオフセット高さの合計に更新され、aria-hidden設定falseまたは削除されます。もう一度タップすると、高さが 0 になり、 が設定されますaria-hidden="true"。

私が直面している問題は、Mobile Safari が、隣接する要素がそれらの aria-hidden 値を変更するのにうまく対応できないことです。いくつかの実験から、変化する要素が少なくとも 2 つのフォーカス可能な要素から離れていて、DOM の変更が発生した場合に最適に機能します。<div>ドキュメントの最後にa を追加しながら、次のことを試しました。

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

それらを別々の div でラップしたり、ターゲットの直前に 2 つの div を挿入および削除したりするなどの他のトリックも機能しません。VoiceOver は、要素を最初に選択したときに、次に再生する要素を既に選択しているようです。

この種のアクセス可能な機能で成功した人はいますか?

4

1 に答える 1

0

この問題にもう少し取り組んだ後、灰色の色合いがいくつかあります。VoiceOver が読み上げを完了するのを待つと、正しい要素に進みます。変更が発生すると、VoiceOver の最初の応答は、現在の要素を再読み取りしてから、次に移動する場所を再評価することです。

解決策は、意味を失うことなくテキストをできるだけ短くすることです。私の実際のテキストはもっと長くなりましたが<div role="link">Expand</div>、読者が言わなければならないのはExpand LinkかCollapse Link.

于 2012-07-27T18:50:35.527 に答える