本文详解如何在保持语义正确性的前提下，既清晰标识按钮功能（如“更改时间周期”），又准确向屏幕阅读器传达其当前值（如“3天”），避免 aria-label 覆盖可见文本导致信息丢失。
本文详解如何在保持语义正确性的前提下，既清晰标识按钮功能（如“更改时间周期”），又准确向屏幕阅读器传达其当前值（如“3天”），避免 `aria-label` 覆盖可见文本导致信息丢失。
在构建可访问的交互控件时，一个常见误区是将“操作触发器”与“状态展示器”强行合并到单个 <button> 元素中——例如一个显示“3天”并点击后弹出时间选择对话框的按钮。虽然视觉上简洁，但该设计违背了 HTML 语义原则：<button> 的核心职责是触发动作，而非呈现动态状态值。若直接使用 aria-label="Time period"，会完全屏蔽按钮内文本（如 "3 days"），导致屏幕阅读器用户无法感知当前选中值；而仅依赖可见文本又缺乏对控件功能的明确说明。
✅ 正确解法是语义分离 + 逻辑关联：将“值显示”与“操作按钮”拆分为两个独立但语义关联的 DOM 元素。推荐结构如下：
<p id="time-period-display">时间周期：3天</p> <button aria-describedby="time-period-display"> 更改时间周期 </button>
此处：
- <p> 元素以自然语言清晰呈现当前状态（支持动态更新），并通过 id 提供锚点；
- <button> 保留其本质语义（可聚焦、可激活），其 aria-describedby 属性显式引用状态容器的 id，使屏幕阅读器在聚焦按钮时自动播报：“更改时间周期，按钮，时间周期：3天”。
⚠️ 注意事项：
- 避免滥用 aria-label 或 aria-labelledby：前者会完全覆盖按钮文本，后者若指向纯值容器（无功能描述），易造成“值即功能”的认知混淆；
- 确保状态同步：JavaScript 更新时间值时，必须同时修改 <p> 内容（而非按钮文本），以维持语义一致性；
- 兼容性提示：aria-describedby 描述默认启用，但部分屏幕阅读器允许用户关闭“描述性提示”。因此，务必保证状态文本本身具备上下文可读性（如含“时间周期：”前缀），使其即使被单独浏览也能被理解；
- 增强体验（可选）：可为 <p> 添加 role="status" 或 aria-live="polite"（若值频繁变化），实现值更新后的主动播报。
总结而言，可访问性不是堆砌 ARIA 属性，而是回归语义本质——用正确的元素承载正确的职责，并通过标准化属性建立清晰的逻辑关系。这种分离设计不仅满足 WCAG 4.1.2（名称、角色、值）要求，更提升了所有用户（包括键盘导航者、语音控制用户）的操作确定性与信息透明度。
