3️⃣ 2.5.7 - Ziehende Bewegungen (Dragging Movements)
AA 2.2
Umsetzung
Ermöglichen, dass Funktionen, die Ziehbewegungen erfordern, auch mit einer einfachen Zeigerinteraktion (z. B. Klicken oder Tippen) ausgeführt werden können.
Beschreibung
Abschnitt betitelt „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:
- Essenzielle Bewegung: Das Ziehen ist für die Funktionalität erforderlich (z. B. ein Schrittzähler).
- Darstellungsprogramm: Die Funktionalität wird vom Benutzeragenten festgelegt und kann nicht geändert werden.
Anforderungen
Abschnitt betitelt „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.
- Bereitstellung klarer Anweisungen zur Nutzung alternativer Mechanismen.
- Testen, ob alle Funktionen, die Ziehbewegungen erfordern, auch durch einfache Zeigerinteraktionen ausführbar sind.
- Sicherstellen, dass alternative Steuerelemente benutzerfreundlich und zugänglich sind.
Code-Beispiele
Abschnitt betitelt „Code-Beispiele“Alternative Schaltflächen für Drag & Drop:
Abschnitt betitelt „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:
Abschnitt betitelt „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>