4

VoiceOverをMobileSafariの特定の要素に進める方法を理解するのに問題があります。

これまでのところ、私は試しました：

<a href="#target">Skip</a>
...
<a name="target"></a>

これは、ページがスクロール可能であるが、長いページと短いページの両方で一貫して機能しない場合、（場合によっては）ターゲットに進み、次の要素が読み取られない場合があります。

私も試しました：

<a href="javascript:someElement.focus()">Skip</a>

残念ながら、これは非入力フィールドでは機能しないようです。

さらに高度な方法として、スキップする要素の前にリンクを配置し、その要素をに設定しようとしましaria-hidden="true"たが、何らかの理由でこれが<header>要素に対して機能しません。

うまくいったことの1つは、スキップリンクの前にスキップしたい要素を実際に物理的に移動することです。例：

<a id="skip" href="javascript:$('header').insertBefore($('#skip'));">Skip</a>

残念ながら、これはまだ自動的に次の要素に進むことはなく、離れるときにぼかしイベントが発生しないため、ユーザーがカーソルを進めたときにリンクを元の場所に復元するための適切なメカニズムがありません。

これは簡単なことのようで、アイデアが足りなくなっています。皆さんのために働いた解決策はありますか？

4

1 に答える 1

3

これは私のiPhoneで機能します（キーボードのフォーカスを移動し、ナレーションにコンテンツを話させます）：

<button onclick="document.getElementById('last').focus();">Move focus to bottom heading</button>

<div tabindex="-1" id="last">
<h2>dzoooong</h2>
<p>Heaps of new content</p>
<p>blablalbalblablabl</p>
</div>

すべての要素で機能するわけではありません。たとえば、フォーカスをh2に直接移動することはできません。

于 2012-07-20T07:21:26.567 に答える