如何让辅助技术用户可以访问“添加到列表”模式？

Question

给出以下代码：

const form = document.getElementById("items-form");
const input = form.querySelector("input");
const list = document.getElementById("items-list");

function addItem(e) {
  e.preventDefault();

  const li = document.createElement("li");
  const id = Date.now(); // "random" id for the sake of demo
  li.id = id;
  li.innerHTML = `
<button onclick="document.getElementById(${li.id}).remove()">Remove</button>
<span>${input.value}</span>
`;
  list.appendChild(li);
}

form.onsubmit = addItem;

span {
  margin-left: 4px;
}

<form id="items-form">
  <input />
  <button>Add item</button>
</form>

<ul id="items-list"></ul>

目前，如果将某个项目添加到列表中，屏幕阅读器用户会体验到什么？他们会知道某个项目已添加、位于何处，并且可以选择删除它吗？如果没有，我该如何修改它以使其可供使用辅助技术的人使用？

Answer 1

“添加项目”按钮的标签看起来很清晰，因此屏幕阅读器肯定知道它的作用。

作为奖励，您可以使用 aria-live=polite 或 role=alert 弹出一条确认消息，告知“XYZ 已添加到列表中”。 通过使用其中之一，消息一出现在屏幕上就会自动被阅读。

这将向用户确认它有效，并且它不仅对屏幕阅读器用户有用。其他用户也将从中受益：

• 对于视力不佳的用户，如果他们无法立即看到该项目已准确添加到哪里
• 对于有认知障碍的用户来说，他们可能会害怕或怀疑自己的行为是否真的有效，或者仅仅刷新列表可能无法立即明白已经添加了

事实上，确认一切进展顺利并不是什么坏事。 不过，对于 WCAG，它是完全可选的。

---

对于你关于删除的第二个问题，乍一看，它看起来是有序的。 删除按钮就在目标项目后面，所以应该没问题。屏幕阅读器用户使用箭头键阅读列表，很快就会明白带有简洁但清晰的“删除”标签的按钮将删除前面的项目。

但是，如果您直接在按钮内部更改按钮的标签以清楚地指示要删除的项目，那么它会提高可访问性，特别是对于使用选项卡浏览可聚焦元素的屏幕阅读器用户。 所以，与其“删除”，不如精确地“删除 XYZ”。

否则，通过使用选项卡，而不阅读附近的文本，屏幕阅读器用户只会看到一系列“删除”按钮，但不知道哪个将删除什么。

根据 WebAim 调查，经验丰富的屏幕阅读器用户更多地使用箭头键和标题导航，而不仅仅是选项卡。所以精度并不是严格必要的。 但这会对初学者有所帮助，因为他们更倾向于使用选项卡作为第一个导航方法。

再次强调，增加精度不仅有助于屏幕阅读器用户。视力不佳的用户以及患有阅读障碍或认知障碍的用户，最终所有用户都将受益于更清晰的指示。

除了占用更多屏幕空间外，可能没有其他坏处。 如果空间确实是一个大问题，您可以使用视觉隐藏技术使精度只能由屏幕阅读器用户读取，并通过悬停时的工具提示将其加倍。

<button>Remove<span class="sr_only">&nbsp;XYZ</span></button>