Changing focus to an element on click

Question

Problem:

I have a back to top arrow .fa-caret-up at the bottom of the page, looking to change the focus after the arrow is clicked to either the window or the logo .logo at the top left corner of the page.

Where I'm At

I see it console.log("Does this work?") but when I tab it's not in the normal tab order and it takes me to "Leaving HTML content" in the Mac screen reader.

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 is correct in the diagnosis of the problem, however, I would change the solution to focus on the anchor that is around the image as this is already naturally focusable and, given that it can be interacted-with, what you will want to focus on anyway.

Change the code to:

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

Answer 2

You can only focus elements with a tabindex. In your case, trying to focus the node <img class='logo' /> fails because it does not have a default tab index. Adding a tabindex='0' to the element will allow you to .focus() the element successfully.

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

More info: What HTML elements are not tabbable even with tabindex?