如何实现适配辅助技术的「添加到列表」无障碍模式？

当前屏幕阅读器用户的体验问题 #

现有代码存在多处无障碍缺陷，导致屏幕阅读器用户无法获得完整、清晰的操作体验：

• 无法感知新项添加：列表动态更新时没有触发辅助技术的通知机制，屏幕阅读器不会主动播报新增内容，用户完全不知道有新项被加入。
• 新项位置无提示：没有语义化说明新增项的位置（比如列表末尾），用户无法快速定位到新内容。
• 删除按钮语义模糊：删除按钮仅显示“删除”文本，没有上下文关联，屏幕阅读器用户无法知晓该按钮对应删除哪一项；且内联事件绑定的方式也不符合无障碍最佳实践。

代码修改方案 #

1. HTML 语义化与实时区域设置 #

给输入框添加关联标签，同时为列表设置aria-live实时区域，让辅助技术自动监听内容变化：

<form id="items-form">
  <label for="item-input">输入待添加项：</label>
  <input id="item-input" type="text" />
  <button type="submit">添加项</button>
</form>

<ul id="items-list" aria-live="polite"></ul>

• aria-live="polite"：表示辅助技术会在当前用户操作完成后，播报该区域的内容变化，不会打断用户流程。
• 输入框通过id与<label>绑定，屏幕阅读器能明确输入框的用途。

2. JavaScript 逻辑优化 #

移除内联事件，改用事件委托，同时为删除按钮添加上下文语义，确保每一步操作都能被辅助技术感知：

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

function addItem(e) {
  e.preventDefault();
  const itemText = input.value.trim();
  if (!itemText) return; // 过滤空内容

  const id = Date.now();
  const li = document.createElement("li");
  li.id = id;
  
  // 创建删除按钮并添加明确语义
  const removeBtn = document.createElement("button");
  removeBtn.textContent = "删除";
  removeBtn.setAttribute("aria-label", `删除 "${itemText}" 项`);
  removeBtn.addEventListener("click", () => li.remove());

  const itemSpan = document.createElement("span");
  itemSpan.textContent = itemText;
  itemSpan.style.marginLeft = "4px";

  li.append(removeBtn, itemSpan);
  list.appendChild(li);

  // 清空输入框并聚焦，提升连续操作流畅性
  input.value = "";
  input.focus();
}

form.addEventListener("submit", addItem);

• 替换内联onclick为addEventListener，代码更易维护且符合无障碍规范。
• 删除按钮添加aria-label，屏幕阅读器会播报“删除‘XXX’项”，而非仅“删除”，明确操作对象。
• 新增项后自动清空并聚焦输入框，符合连续添加的用户操作习惯。

3. CSS 增强可选 #

若需要提升视觉区分度，可添加列表项间距：

li {
  margin: 8px 0;
}
span {
  margin-left: 4px;
}

优化后的体验 #

• 屏幕阅读器会在新项添加后自动播报新增内容，用户能实时知晓列表变化。
• 删除按钮的作用清晰，用户明确知道操作对象。
• 输入框有明确的用途说明，降低操作认知成本。
• 连续添加操作更流畅，无需手动重复定位输入框。

内容的提问来源于stack exchange，提问作者James