JavaScript 无障碍
JavaScript 无障碍是指订单控件能用键盘操作，并且状态变化会被读出来。本页使用真正的按钮。click 把可见的那一行设为 tea / regular。
这不是错误那一课
上一页抛出了 missing size。它的那一行是 caught / missing size。本页不使用 throw。控件留在页面上，结果写在看得见的地方。
使用按钮
<button type="button"> 会在鼠标点击、Enter 和 Space 时运行它的 click 监听。只监听 click 的 div 会忽略键盘。按钮上的文字就是人们听到的名称。
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
那一行变成 tea / regular。Enter 和 Space 运行同一个监听。
读出新的一行
textContent 会更新屏幕。屏幕阅读器可能漏掉一声不响的改动。aria-live="polite" 让它在当前句子之后说出新文字。
<p id="line" aria-live="polite">…</p>
改动会被读出，而且不打断当前句子。assertive 会打断。本页使用 polite。
没有 size 就禁用按钮
订单是 { drink: "tea" }，没有 size。把 button.disabled 设为 true。按钮仍然可见。click 监听不会运行。
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
按钮还在页面上，并且不会提交订单。不要删掉这个元素。
把焦点留在按钮上
按下按钮的人已经在那里。写好那一行，然后调用 button.focus()。不要调用 line.focus()，也不要藏起轮廓。
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
焦点留在按钮上。那一行不需要 tabindex。轮廓保持可见。
四个习惯
每一行都是这个订单控件的一个决定。
📊 无障碍订单控件
| 习惯 | 使用 | 避免 |
|---|---|---|
| 动作 | 带 type="button" 的 button |
只监听 click 的 div |
| 状态 | 行上的 aria-live="polite" |
无声替换文字 |
| 不可用 | button.disabled = true |
移除按钮 |
| 焦点 | button.focus() 和可见轮廓 |
line.focus() 或 outline: none |
按钮承担动作。实时行说出结果。disabled 留下一个不能运行的控件。轮廓标出焦点所在。
页面上的那一行
页面把一个按钮接到实时行上。不会抛出任何东西。
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
click 之后，那一行读作 tea / regular。Enter 和 Space 做同一件事。caught / missing size 属于错误那一课。
在柜台
- 点击按钮。那一行读作 tea / regular。
- 在同一个按钮上按 Enter。监听再次运行。
- 在那一行上放 aria-live="polite"，让新文字被读出。
- 没有 size 时，把 button.disabled 设为 true。按钮留着，click 不会运行。
- 成功的 click 之后调用 button.focus()。不要调用 line.focus()。
常见疏漏
div 上的 click 不是键盘控件。disabled 不等于删掉按钮。
- 用
div承担订单动作 - 改了那一行却忘了
aria-live size没有时把按钮删掉- 订单成功后调用
line.focus() - 藏起焦点轮廓
- 把那一行读成 caught / missing size
记住这些
button用鼠标、Enter 和 Space 运行订单动作aria-live="polite"读出tea / regular，并且不打断- 没有
size时button.disabled为true，按钮留在页面上 - 焦点留在按钮上
- 页面上的那一行是 tea / regular
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部