单击时将焦点更改为元素

Question

问题：

我在页面底部有一个返回顶部箭头.fa-caret-up，希望在单击箭头到页面左上角的窗口或徽标.logo 后更改焦点。

我在哪里

我看到它console.log("Does this work?")，但是当我按 Tab 键时，它不是正常的 Tab 键顺序，它需要我在 Mac 屏幕阅读器中“离开 HTML 内容”。

scripts.js

$(function() {
  // This plays videos on click, so beautiful
  $("video").click(function (e) {
  if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
  {
    if(this.paused)
      this.play();
    else
      this.pause();
  }
});

// Smooth scroll like butter
$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});

// FOR IMAGES
// Needs fixing but on the right track
// var fadeImg = $("img").fadeTo(0, 0);

// $(window).scroll(function() {
//     fadeImg.each(function(i) {
//         a = $(this).offset().top + $(this).height();
//         b = $(window).scrollTop() + $(window).height();
//         if (a < b) $(this).fadeTo(500,1);
//     });
// });

  // Accessibility consideration, change focus from nav to header in story on click
  $('.chp1').click(function (evt){
    $("#1").focus();
    evt.preventDefault();
  });

  $('.chp2').click(function (evt){
    $("#2").focus();
    evt.preventDefault();
  });

  $('.chp3').click(function (evt){
    $("#3").focus();
    evt.preventDefault();
  });

  $('.chp4').click(function (evt){
    $("#4").focus();
    evt.preventDefault();
  });

  $('.chp5').click(function (evt){
    $("#5").focus();
    evt.preventDefault();
  });

  $('.fa-caret-up').click(function (){
    $('.logo').focus();
    console.log("Does this work?");
  });

  // If mouse hovers over "Reading section", change two elements to yellow
  $('.reading').mouseover(function(){
    $('.fa-clock-o').addClass('yellow');
    $('.min').addClass('yellow');
  });

  // If mouseout, then change back to default colour
  $('.reading').mouseout(function(){
    $('.fa-clock-o').removeClass('yellow');
    $('.min').removeClass('yellow');
  });

  // If mouse hovers over "Listen section", change two elements to yellow
  $('.listen').mouseover(function(){
    $('.fa-headphones').addClass('yellow');
    $('.lis').addClass('yellow');
  });

  // If mouseout, then change back to default colour
  $('.listen').mouseout(function(){
    $('.fa-headphones').removeClass('yellow');
    $('.lis').removeClass('yellow');
  });
});

index.html

<nav>
        <div class="navGroup">
            <a href="http://brandonsun.com" target="_blank"><img src="assets/img/branding/sq.png" alt="Brandon Sun logo. Click this image to go to the main site." class="logo"></a>

            <p class="featureTitle" tabindex="0" role="heading">Asbestos</p>

            <ul>
                <a href="#1" tabindex="0" class="chp1"><span class="acc">Chapter 1: Name of Chapter.</span><li>1</li></a>
                <a href="#2" tabindex="0" class="chp2"><span class="acc">Chapter 2: Name of Chapter.</span><li>2</li></a>
                <a href="#3" tabindex="0" class="chp3"><span class="acc">Chapter 3: Name of Chapter.</span><li>3</li></a>
                <a href="#4" tabindex="0" class="chp4"><span class="acc">Chapter 4: Name of Chapter.</span><li>4</li></a>
                <a href="#5" tabindex="0" class="chp5"><span class="acc">Chapter 5: Name of Chapter.</span><li>5</li></a>
            </ul>
        </div><!-- /.navGroup -->
</nav>
                <footer>
                    <div class="thanks">
                        <p class="credits" tabindex="0">
                            Photographer: <span class="bold" alt="Bruce Bumstead">Bruce Bumstead</span><br>
                            Reporter: <span class="bold" alt="Matt Goerzen">Matt Goerzen</span><br>
                            Developer: <span class="bold" alt="and Andrew Nguyen">Andrew Nguyen</span>
                        </p>
                    </div><!-- /.thanks -->
                    <a href="#" id="#" tabindex="0"><span class="acc">Go back to the top of the article</span><i class="fa fa-caret-up fa-2x" ></i></a>
                </footer>

Answer 1

Brandon-boone 对问题的诊断是正确的，但是，我会更改解决方案以专注于图像周围的锚点，因为这已经是自然可聚焦的，并且考虑到它可以交互，什么无论如何，你都会想专注于。

将代码改为：

  $('.fa-caret-up').click(function (){
    $('.logo').parent().focus();
    console.log("Does this work?");
  });

Answer 2

您只能使用 tabindex 聚焦元素。在您的情况下，尝试聚焦节点 <img class='logo' /> 失败，因为它没有默认选项卡索引。向元素添加tabindex='0' 将允许您成功.focus() 元素。

<img src="assets/img/branding/sq.png" alt="Brandon Sun logo. Click this image to go to the main site." class="logo" tabindex="0">

更多信息：What HTML elements are not tabbable even with tabindex?