网页中 progress 元素如何通过 label 标签提供可访问名称
网页中 progress 元素必须配合 label 标签才能被屏幕阅读器正确识别。
progress 元素的可访问性要求
网页中 progress 元素用于显示任务完成进度，但浏览器默认不会将其内容作为可访问名称。MDN 文档指出，文本内容仅作为旧浏览器的后备方案，屏幕阅读器通常不会将其读出。为了确保可访问性，必须使用 label 元素或 ARIA 属性为进度条提供明确的名称。如果缺少可访问名称，屏幕阅读器用户无法理解进度条所代表的任务内容。
MDN 规范说明，progress 元素属于标签化内容类别，这意味着它应该与 label 元素关联。在大多数情况下，应使用 label 元素包裹 progress 元素，或者使用 label 的 for 属性与 progress 的 id 属性进行关联。这种做法符合无障碍设计原则，能够帮助辅助技术准确识别进度条的状态和用途。
使用 label 标签的正确嵌套方式
最直接的可访问性实现方式是将 label 元素作为 progress 元素的父元素。MDN 示例展示了这种用法，例如在文件上传场景中，将标签文本与进度条放在同一个 label 标签内。这种方式不仅提供了可访问名称，还使得整个区域成为可点击的交互元素，提升了用户体验。需要注意的是，标签文本应清晰描述进度条所代表的任务，例如“文件上传进度”或“数据同步状态”。
另一种实现方式是使用 label 的 for 属性与 progress 的 id 属性建立关联。这种方式适用于标签文本需要放置在进度条外部的情况。例如，可以在表单布局中先放置标签文本，然后通过 id 属性将 label 与 progress 元素连接。无论采用哪种方式，都必须确保标签文本与进度条内容紧密相关，避免使用模糊或通用的描述。
验证可访问性实现的检查步骤
要验证 progress 元素的可访问性实现是否正确，可以使用浏览器的开发者工具或无障碍测试工具。首先，检查 HTML 结构是否包含 label 元素或 ARIA 属性。然后，使用屏幕阅读器浏览页面，确认进度条被正确读出，并且读出的内容与标签文本一致。如果屏幕阅读器仅读出“进度条”或“进度”，而没有提供上下文信息，则说明可访问名称缺失。
还可以通过检查 DOM 树和 ARIA 属性来验证实现。MDN 文档提到，progress 元素隐式具有 role=progressbar 的 ARIA 角色。如果使用了 label 元素，可以检查 aria-labelledby 或 aria-label 属性是否正确设置。如果未使用 label 元素，则应确保 aria-label 属性提供了足够的描述信息。验证时，应确保没有其他元素干扰了可访问名称的传递。
避免常见的可访问性错误
在实现 progress 元素的可访问性时，常见的错误包括仅依赖标签内的文本内容或忽略 ARIA 属性。MDN 明确指出，标签内的文本内容不是可访问名称，仅作为后备方案。因此，即使标签内有文本，也必须使用 label 元素或 ARIA 属性进行显式标记。此外，不应在 progress 元素内部嵌套其他 progress 元素，因为规范禁止在 progress 的后代中出现另一个 progress 元素。
另一个错误是使用不相关的标签文本。例如，将进度条标签设置为“提交按钮”或“保存文件”，而实际上进度条用于显示加载状态。这种错误会导致用户误解进度条的功能。正确的做法是确保标签文本与进度条的实际用途一致，例如“加载中”或“处理完成”。通过遵循这些规范，可以确保 progress 元素在所有浏览器和辅助技术中都能正常工作。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。