title: Changing focus to an element on click
body: <h1>Problem:</h1>
  
  <p>I have a back to top arrow <code>.fa-caret-up</code> at the bottom of the page, looking to change the focus after the arrow is clicked to either the window or the logo <code>.logo</code> at the top left corner of the page. </p>
  
  <h1>Where I'm At</h1>
  
  <p>I see it <code>console.log("Does this work?")</code> 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.</p>
  
  <h2>scripts.js</h2>
  
  <pre><code>$(function() {
    // This plays videos on click, so beautiful
    $("video").click(function (e) {
    if(e.offsetY &lt; ($(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(/^\//,'') &amp;&amp; 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 &lt; 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');
    });
  });
  </code></pre>
  
  <h2>index.html</h2>
  
  <pre><code>&lt;nav&gt;
          &lt;div class="navGroup"&gt;
              &lt;a href="http://brandonsun.com" target="_blank"&gt;&lt;img src="assets/img/branding/sq.png" alt="Brandon Sun logo. Click this image to go to the main site." class="logo"&gt;&lt;/a&gt;
  
              &lt;p class="featureTitle" tabindex="0" role="heading"&gt;Asbestos&lt;/p&gt;
  
              &lt;ul&gt;
                  &lt;a href="#1" tabindex="0" class="chp1"&gt;&lt;span class="acc"&gt;Chapter 1: Name of Chapter.&lt;/span&gt;&lt;li&gt;1&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#2" tabindex="0" class="chp2"&gt;&lt;span class="acc"&gt;Chapter 2: Name of Chapter.&lt;/span&gt;&lt;li&gt;2&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#3" tabindex="0" class="chp3"&gt;&lt;span class="acc"&gt;Chapter 3: Name of Chapter.&lt;/span&gt;&lt;li&gt;3&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#4" tabindex="0" class="chp4"&gt;&lt;span class="acc"&gt;Chapter 4: Name of Chapter.&lt;/span&gt;&lt;li&gt;4&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#5" tabindex="0" class="chp5"&gt;&lt;span class="acc"&gt;Chapter 5: Name of Chapter.&lt;/span&gt;&lt;li&gt;5&lt;/li&gt;&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navGroup --&gt;
  &lt;/nav&gt;
                  &lt;footer&gt;
                      &lt;div class="thanks"&gt;
                          &lt;p class="credits" tabindex="0"&gt;
                              Photographer: &lt;span class="bold" alt="Bruce Bumstead"&gt;Bruce Bumstead&lt;/span&gt;&lt;br&gt;
                              Reporter: &lt;span class="bold" alt="Matt Goerzen"&gt;Matt Goerzen&lt;/span&gt;&lt;br&gt;
                              Developer: &lt;span class="bold" alt="and Andrew Nguyen"&gt;Andrew Nguyen&lt;/span&gt;
                          &lt;/p&gt;
                      &lt;/div&gt;&lt;!-- /.thanks --&gt;
                      &lt;a href="#" id="#" tabindex="0"&gt;&lt;span class="acc"&gt;Go back to the top of the article&lt;/span&gt;&lt;i class="fa fa-caret-up fa-2x" &gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/footer&gt;
  </code></pre>