具有角色按钮的锚 link 内图像的可访问性：可点击元素必须是可聚焦的并且应该具有交互语义

Question

我有以下标记：

<li class="remove-filter-key-list-item" data-id="{{this.id}}">
  <a
    href="#"
    class="remove-filter-key-button flx jst-cntr"
    role="button"
    tabindex=0
  >
    <img
      class="remove-filter-key-list-icon"
      src="{{this.icon}}"
      alt="{{this.statusText}} icon"
    />
    <span
      class="remove-filter-key-list-title"
    >{{this.statusText}}</span>
  </a>
</li>

在 firefox 可访问性检查器中触发 this error：

据我所知，link 需要一个 onclick 侦听器、一个 keydown 侦听器、一个选项卡索引和两个事件的 prevent default。我试过添加这些，但错误仍然存在。 Firefox 似乎专注于锚 link 内的图像，而不是 link 本身，后者是可点击的东西。

我在 javascript 文件中添加监听器（我没有也不能在 html 中内联添加它们）如下：

function addStatusFilterListener(el) {
  el.addEventListener("click", onStatusFilterToggle);
  el.addEventListener("keydown", (e) => {
    e.preventDefault();
    if (e.keycode === 32) {
      //if spacebar
      onStatusFilterToggle(e);
    }
  });
}

虽然这似乎不起作用 - 空格键滚动页面，但我的事件没有被触发，而且辅助功能检查器似乎正在寻找包含的 img 标签上的事件。构建此结构以解决这些问题的正确方法是什么？

Answer 1

以下是我对您的代码的看法：

tabindex=0 是不必要的，因为 link 默认是可聚焦的。
键盘处理程序是不必要的，因为按回车键已经触发了 link and/or 单击处理程序。它甚至可能是危险的，因为您使界面与用户对 link 或按钮的预期不同。
将 tabindex=0 添加到 <img/>、<span> 或 link 中的任何内容都会造成麻烦；嵌套的可聚焦或可点击元素会造成混淆，因为它们没有被用户很好地理解并且触发的实际事件没有明确定义 and/or 很难处理好。
该图片有替代文字，因此就辅助功能而言，您看起来一切都很好

Answer 2

为了节省大量变通方法和小提琴，最直接的解决方案是将图像包裹在按钮中，而不是试图让锚点表现得像按钮。

这意味着您不必担心不同的处理程序等，因为按钮上的 click 事件处理程序具有内置的所有行为！

在下面的示例中，我将您的代码更改为使用 <button> 并添加了 data-id 只是为了提醒单击了哪个项目。

您将看到您可以使用 Enter 或 Space 来激活该项目以及单击鼠标！

const removeBtn = document.querySelectorAll('.remove-filter-key-button');

removeBtn.forEach((element)  => {
   element.addEventListener('click', onStatusFilterToggle);
});

function onStatusFilterToggle(e){
  let el = e.currentTarget;  
  let itemID = el.getAttribute('data-id');
  alert("you pressed item: " + itemID);
}

button{
   border: 0px;
   background: transparent;
}
button:hover{
   cursor: pointer;
   opacity: 0.9;
}

<button class="remove-filter-key-button flx jst-cntr" data-id="1">
    <img
      class="remove-filter-key-list-icon"
      src="https://picsum.photos/100/100"
      alt="Some Alt Text icon"
    /><br>
    <span
      class="remove-filter-key-list-title"
    >Current Status</span>
  </button>
  <button class="remove-filter-key-button flx jst-cntr"  data-id="2">
    <img
      class="remove-filter-key-list-icon"
      src="https://picsum.photos/100/100"
      alt="Some Alt Text icon"
    /><br>
    <span
      class="remove-filter-key-list-title"
    >Current Status</span>
  </button>

具有角色按钮的锚 link 内图像的可访问性：可点击元素必须是可聚焦的并且应该具有交互语义

accessibility for image inside an anchor link with role button: Clickable elements must be focusable and should have interactive semantics

javascript

events

accessibility

keyboard-events