Zugangswiderstand mit mehreren Elementen zugänglich

In diesem Artikel wird die Verbesserung der HTML5-Drag-and-Drop-Funktionen für mehrere Elemente zur Handhabung und Tastatur-Zugänglichkeit verbessert, wodurch sowohl die Benutzer von Seh- als auch Bildschirmleser zugute kommen. Angenommen, die grundlegende Vertrautheit mit der Drag-and-Drop-API (siehe Einführungsartikel für Anfänger) werden wir uns auf die Erweiterung der Funktionen konzentrieren.

Während die Kerndatenmanipulation für mehrere Elemente einfach ist (unter Verwendung eines separaten Arrays anstelle von dataTransfer), nimmt die Komplexität der Benutzeroberfläche erheblich zu. Wir werden Vorauswahlmechanismen und Tastaturunterstützung ansprechen, da der native Drag-and-Drop fehlt. HINWEIS: Berührungsereignisse und Browser -Polyfills liegen außerhalb des Bereichs dieses Artikels. Die vorgestellte Lösung funktioniert innerhalb einer einzelnen Seite, nicht über Windows.

Schlüsselverbesserungen:

• Verbessertes HTML5-Drag-and-Drop für mehrere Elementauswahl und Tastaturnavigation, Verbesserung der Zugänglichkeit.
• Ein Array verfolgt mehrere Elemente während des Drags und vereinfacht die Integration in dynamische Umgebungen (wie CMS -Systeme), in denen IDs nicht statisch sind.
Die Zugänglichkeit der Tastatur
• wird mithilfe von ARIA -Attributen (aria-grabbed, aria-dropeffect) und Standard -Tastenanschlägen implementiert (Speicherplatz für Auswahl, Steuerung M/Befehl m für Tropfen).
• vereinfachte Schnittstelle vermeidet eine zusammenhängende Auswahl und behandelt alle Modifikatortasten gleichermaßen für nicht verknüpfte Selektionen.
• Dynamische ARIA-Attribut-Updates sorgen für nahtlose Quermodale (Maus/Tastatur) Interaktion.
• robuste Cross-Browser-Kompatibilitätsangebote mit Problemen wie Drop-Ereignissen, die nicht auf Mac/Webkit mit gedrückter Befehlstaste abgefeuert werden (mit dragend für die Abschlusses von Drop).

grundlegendes Ziehen und Drop (vereinfachtes Beispiel):

Ein funktionales Beispiel zeigt grundlegende Drag & Drop für ein einzelnes Element unter Verwendung der Maus-Interaktion. Der Code behält eine Elementreferenz bei, anstatt sich auf dataTransfer für Element-IDs zu verlassen, um den Prozess zu vereinfachen und die Anpassungsfähigkeit an serverseitige Anwendungen zu verbessern. effectAllowed und dropEffect werden aufgrund einer inkonsistenten Browserunterstützung weggelassen. Draggable Attribute werden über JavaScript dynamisch angewendet, wobei Bedenken trennten und den Ausschluss von kaputten Implementierungen (wie ältere Opernversionen) ermöglichen. Die HTML verwendet data-draggable Attribute zur Identifizierung.

zugängliche Drag & Drop -Implementierung:

Barrierefreiheit ist von größter Bedeutung. Wir werden uns an die Richtlinien für die Aria Authoring Practices für Drag-and-Drop halten:

1. draggable Elemente verwenden aria-grabbed="false" und sind mit Tastaturen navigierbar.
2. LeaceBar wählt Elemente aus; aria-grabbed wird bei der Auswahl "wahr".
3. Steuerungsm/Befehl m schließt die Auswahl ab (Verknüpfung zum ersten Drop -Ziel).
4. Zielelemente verwenden aria-dropeffect, um zulässige Aktionen anzuzeigen.
5. Steuerelement M/Befehl m oder Eingabe führt die Drop -Aktion in einem Zielelement aus.
6. Escape kommt den Betrieb ab.
7. Post-Action-Reinigung wird aria-dropeffect und aria-grabbed.
zurückgesetzt

Wir werden diese Empfehlungen verbessern: Der Tastenanschlag am Ende der Auswahl ist optional, und die Steuerung M/Befehl M wird zum Ablegen ergänzt. Der Einfachheit halber ermöglichen alle Modifikator-Tasten (Verschiebung, Steuerung, Befehl) eine nicht kontinuierliche Auswahl.

Mehrfachauswahl (Maus und Tastatur):

Der Code fügt den Draggable -Elementen aria-grabbed und tabindex Attribute hinzu. Die Mausauswahl verwendet mousedown (Single/Reset) und mouseup (Deaktivieren/Multiple). Die Tastaturauswahl verwendet keydown mit Leertaste für die Auswahl und den Umgang mit Modifikatoren für mehrere Auswahlen. Eine selections.owner Eigenschaft stellt sicher, dass die Auswahl auf einen einzelnen Behälter beschränkt ist. Die Funktionen addSelection, removeSelection und clearSelections verwalten den Auswahlzustand.

Ziehen Sie die Auswahl (Maus und Tastatur):

aria-dropeffect wird verwendet, um gültige Tropfenziele anzuzeigen. Die Tastaturinteraktion fügt bei der Auswahl aria-dropeffect="move" hinzu. Für die Wechselwirkung von Maus verwalten dragenter und dragleave Ereignisse einen Schwebstatus mithilfe einer related -Variablen und der getContainer -Funktion, um das Ereignis zu verarbeiten. tabindex wird von Elementen innerhalb von Zielcontainern entfernt, um die Tastaturnavigation zu verbessern.

Ablegen der Auswahl (Maus und Tastatur):

Das Ereignis (Maus) verarbeitet das Abnehmen und Zurücksetzen. Ein dragend -Ereigner wird aufgrund von Browser -Inkonsistenzen weggelassen. Die Tastaturinteraktion verwendet ein drop Ereignis in Zielcontainern, um Tropfen zu verarbeiten, und verwalten den Fokus, um Probleme zu vermeiden. keydown

Weitere Verbesserungen:

Zukünftige Verbesserungen können Berührungs-/Zeiger -Unterstützung, Browser -Polyfills, Auswahlsortierungen, anpassbare Kopier-/Verschiebungsaktionen, zusammenhängende Auswahl, benutzerdefinierte Dragghosts und visuelle Hinweise während der Schlepper. Der Code ist auf GitHub verfügbar (Link im Originaltext angegeben).

FAQs:

Der FAQS-Abschnitt enthält klare und präzise Antworten auf häufige Fragen zur Implementierung der zugänglichen Drag-and-Drop-Implementierung, der Abdeckung mehrerer Elemente, Ablagerungsbereiche, Bestellregelung, Fehlerbehandlung und Tests.

Das obige ist der detaillierte Inhalt vonZugangswiderstand mit mehreren Elementen zugänglich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!