可訪問多個項目的拖放

>本文展示了為多個元素處理和鍵盤可訪問性增強HTML5拖放功能，從而使視力和屏幕閱讀器用戶受益。 假設對拖放API的基本熟悉（請參閱初學者的介紹性文章），我們將重點放在擴展其功能上。

> dataTransfer雖然多個元素的核心數據操作很簡單（使用單獨的數組而不是

），但用戶界面的複雜性顯著增加。 由於本機拖放缺乏後者，我們將解決選擇前的機制和鍵盤支持。 注意：觸摸事件和瀏覽器多填充不在本文的範圍之內。 呈現的解決方案在單頁中起作用，而不是跨窗戶。

> 密鑰改進：

>增強了用於多項項目選擇和鍵盤導航的拖放式拖放，改善了可訪問性。
一個數組在拖動過程中跟踪多個元素，簡化了ID不是靜態的動態環境（例如CMS系統）的集成。
• aria-grabbed使用ARIA屬性（aria-dropeffect>，
）和標準鍵擊（用於選擇的空間，控制M/命令M用於drop）的鍵盤可訪問性。
• 簡化的接口避免了連續的選擇，將所有修飾符鍵同樣處理以進行非連續選擇。
>動態ARIA屬性更新可確保無縫的交叉模式（鼠標/鍵盤）交互。
>強大的跨瀏覽器兼容性解決了諸如drop事件的問題，諸如使用命令鍵在mac/webkit上啟動的問題（使用
• 用於刪除最終確定）。 dragend>

基本的拖放（簡化示例）：> 一個功能示例使用鼠標相互作用演示了單個元素的基本拖放。 該代碼維護項目參考，而不是依靠

來用於元素ID，簡化了過程並改善了對服務器端應用程序的適應性。 由於瀏覽器支持不一致，

和dataTransfer被省略。 可拖動屬性是通過JavaScript動態應用的，分開關注點並允許排除破裂的實現（例如舊的Opera版本）。 HTML使用effectAllowed>屬性進行識別。 dropEffect> data-draggable

>可訪問的拖放實現：

> 可訪問性是最重要的。 我們將遵守ARIA的拖放慣例指南：>

1. 可拖動的元素使用aria-grabbed="false"，並且是鍵盤navigable。
>
2. SpaceBar選擇元素； aria-grabbed在選擇時變為“ true”。
>
3. 控制M/命令M最終確定選擇（第一個下降目標的快捷方式）。
目標元素使用
4. 指示允許的動作。 aria-dropeffect>
控制M/命令M或Enter在目標元素上執行Drop Action。 >
5. 逃脫取消操作。
6. >後行動清理重置
和
7. 。 aria-dropeffect> aria-grabbed
>我們將增強這些建議：選擇結束的擊鍵是可選的，並且控制M/命令M被補充用於丟棄的Enter。 為簡單起見，所有修飾符鍵（換檔，控制，命令）啟用無連續選擇。

>

多個選擇（鼠標和鍵盤）：

> 代碼添加>和

>屬性到可拖動元素。鼠標選擇使用

>（單/重置）和（取消/多重）。 鍵盤選擇使用aria-grabbed與空格鍵一起選擇，處理用於多個選擇的修飾符。 Atabindex屬性確保選擇僅限於單個容器。 mousedown，mouseup和keydown>函數管理選擇狀態。 selections.owner> addSelection removeSelection拖動選擇（鼠標和鍵盤）：clearSelections

>

用於指示有效的下降目標。 選擇時鍵盤交互添加。 對於鼠標的相互作用，

和

事件使用Aaria-dropeffect>變量和aria-dropeffect="move">函數來處理事件冒泡。 dragenter從目標容器中的項目中刪除，以改善鍵盤導航。 dragleave related丟棄選擇（鼠標和鍵盤）：getContainer> tabindex

事件（鼠標）處理掉落並重置。 由於瀏覽器不一致而省略了

事件。 鍵盤交互在目標容器上使用事件來處理滴滴，管理焦點以避免重置問題。

進一步的增強：dragend drop未來的改進可能包括觸摸/指針事件支持，瀏覽器多填充，選擇排序，可自定義的副本/移動操作，連續選擇，自定義拖動幽靈和拖動過程中的視覺提示。 該代碼可在github上找到（原始文本中提供的鏈接）。 keydown>

FAQS：

>常見問題解答部分提供了有關可訪問拖放實現的常見問題的清晰簡潔答案，涵蓋了多個元素，可輟學的區域，訂單控制，錯誤處理和測試。

>

以上是可訪問多個項目的拖放的詳細內容。更多資訊請關注PHP中文網其他相關文章！