3

アクセシビリティが必要なため、フォーカスをアンカーにジャンプしたいと思います。

この理由は、ブラウザーの読み取りです。リンク「アンカーにフォーカス」をクリックすると、ブラウザがアンカーからページを読み始めますが、そのためにはフォーカスする必要があります。

このアンカーから始まるタブ ナビゲーションも必要です。私は tabindex を使用したくありません。これは実際には良い使用方法ではありません。URL にも #hash を使用したくありません。ページに自動スクロールは必要ありません。

残念ながら、今日、以下のコードが機能していません。これは、私のニーズを説明するための単なる例です。

<div id="content">

  <p>Paragraph...</p>
  <p>Paragraph...</p>
  <a href="#">A link</a>
  <p>Paragraph...</p>
  <p>Paragraph...</p>

  <a name="myAnchor"></a>

  <p>Paragraph...</p>
  <p>Paragraph...</p>
  <a href="#">A link</a>
  <p>Paragraph...</p>
  <p>Paragraph...</p>

  <a href="javascript:;" id="focusToAnchor">Focus to anchor</a>

</div>
<script type="text/javascript">
    $('#focusToAnchor').click(function() { $('a[name="myAnchor"]').focus(); });
</script>

なにか提案を？ありがとう

4

1 に答える 1

1

$(document).ready()まず、コードを関数でラップする必要があります。次に、name属性を id に変更し、クリック ハンドラーで通常のセレクターを使用します。

また、hashbang を href として使用して有効な html を維持しますが、クリック ハンドラーでデフォルトを防止します。

<a id="myAnchor"></a>
$(document).ready(function(){
   $('#focusToAnchor').click(function(e) {
       e.preventDefault();

       $("#myAnchor").focus(); 
   });
});

フィドルで更新

http://jsfiddle.net/hxUpQ/11/スタイルをトリガーしているようには見えませんが、フォーカスイベントを発生させているため、要素は間違いなくフォーカスされています。私はまた、他の何かが突然フォーカスを奪っていないかどうかをテストしましたが、私のテストの量はそうではありませんでした.

于 2013-11-01T20:16:53.913 に答える