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

Question

I'd like to jump the focus to an anchor due to some accessibility need.

The reason of this is reading browsers. When I click the link "Focus to anchor", I want the browser starting to read the page from the anchor, but for that I need to focus it.

I also want the tab navigation starting from this anchor. I don't want to use tabindex, which is not really a good way to use it. I don't want to use the #hash in the URL as well, I don't need any auto-scroll in my page.

Unfortunately today my code below is not working. This is just an example to illustrate my need.

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

Any suggestion? Thanks

Answer 1

first you need to wrap the code in a $(document).ready() function next I would change the name attribute to an id and use a normal selector in the click handler

I would also use the hashbang as a href to maintain valid html, but prevent the default in the click handler

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

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

Update With Fiddle

http://jsfiddle.net/hxUpQ/11/ it doesn't seem to trigger the style, but the element is definately getting focused, as it is firing a focus event. I also tested to see if anything else was suddenly stealing the focus but no amount of my testing showed that was the case.