Zum Inhalt springen
44 Barrierefreiheit Dokumentation

3️⃣ 2.5.7 - Ziehende Bewegungen (Dragging Movements)

AA 2.2 Umsetzung

Ziel

Ermöglichen, dass Funktionen, die Ziehbewegungen erfordern, auch mit einer einfachen Zeigerinteraktion (z. B. Klicken oder Tippen) ausgeführt werden können.

Beschreibung

  • Funktionen, die das Ziehen eines Elements voraussetzen, müssen über alternative Mechanismen bedienbar sein, wie z. B. durch Schaltflächen oder Menüs. Dies hilft Benutzern, die nicht in der Lage sind, präzise Ziehbewegungen auszuführen.
  • Ausnahmen:
    1. Essenzielle Bewegung: Das Ziehen ist für die Funktionalität erforderlich (z. B. ein Schrittzähler).
    2. Darstellungsprogramm: Die Funktionalität wird vom Benutzeragenten festgelegt und kann nicht geändert werden.

Anforderungen

  • Bereitstellung alternativer Steuerelemente, wie z. B. Schaltflächen, für Funktionen, die Ziehbewegungen erfordern.
  • Sicherstellen, dass alternative Bedienelemente benutzerfreundlich und klar erkennbar sind.
  • Implementierung von Schaltflächen oder anderen Interaktionsmethoden für Ziehbewegungen.
  • Sicherstellen, dass alle Funktionen durch einen einfachen Klick oder ein Tippen verfügbar sind.

Code-Beispiele

Alternative Schaltflächen für Drag & Drop:

<div class="sortable-list">
  <div>
    <button onclick="moveUp('item1')">▲</button>
    <div id="item1" draggable="true">Element 1</div>
    <button onclick="moveDown('item1')">▼</button>
  </div>
</div>

Alternative Steuerung für Schieberegler:

<div>
  <input type="range" id="slider" min="0" max="100" step="1">
  <button onclick="decreaseSlider()">−</button>
  <button onclick="increaseSlider()">+</button>
</div>


<script>
  function decreaseSlider() {
    const slider = document.getElementById('slider');
    if (slider.value > slider.min) slider.value--;
  }


  function increaseSlider() {
    const slider = document.getElementById('slider');
    if (slider.value < slider.max) slider.value++;
  }
</script>