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>

This is a reduced example of my `index.html` that has the `
` with the `.logo` and footer with the `.fa-caret-up` I've included `tabindex=0` on some elements to ensure they are in the normal tab order. However, when I click on the back to top arrow in my footer, it doesn't start the tab order from `.logo` it chooses to "Leave HTML content" instead. — Andrew Nguyen, Apr 09 '15 at 19:50
My guess is that .focus() doesn't like that you're calling it on a potential collection, try using an ID query instead of a class query. For example what would .focus() do if you had multiple "logo" classes? Just adding as a comment because I can't verify answer at the moment. — lukevp, Apr 09 '15 at 19:58
@lukevp I only have a single logo class, tried with an ID and it did not work either. — Andrew Nguyen, Apr 09 '15 at 19:59
so if you hit tab 3 times from logo being the first selection assuming you expect to be where? — Cayce K, Apr 09 '15 at 20:25

score 2 · Answer 1 · answered Apr 11 '15 at 18:21

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?");
  });

score 0 · Answer 2 · edited May 23 '17 at 11:43

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?

Changing focus to an element on click

Problem:

Where I'm At

scripts.js

index.html

2 Answers2