Function that handles focus when user navigates through a site using their keyboard. Prevents the focus from getting stuck, which can sometimes happen with carousels.

handle-tab-focus.js

function handleTabFocus(e) {
  let focus = document.activeElement,
      newFocus;

  $(document).keyup(function(e) {
    const code = e.keyCode || e.which;

    // If the tab key is pressed:
    if (code === 9) {
      // Determine which element has focus now.
      newFocus = document.activeElement;

      // If the focus did not change, change it manually.
      if (focus == newFocus) {
        // Get a list of all focusable, visible elements.
        let focusableEls = $("*:focusable:visible");

        // Get the index of the element that currently has focus.
        let index = focusableEls.index(focus);

        // Determine the index of the next item to have focus based on whether user is going forward or back.
        let newIndex = (e.shiftKey) ? index-1 : index+1;

        // Put the focus on the next element in the list.
        focusableEls[newIndex].focus();
      }

      // Save the element that currently has focus.
      focus = document.activeElement;
    }
  });
}

handleTabFocus();

omg thank you for this. dealing with carousel now myself 🤦‍♀️ and it's a huge mess!

Hi, I really need your help with my carousel, you seem to be the only person on the whole internet who has fixed the problem I am having, but it still won't work. Would be great if we could have a chat if you have some spare time, thanks :)

Hi @archiewhitaker! Carousels are ridiculously hard to get right. To be honest, I'm not 100% convinced I have it completely right, but I am more than happy to help if I can! Do you have a copy of your code somewhere where I can take a peek at it?

Hi @thatdevgirl, yes they are awful haha. At the moment I am trying to not use jQuery for this problem, but I have re-directed my tab button to the arrowRight button in my carousel which has fixed (too many) problems I was having with keyboard nav, but now I have no idea how to make it so focus changes to the next element onClick of the arrow, and also how to make it so keyboard navigation moves out of carousel after the final banner to tab through the rest of the pages elements! If you have any idea how I could approach this I would really apprieciate some help, do you have slack or something we could talk on?

I'm on the Making WordPress and WPCampus slacks and also on Discord. Feel free to email me too at joni@jhalabi.com

Some key accessibility points I'll make here, though:

1. I find it best to not map keyboard functionality to other keys, unless it's absolutely necessary. The key to accessibility it to make whatever you are building as intuitive as possible, which means conforming to expectations. The tab key takes you to different focusable elements. Shift-tab takes you backwards. Enter initiates an action, like clicking a button or a link. If you change up the keys that make your carousel work, you also have to find a way to tell your users about these changes.
2. The issue may not be 100% the jQuery/Javascript. Step 1 is making sure the markup around the carousel also makes sense. Pretend a user is looking at the HTML for the carousel. The images/slides of your carousel make up a list of information (e.g. <ul>). The forward/back buttons are maybe a form? Slide indicators are the navigation (e.g. <nav>) of your carousel.

Let's definitely chat more! I think seeing your code too will make a conversation more productive.