Understanding WCAG SC 2.1.1 Keyboard
Version and Level: 2.1/2.2 (Level A)

Success Criterion 2.1.1 Keyboard requires that all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the function depends on the path of the user’s movement and not just the endpoints. This criterion ensures that users who rely on a keyboard can access and operate all web content.

Benefits:

  1. Accessibility for Motor Disabilities: Allows users with motor impairments to navigate and interact with web content using a keyboard.
  2. Improved Navigation for Visually Impaired Users: Ensures that screen reader users can navigate content efficiently using keyboard shortcuts.
  3. Enhanced Usability for Elderly Users: Provides a reliable method of interaction for elderly users who may find mouse usage difficult.

Main Objective:

To ensure that, wherever possible, all web content functionalities are accessible and operable through a keyboard or keyboard interface, unless the component or function requires user movement. This could be a drawing game requiring the user's mouse accuracy, or a flying simulator, where the mouse emulates the pilot's steering.

Best Practices:

  • Ensure tab key accessibility: Ensure all elements on the page (buttons, links, form controls, etc.) are reachable by the tab key.

  • Allow activation with enter and spacebar: Users should be able to activate buttons, links, and form controls using the enter and/or spacebar keys, unless the author provides a different way for activation, which is described to the user.

  • Write clean and semantic code: Write clean, and semantic HTML and CSS to ensure default keyboard operability.

  • Ensure visible focus: Ensure visible focus for all active elements on the page.

  • Maintain logical focus order: Maintain logical and intuitive focus order.

  • Use tabindex=0 for custom UI elements: Use tabindex=0 for custom UI elements to make them focusable (i.e., a button made of a <div> element).

  • Provide event handlers for custom elements: Provide appropriate event handlers for custom scripted elements to ensure keyboard operability.

  • Avoid or carefully manage access keys: Avoid access keys if possible, or ensure they do not conflict with user agent and assistive technology shortcut keys.

  • Avoid time limits for keyboard operations: Avoid setting time limits for keyboard operations that require multiple keystrokes.

Examples & Explanation:

Example: A webpage contains a visual link which can be activated and interacted by users.

What Should Be Avoided

HTML/CSS

              <div id="login-link">Log in</div>
              <style>
                #login-link {
                  display: inline-block;
                  padding: 10px 20px;
                  border: none;
                  border-radius: 5px;
                  cursor: pointer;
                  font-weight: bold;
                  background-color: #000; /* Add a valid color */
                  color: white;
                }
              </style>
              
              <script>
                const link = document.querySelector("#login-link"); 
                link.addEventListener("click", () => { 
                  window.location.href = "https://login.tabnav.com"; 
                });
              </script>

Explanation:The customized link seems to work well for most visual users. When clicked, it takes them to the next page. However, keyboard users cannot navigate to the link because it is not included in the tabindex elements of the DOM. Even if it were included, it wouldn't offer any keyboard functionality, only mouse functionality.

What Should Be Done

HTML/CSS

              <div tabindex="0" id="login-link">Log in</div>
              <style>
                #login-link {
                  display: inline-block;
                  padding: 10px 20px;
                  border: none;
                  border-radius: 5px;
                  cursor: pointer;
                  font-weight: bold;
                  background-color: #000; /* Add a valid color */
                  color: white;
                }
              </style>
              
              <script>
                const link = document.querySelector("#login-link"); 
                link.addEventListener("click", () => { 
                  window.location.href = "https://login.tabnav.com"; 
                });
              
                link.addEventListener("keydown", (event) => {
                  let target = event.target;
                  if(event.key === " " || event.key === "Enter"){
                    target.click();
                  }  
                })
              </script>

Explanation:In this case, the link is custom-built but provides all the functionality of a regular link. We've included tabindex="0" to make the element part of the DOM's tab order, ensuring focus reaches the link during keyboard navigation. Additionally, a custom keydown event handler triggers mouse click functionality using the keyboard.

Next Up

Enhance your understanding with SC 2.1.2 - No Keyboard Trap. Learn to prevent keyboard traps for all users.

Go to SC 2.1.2