Mouse input

Overview – Mouse input

Ensure all functionality is accessible via pointer input devices, e.g., via a mouse, a finger on a touch screen, an electronic stylus, or a laser pointer. This section covers two success criteria that impact mouse input:

• Content on hover or focus
• Pointer cancellation

Content on hover or focus

Additional content that appears when a user hovers the pointer or moves the keyboard focus to the trigger (e.g. tooltips, pop-ups), often leads to accessibility issues. The user may not have intended to trigger the interaction or know that new content has appeared. It may also interfere with a user’s ability to do a task.

Low vision readers using a greatly magnified screen see only a small portion of the screen at a time. Tooltip content can be clipped by their viewports, so these users will need to move their pointer over the additional content to read it. Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Dismissible

A mechanism (usually the Esc key) is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content.

Hoverable

Pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing.

Persistent

The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Content that can be triggered via pointer hover should also be able to be triggered by keyboard focus.

This requirement covers content that appear in addition to the triggering component itself. It does not apply to a non-visible component, like a Skip to Main link, that is made visible on keyboard focus (with no additional content other than the trigger becoming visible).

<p>This is the 
   <a class="a-and-tooltip" id="parent" href="introduction.html">
      trigger.
      <span id="popup" role="tooltip">
         And this text gives additional context on the trigger term.
      </span>
   </a>
</p>

[role="tooltip"] {     
   visibility: hidden;     
   padding: 0.5em;     
   background:white;     
   color: black;     
   border:solid black 2px;     
   width:10em; 
   position: absolute;
   left:0;     
   top:1em; 
}
.a-and-tooltip {   
   position: relative; 
}

// trigger and popup inside the same link
var parent = document.getElementById('parent');
parent.onmouseover = function() {
   document.getElementById('popup').style.visibility = 'visible';
}
parent.onmouseout = function() {
   document.getElementById('popup').style.visibility = 'hidden';
}
parent.onfocus = function() {
   document.getElementById('popup').style.visibility = 'visible';
}
parent.onblur = function() {
   document.getElementById('popup').style.visibility = 'hidden';
}
// hide when ESC is pressed
document.addEventListener('keydown', (e) => {
  if ((e.keyCode || e.which) === 27)
      document.getElementById('popup').style.visibility = 'hidden';
});

Pointer cancellation

The intent of this requirement is to help users prevent pointer input mistakes. Users can accidently initiate touch or mouse events with unwanted results. It is important to allow users to cancel pointer operations.

A single pointer is a pointer input that operates with one point of contact with the screen. This includes single taps and clicks, double-taps and clicks, long presses, and path-based gestures.

For functionality that can be operated using a single pointer, at least one of the following is true:

No Down-Event

The down-event of the pointer is not used to execute any part of the function.

Abort or Undo

Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion.

Up Reversal

The up-event reverses any outcome of the preceding down-event.

Essential

Completing the function on the down-event is essential.

The easiest way to meet this requirement is to use the default behaviour of controls and not override that behaviour with an explicit down-event trigger. The up-event (e.g. onclick or mouseup event) is the default behaviour for most controls in any programming or markup language.

Examples

No Down-Event

Using native onclick event in JavaScript.

Using a native button or link in HTML, iOS or Android.

Abort or Undo

Ensuring the drag-and-drop actions can be cancelled.

For example, when using a drag-and-drop action to move an item to a drop target, the user can abort the action after picking up the item by releasing the item outside a drop area. Or by implementing an undo command or a dialog asking for confirmation after the item is dropped onto target.

Up Reversal

Press-and-hold actions such as where a pop-up appears (or a video plays) when the user presses on an object (down-event), but the pop-up (or video) disappears when the user releases the pointer (up-event).

Essential

Software keyboard emulators – the expected behaviour is to make letters and numbers appear when the key is pressed (down-event).

On screen piano keyboard.

Related WCAG resources