javascript - 具有角色按钮 : Clickable elements must be focusable and should have interactive semantics 的 anchor 链接内图像的可访问性

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>

正在触发this error在 Firefox 辅助功能检查器中:

据我所知，该链接需要一个 onclick 监听器、一个 keydown 监听器、一个选项卡索引以及两个事件的防止默认。我尝试添加这些，但错误仍然存​​在。 Firefox 似乎专注于 anchor 链接内的图像，而不是链接本身，这是可点击的东西。

我正在 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

为了节省大量的解决方法和摆弄，最直接的解决方案是将图像包装在按钮中，而不是尝试使 anchor 表现得像按钮。

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

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

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

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>