The element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.

Link to The element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page. copied to clipboard
Rule ID:
keyboard-no-alternate
User Impact:
Critical
WCAG:
2.1.1.a

Rule

Functionality MUST be available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard.

Background

Some people cannot use a mouse due to vision or motor disabilities. Content that can be operated with a mouse must also be made operable with a keyboard. When content is operable through a keyboard, it becomes operable by a variety of assistive technologies such as speech input software, sip-and-puff software, on-screen keyboards, scanning software, and alternate keyboards.

Code Examples

Good example:

Functional HTML elements:


    <a href="https://deque.com">Deque</a>

    <button>Watch the video</button>

ARIA link with full accessibility:


    <span role="link" tabindex="0" data-href="https://deque.com">Fully accessible ARIA link to Deque.com</span>

Javascript:


    /* the jQuery click() event can be activated by mouse or keyboard */
    $("[role=link]").click(function(){
        var href = $(this).attr('data-href');
        window.open(href);
    });

Failure example:

Non-standard link with Mouse Click Event (HTML):


    <!-- keyboard users cannot tab to this mouse-only link -->
    <span class="mouseOnlyLink" data-href="https://deque.com">Mouse-dependent link to Deque.com</span>

Non-standard link with Mouse Click Event (Javascript):


    /* the mousedown event handler is a problem for keyboard users */
    $(".mouseOnlyLink").mousedown(function(){
       var href = $(this).attr('data-href');
       window.open(href);
    });    

Non-standard link with Mouse Click Event (CSS):


    .fakeLink {color: blue; text-decoration: underline;}
    .fakeLink:hover {cursor:pointer;}    

How To Fix

Fix this issue by ensuring the component can be used by the keyboard.

Utilizing standard HTML form controls and link elements guarantees keyboard operation. User agents provide the keyboard operation of standard controls and additionally map them to an accessibility API. The API is then used by assistive technologies to extract the necessary information and relate them to the user. Standard controls and links include:

  • <a>
  • <button>
  • <input>(various types including, but not limited to: "text", "checkbox", "radio")
  • <select>
  • <textarea>

If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add keyboard focusability (via tabindex=”0”) and keyboard events via JavaScript as well as the relevant element role(s) using ARIA.

References