分配键盘快捷键以拖放网页中的元素

Question

我的 Web 应用程序的其中一个页面具有拖放功能。事件已使用 jquery 处理。我想仅使用键盘复制鼠标的拖放操作。我相信这将使我的应用程序更易于访问。有办法吗？任何帮助表示赞赏。

Answer 1

您可能需要提供完全不同的视图，因为即使使用 ARIA，您仍然无法复制物理移动控件的需要。

一个例子是列出用户可以移动的所有对象，并在每个对象中提供一组用户想要移动的选项。

例如，这里有一个要移动的项目（根据需要复制和更改字母）：

<div id="itemA">
  <p>
    <strong>Item A</strong>
  </p>
  <p>
    <label for="selA">Move to:</label><br>
    <select id="selA">
      <option value="c1">Column 1</option>
      <option value="c2">Column 2</option>
      <option value="c3">Column 3</option>
    </select><br>
    <button onclick="MoveItem('itemA',selA.value);">Move</button>
  </p>
</div>

这是可以移动到的容器（我使用 table 只是因为我假装您使用的是网格，但您的容器可以是任何结构/语义上合适的容器）：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td id="c1"></td>
    <td id="c2"></td>
    <td id="c3"></td>
  </tr>
</table>

我不使用 jQuery，但我相信您可以将这个纯 JavaScript 函数抽象为您喜欢的语法：

function MoveItem(itemID, colID) {
  try {
    var Item = document.getElementById(itemID);
    var Col = document.getElementById(colID);
    Col.appendChild(Item);
  } catch (e) {
    console.log('MoveItem(): ' + e);
  }
}

就是这样。没有 ARIA，没有图书馆，无需担心移动性。

我还将整个示例作为 CodePen，因此您可以试一试，看看它是如何工作的：http://codepen.io/aardrian/pen/OXkaLW

Answer 2

Accessible Drag and Drop Using WAI-ARIA

本文适用于创建富互联网的人 具有拖放功能的应用程序并希望制作它们 无障碍。假设没有 WAI-ARIA 的先验知识，尽管它是 推荐你之前阅读我对 WAI-ARIA 的介绍文章 开始这篇文章。假定具备基本的脚本知识，并且 有必要准确理解代码中发生的事情 例如，但这些知识对于理解基本知识并不是必需的 讨论的概念。

使用 WAI-ARIA 拖放

WAI-ARIA 提供了两个属性来帮助使用辅助技术的用户进行拖放操作：

• aria-grabbed
• aria-dropeffect

Accessible Drag and Drop Example