Provide Non-Dragging Alternatives for Dragging Movements

Disabilities Affected: Cognitive, Mobility

Success Criterion: 2.5.7

Level: AA

All functionality that uses a dragging movement for operation (like sliders, drag-and-drop interfaces) must be operable using a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent.

Why It Matters

Dragging requires sustained pointer control (holding the button down while moving) which can be difficult or impossible for users with certain motor impairments (tremors, weakness, limited precision). Providing non-dragging alternatives ensures these users can still operate the functionality.

Fixing the Issue

For any functionality that uses dragging:

Sliders: Allow setting the value by clicking directly on the slider track or via accompanying input fields/buttons (e.g., ‘+’ and ‘-‘ buttons). Ensure the slider handle is keyboard accessible (focusable and operable with arrow keys).
Drag-and-Drop: Provide alternative methods like selection followed by activation of “Move” buttons/menu options, or cut-and-paste keyboard commands.
Maps: Provide panning buttons (up, down, left, right) in addition to drag-to-pan. Ensure the single-pointer alternatives are easy to discover and use, and are keyboard accessible.

Good Code Example

A slider with keyboard and click support (conceptual HTML/JS):

Markup

<label for="volume-slider">Volume:</label>
<input type="range" id="volume-slider" name="volume" min="0" max="100" step="1" value="50">
<output for="volume-slider">50</output> %
<button onclick="adjustVolume(-5)" aria-label="Decrease volume">-</button>
<button onclick="adjustVolume(5)" aria-label="Increase volume">+</button>

<script>
  const slider = document.getElementById('volume-slider');
  const output = document.querySelector('output[for="volume-slider"]');

  // Update output when slider changes (via drag OR keyboard)
  slider.addEventListener('input', () => {
    output.textContent = slider.value;
  });

  // Allow setting via buttons (single click alternative)
  function adjustVolume(amount) {
    let currentValue = parseInt(slider.value, 10);
    let newValue = Math.max(0, Math.min(100, currentValue + amount));
    slider.value = newValue;
    output.textContent = newValue;
    // Trigger input event if needed by other listeners
    slider.dispatchEvent(new Event('input'));
  }

  // Standard HTML range input is keyboard accessible by default (arrow keys)
</script>

Bad Code Example

Drag-and-drop interface with no alternative method:

Markup

<ul id="sortable-list">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
  <li draggable="true">Item 3</li>
</ul>
<script>
  // Assume JS here implements drag-and-drop sorting for the list items.
  // If NO alternative (e.g., "Move Up"/"Move Down" buttons per item,
  // or keyboard commands) is provided, users who cannot perform drag
  // gestures cannot reorder the list.
</script>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult