Understanding WCAG SC 2.1.2 No Keyboard Trap
Version and Level: 2.0/2.1/2.2 (Level A)

WCAG SC 2.1.2 No Keyboard Trap requires websites need to be friendly for people who use keyboards to navigate. This means they shouldn't get stuck on one part of the page. If they can use the keyboard to reach to an element, they should also be able to use it to get away from the element. In some cases, there might be a specific way to exit a section using the keyboard. If that's true, the website should instruct how to do it.

Benefits:

  1. Improved Accessibility for Keyboard Users: Ensures users can navigate freely using only a keyboard, without getting trapped in any page component.

Main Objective:

To ensure that users can navigate to and away from all components of a webpage using a keyboard interface, preventing any keyboard traps.

Best Practices:

  • Ensure complete tab navigation: Ensure that users can tab to and away from all parts of the site.

  • Provide instructions for intentional traps: If a user is intentionally trapped on a portion of the web page, provide clear instructions on how to exit the trap.

  • Test keyboard operability: Test all parts of the site for keyboard operability by using the tab key to move forward and the shift + tab key to move backwards.

  • Provide hints for custom keystrokes: Provide hints for custom keystrokes to operate a control.

  • Ensure accessibility of third-party widgets: Ensure third-party widgets are accessible and do not cause keyboard operability issues.

Examples & Explanation:

Example: Ensuring a user can navigate out of an interactive map using a keyboard

What Should Be Avoided

HTML/CSS

              <map tabindex="0" name="workmap">
                <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
                <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
                <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
              </map>
              
              <a href="#next-section">Next Section</a>
              
              <script>
                const map = document.querySelector("map"); 
                const firstArea = document.querySelector("area");         
              
                map.addEventListener("keydown", (e) => {
                  if(e.key === "ArrowDown"){
                    firstArea.focus();
                  }
                })
              
                map.addEventListener('keydown', (e) => {     
                  const targetElement = e.target; 
                  if (e.key === 'Tab') {    
                    e.preventDefault();      
                    if (e.shiftKey) {       
                      if (targetElement.previousElementSibling?.tagName === "AREA") {
                        targetElement.previousElementSibling.focus();                       
                      } else { 
                        map.children[map.children.length - 1].focus();
                      }     
                    } else { 
                      if (targetElement.nextElementSibling?.tagName === "AREA") {
                        targetElement.nextElementSibling.focus();              
                      } else {         
                        map.children[0].focus();
                      }     
                    }
                  }
                });
              </script>

Explanation: In this example, when a user tabs to the "map" element, they can enter the map using the down arrow key. Once inside, they can navigate between clickable areas using the Tab key to move forward and backward. However, there's no clear way for the user to exit the map, creating a navigation trap. This means users will be stuck inside the map indefinitely.

What Should Be Done

HTML/CSS

              <map title="press the down arrow to enter the map" tabindex="0" name="workmap">
                <note style="display: block; font-size: smaller; text-align: center;">Use Escape key to exit the map</note>
                <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
                <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
                <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
              </map>
              <a href="#next-section" id="next-link">Next Section</a>
              
              <script>
                const map = document.querySelector("map"); 
                const firstArea = document.querySelector("area");         
              
                map.addEventListener("keydown", (e) => {
                  if(e.key === "ArrowDown"){
                    firstArea.focus();
                  }
                })
              
                map.addEventListener('keydown', (e) => {     
                  const targetElement = e.target; 
                  if (e.key === 'Tab') {    
                    e.preventDefault();      
                    if (e.shiftKey) {       
                      if (targetElement.previousElementSibling?.tagName === "AREA") {
                        targetElement.previousElementSibling.focus();                       
                      } else { 
                        map.children[map.children.length - 1].focus();
                      }     
                    } else { 
                      if (targetElement.nextElementSibling?.tagName === "AREA") {
                        targetElement.nextElementSibling.focus();              
                      } else {         
                        map.children[0].focus();
                      }     
                    }
                  }
                  if(e.key === "Escape"){
                    map.focus();
                  }
                });
              </script>

Explanation: In this improved example, when a user tabs to the "map" element, a tooltip pops up instructing them to use the down arrow key to enter the map. Once inside the map, users can navigate between clickable areas using the Tab key. Additionally, a note is displayed within the map explaining how to exit navigation and return to the main "map" element to continue browsing the page. To complement the note, a new conditional statement has been added to the keydown event listener. This statement moves the focus back to the "map" element when the user presses the Escape key, allowing them to exit the map.

Next Up

Expand your knowledge with SC 2.1.4 - Character Key Shortcuts. Learn to make key shortcuts accessible for all users.

Go to SC 2.1.4