第四章练习答案

语义、名称与键盘

使用原生 <button>、<a>、<label for> 和 <input>，Accessibility 面板应分别显示 button/link/textbox 角色和可见名称。把 <div> 加上 role="button" 并不会自动提供 Enter/Space 键盘行为；若没有额外键盘处理，应保留原生按钮。

原生语义与可访问名称

<label for="email">邮箱</label>
<input id="email" type="email" aria-describedby="email-error">
<p id="email-error" role="alert">请输入有效邮箱</p>

输入的可访问名称来自 label，错误说明通过 aria-describedby 关联。错误消失时同步移除错误文本或隐藏状态，不能只把视觉颜色改绿而保留旧的错误播报。

键盘焦点与操作顺序

对话框打开时保存触发按钮，设置 dialog.showModal() 后把焦点移到第一个可操作控件；关闭时调用 dialog.close() 并执行 trigger.focus()。Tab 顺序应是标题/输入/提交，不能通过正数 tabindex 重排整个页面；Escape 关闭后焦点必须回到触发器。

ARIA 状态与动态反馈

点击示例后，打开状态的断言是 toggle.getAttribute('aria-expanded') === 'true' 且 panel.hidden === false；关闭状态正好相反。只更新 aria-expanded 会产生假状态：读屏会说“展开”，视觉内容却仍隐藏。动态保存结果适合放在 role="status" 的 live region，重复的进度文本不应每次都播报。