任务状态与温和反馈

这段代码解决什么问题

原生复选框表示“完成”这个布尔状态，标签让操作目标明确。完成数、文字徽标和删除按钮名称随任务状态变化；颜色和删除线只是辅助提示。

aria-live="polite" 的状态区域在初始 HTML 就存在，脚本随后更新其中的短句。它通常让辅助技术在合适的间隙报告变化，具体朗读由浏览器和辅助技术组合决定；本例不承诺每种设备都得到相同结果。

• 添加时用 createElement 和 textContent，不把任务文字拼成 HTML。
• 完成操作保持焦点在复选框；删除后移到邻近任务的复选框，清空时移回输入框。
• 无持久存储、无账号、无同步；可用作状态练习，不是团队待办服务。
• 任务数量上限和长度限制只用于这个小练习，生产系统仍需相应服务端校验。

关键片段

<p id="task-status" role="status"
  aria-live="polite" aria-atomic="true"></p>
// 更新已有状态区域，不移动完成操作的焦点
status.textContent = "已完成任务。当前完成 1 / 2 项。";
// 用户输入作为文字显示
nameNode.textContent = input.value.trim();

这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。

运行条件与源文件

解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 status-feedback.html。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。

关闭 JavaScript 仍可阅读本文和初始示例内容；动态操作按钮保留禁用状态或静态内容，不表示已运行交互。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。

本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。查看完整 MIT 许可 · 运行说明

进一步阅读

以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。

• MDN：aria-live 状态更新（在线参考，访问需网络）
• W3C：状态消息的理解（在线参考，访问需网络）
• MDN：Node.textContent（在线参考，访问需网络）