progress标签原生具备可访问性，无需添加role="progressbar"；必须设置value和max属性，用indeterminate表示不确定进度；需通过label、aria-labelledby或aria-label提供上下文；仅在必要时添加tabindex和aria-live实现键盘交互与状态反馈。

progress标签本身已具备可访问性，别乱套role="progressbar"

HTML5原生标签自带语义和ARIA支持，浏览器会自动暴露aria-valuenow、aria-valuemin、aria-valuemax等状态，屏幕阅读器能直接读出“进度条，60%完成”。强行加role="progressbar"反而可能覆盖原生语义，导致重复播报或状态丢失。

只有两种情况才考虑手动用role="progressbar"：

• 你用
  模拟进度条（比如某些CSS-only方案），且无法改用
• 需要兼容极老环境（如IE9及以下），但此时也应优先降级为文本提示而非强行ARIA补救

必须显式设置value和max，不能只靠CSS控制视觉进度

仅用CSS宽度模拟进度（如width: 60%）对辅助技术完全不可见——它没有数值含义，屏幕阅读器读不出任何进度信息。原生的可访问性依赖真实属性值。

正确做法是：

• 始终提供value和max属性，哪怕初始值为0
• 动态更新时，只改value属性，不要只改style.width
• 若进度不确定（如加载中），用，而非设value=""或删掉value

错误示例：（缺value） → 屏幕阅读器报“进度条，值未知”

label关联不能省，尤其当进度条无相邻文字时

单独一个元素，即使有value，屏幕阅读器也可能只读“进度条，45%”，用户不知道这是“文件上传进度”还是“表单填写进度”。必须提供上下文。


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载

推荐方案（按优先级）：

• 用显式关联：文件上传进度
• 用aria-labelledby指向已有标题：

  第2步：正在处理数据

• 用aria-label（仅当无合适文本节点时）：

避免用title属性替代——它不被所有屏幕阅读器可靠支持，且无键盘焦点路径。

键盘交互和状态反馈容易被忽略

默认不可聚焦，也不响应键盘操作。如果进度条需要被用户主动关注（比如在多步骤流程中作为导航锚点），就得让它可聚焦并提供状态反馈。

关键动作：

• 加tabindex="0"使其可被Tab键聚焦
• 监听focus事件，用aria-live="polite"区域播报当前值（例如“当前进度：82%”），避免用户聚焦后听不到反馈
• 若支持手动调整（少见），需实现方向键（←→）微调，并同步更新value和aria-valuenow

注意：绝大多数进度条是只读状态展示，无需键盘操作；强行加交互反而增加认知负担。是否支持键盘，取决于实际使用场景，不是“为了无障碍而无障碍”。