分析表单上的键盘支持

项目
12/08/2023

本文使用“ 检查 ”工具和 “事件侦听器 ”选项卡来分析演示页上缺少键盘支持，该演示页上有使用元素的 <div> 按钮。

在辅助功能测试演示网页的 “捐赠” 窗体中，无法通过键盘访问金额按钮和 “捐赠 ”按钮。若要对此进行测试，需要：

在新窗口或选项卡中打开辅助功能测试演示网页。
在 “帮助我们进行捐赠 ”部分，单击“ 其他 ”文本框中的焦点。
尝试按 Tab 或 Shift-Tab 将焦点移到 “捐赠”、“ 50”、“ 100”或 200 个按钮上。按钮不可通过键盘访问。

调试捐赠表单需要了解为什么缺少焦点样式未标记为自动测试工具（如问题工具）的问题。在此示例中，按钮是使用 <div> HTML 元素实现的，这些工具无法将其识别为表单控件。

使用检查工具分析缺少键盘支持

若要在演示页上使用 “检查” 工具分析缺少键盘支持，请执行以下操作：

在新窗口或选项卡中打开辅助功能测试演示网页。
右键单击网页中的任意位置，然后选择“ 检查”。
单击 DevTools 左上角的“ 检查 () 按钮，以便该按钮突出显示 (蓝色) 。
将鼠标悬停在 “50”、“ 100”和 “200 ”捐赠“按钮上。 “检查”工具作为覆盖显示在网页上。 “检查”覆盖层的 键盘可聚焦 行显示，没有一个捐款金额按钮可通过键盘访问，如灰色交叉圆圈所示：

按钮没有名称，并且角色 generic 为，因为它们是 <div> 元素，这意味着辅助技术无法访问这些按钮。
当“检查”工具处于活动状态时，在网页上选择“捐赠”按钮上方的“其他输入”文本框。此时会打开 “元素” 工具，其中显示了网页的 DOM 树。 <input id="freedonation" class="smallinput">元素处于选中状态。
```
<div class="donationrow">
    <div class="donationbutton">50</div>
    <div class="donationbutton">100</div>
    <div class="donationbutton">200</div>
</div>
<div class="donationrow">
    <label for="freedonation">Other</label>
    <input id="freedonation" class="smallinput">
</div>
<div class="donationrow">
    <div class="submitbutton">Donate</div>
</div>
```
在“其他”文本框中使用 <label> 和 <input> 元素是有效的，这意味着“其他”标签与输入文本框正确链接。文本框 <input> 也可以通过键盘进行访问。表单标记的其余部分使用 <div> 元素，这些元素易于使用 CSS 设置样式，但对辅助技术没有意义，并且无法通过键盘访问。

使用“事件侦听器”选项卡分析缺少键盘支持

表单的功能是使用 JavaScript 创建的，可以通过检查“ 事件侦听器 ”选项卡来测试此功能，如下所示：

在新窗口或选项卡中打开辅助功能测试演示网页。
右键单击网页中的“ 其他 ”文本框，然后选择“ 检查”。此时会打开 “元素” 工具， <input id="freedonation" class="smallinput"> 并选中元素。
在 DOM 树中仍选中元素<input id="freedonation" class="smallinput">的情况下，选择“样式”选项卡右侧的“事件侦听器”选项卡，然后展开click事件侦听器。

单击链接 buttons.js:18 。 “ 源” 工具随即打开，其中显示了应用的 JavaScript：

源工具中显示的负责捐赠表单功能的 JavaScript

下面是应用的 JavaScript 的代码列表：

donations.addEventListener('click', e => {
  let t = e.target;
  if (t.classList.contains('donationbutton')) {
    if (currentbutton) { currentbutton.classList.remove('current'); }
    t.classList.add('current');
    currentbutton = t;
    e.preventDefault();
  }
  if (t.classList.contains('submitbutton')) {
    alert('Thanks for your donation!')
  }
})

click使用按钮时使用事件侦听器运行代码是一种很好的做法，因为click事件会在鼠标指针和键盘交互上触发。但是， “捐赠 ”按钮是使用 <div> HTML 元素实现的，该元素不能通过键盘进行聚焦。仅 click 当使用鼠标或事件的其他源 click （例如某些键盘上提供的特殊按钮）时，事件才会运行。

这是一个经典示例，其中添加了 JavaScript 以重新创建元素本身提供的功能 <button> 。使用 <div> 元素模拟按钮的功能最终会产生不可访问的体验。

通过

分析表单上的键盘支持

使用检查工具分析缺少键盘支持

使用“事件侦听器”选项卡分析缺少键盘支持

反馈

其他资源