辅助功能和焦点/跳转锚点

Question

由于某些可访问性的需求，我想将重点放在锚点上。

这样做的原因是阅读浏览器。 当我单击链接“聚焦到锚点”时，我希望浏览器开始从锚点读取页面，但是为此，我需要集中精力。

我还希望标签导航从此锚点开始。 我不想使用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>

有什么建议吗？ 谢谢

Answer 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/它似乎并没有触发样式，但是由于它触发了焦点事件，因此该元素肯定会变得聚焦。 我还进行了测试，看是否还有其他东西突然失去了焦点，但是没有多少测试表明是这种情况。