Keyboard accessibility is one of the most important aspects of web accessibility. Nowadays, when most web interfaces are designed with mouse cursors and touch interaction in mind, keyboard navigation is neglected.

The keyboard is still the primary means for a large group of users to navigate websites so we want to make sure that users can navigate efficiently and unhindered using just their keyboard.

 

Space or Enter	When focus is on the accordion header of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab	Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow	When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header.
Up Arrow	When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
Home	When focus is on an accordion header, moves focus to the first accordion header.
End	When focus is on an accordion header, moves focus to the last accordion header.

 

Helping keyboard users to focus the panels

inside the Panels we have elements and text that users can interact with, examples are input fields or long texts that they need to scroll. Keyboard users who browse the accordion need to be able to to focus on the panel itself to get access to these elements.
To make sure the panel can get focus successfully in all browsers we need to add the special case tabindex="-1" attribute to the panel itself. This attribute value prevents the panel from being part of the tab order of the page, but allows focus to be placed on it by scripting. So this means we can only focus to the panel itself when it is opened.
When the focus is on the panel they can easily have access to the elements inside the panel, they can access form fields or scroll text.

Keydown script

To make this work we created a key-down script that checks which key is pressed and then we do one function or other.

$(document).keydown(function (e) {
       // Space    32
       // Enter    13
       // TAB      9
       // Shift    16
       // Down     40
       // Up       38
       // Home     36
       // End      35
       let current = $(":focus");
       //let li_elem = current.closest("li.awesome-accordion-item");
       switch (e.which) {
           case 38: // up
               move_up_down(-1);
               break;
           case 40: // down
               move_up_down(1);
               break;
           case 36: // Home
               go_home_end(-1);
               break;
           case 35: // End
               go_home_end(1);
               break;
           default:
               return; // exit this handler for other keys
       }
       if( current.closest("ul.awesome-accordion").length > 0 && current.closest(".awesome-accordion-panel").length < 1 )
       {
           e.preventDefault(); // prevent the default action (scroll / move caret)
       }
   });

Move focus using arrow keys

Here move_up_down and go_home_end. Depends if is up/down we change the focus to right element

function move_up_down(action)
   {
       let current = $(":focus");
       if( current.hasClass("js-open-close-acc") )
       {
           let ind = $(".js-open-close-acc").index(current);
               ind = ind + action;
           if( ind === $(".js-open-close-acc").length )
           {
               ind = 0;
           }
           else if( ind < 0 ) { ind = $(".js-open-close-acc").length - 1; } $(".js-open-close-acc:eq(" + ind + ")").focus(); } } function go_home_end(action) { console.log("go") let current = $(":focus"); if( current.hasClass("js-open-close-acc") ) { var ind = 0; if( action > 0 )
           {
               ind = $(".js-open-close-acc").length -1;
           }
           $(".js-open-close-acc:eq(" + ind + ")").focus();
       }
   }