Question

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

Answer 1

Accessible Drag and Drop Using WAI-ARIA

本文适用于创建富Internet的用户   具有拖放功能的应用程序并希望制作它们   无障碍。虽然没有WAI-ARIA的先验知识，但是没有   建议你之前阅读我对WAI-ARIA文章的介绍   从这篇文章开始。假定脚本的基本知识，和   有必要准确理解代码中发生了什么   例如，但这种知识并不是理解基本知识所必需的   讨论的概念。

使用WAI-ARIA拖放

WAI-ARIA提供了两个属性，可帮助辅助技术用户轻松访问：

aria-grabbed
aria-dropeffect

Accessible Drag and Drop Example

Answer 2

您可能需要提供完全不同的视图，因为即使使用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

指定键盘快捷键以在网页中拖放元素

2 个答案:

Accessible Drag and Drop Using WAI-ARIA