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();

I'm on the Making WordPress and WPCampus slacks and also on Discord. Feel free to email me too at [email protected]

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.