当按钮既需要触发动作又需显示动态值时，直接使用 `aria-label` 会覆盖文本内容，导致屏幕阅读器无法读取当前值。最佳实践是将动态值作为独立dom元素，并通过 `aria-describedby` 关联至按钮，确保屏幕阅读器用户能同时获取按钮功能和相关信息，但需注意用户可能禁用描述性内容。
在现代Web应用中，我们经常会遇到这样一种ui模式：一个按钮不仅用于触发某个操作（例如，打开一个时间周期选择对话框），而且其文本内容会根据用户的选择动态更新（例如，从“选择时间周期”变为“3 天”或“1 周”）。这种设计在视觉上很直观，但在可访问性方面却可能带来挑战。
按钮语义与常见的无障碍性陷阱
html的 <button> 元素从设计之初就承载着执行动作的语义。它的主要职责是响应用户的点击或激活事件，而非作为显示动态状态或值的容器。当我们将一个按钮同时用于触发动作和显示动态值时，很容易陷入无障碍性陷阱。
一个常见的问题是，为了给按钮提供一个清晰的标签，开发者可能会尝试使用 aria-label 属性，例如 aria-label=”时间周期”。然而，aria-label 的优先级高于元素的视觉文本内容。这意味着，如果按钮的视觉文本是“3 天”，但同时设置了 aria-label=”时间周期”，屏幕阅读器将只会宣布“时间周期”，而完全忽略了“3 天”这个重要的当前值。这导致依赖屏幕阅读器的用户无法得知当前已选择的时间周期，从而影响用户体验和信息获取的完整性。
最佳实践：分离动作与动态值
解决上述问题的核心在于理解并遵循按钮的语义：按钮应专注于其动作。动态显示的值应该作为独立的DOM元素存在。然后，我们可以通过 aria-describedby 属性将这个值与按钮关联起来，从而为屏幕阅读器用户提供全面的信息。
实现方法
- 将动态值置于独立元素中： 创建一个独立的html元素（例如 <p> 或 <span>）来承载动态更新的值。这个元素应该具有一个唯一的 id。
- 按钮链接描述元素： 在按钮元素上，使用 aria-describedby 属性，并将其值设置为上述独立元素的 id。
示例代码：
<!-- 承载动态值的独立元素 --> <p id="currentTimePeriod">当前时间周期: 3 天</p> <!-- 执行动作的按钮，通过 aria-describedby 关联动态值 --> <button aria-describedby="currentTimePeriod">更改时间周期</button>
屏幕阅读器用户体验
当屏幕阅读器用户通过Tab键导航到上述按钮时，他们通常会听到类似这样的播报：
“更改时间周期，按钮，当前时间周期: 3 天”
通过这种方式，屏幕阅读器用户能够清晰地获取到两方面的信息：
- 按钮的动作： “更改时间周期”明确了按钮的功能。
- 关联的动态值： “当前时间周期: 3 天”提供了当前选定的状态信息。
这确保了用户在不牺牲任何关键信息的前提下，能够理解UI的整体功能和当前状态。
注意事项与最佳实践
- aria-describedby 的特性： aria-describedby 提供的文本被视为元素的“描述”或“提示”。部分屏幕阅读器用户可能会选择在其设置中禁用描述性内容的播报，以减少冗余信息。在这种情况下，他们可能不会直接听到时间周期值。
- 用户导航： 即使描述被禁用，用户仍然可以通过屏幕阅读器的其他导航命令（例如，按箭头键浏览DOM）来找到包含时间周期值的独立元素。然而，aria-describedby 提供的是最直接和便捷的访问方式。
- 语义优先： 始终优先使用语义化的HTML元素。只有当原生HTML无法满足特定的可访问性需求时，才考虑使用ARIA属性。在本例中，将动态值从按钮中分离出来本身就是一种语义上的改进。
- 全面测试： 在不同浏览器和主流屏幕阅读器（如NVDA、JAWS、VoiceOver）上进行充分的测试至关重要，以确保实际的用户体验符合预期。
总结
通过将按钮的动作与动态显示的值进行逻辑分离，并利用 aria-describedby 属性进行关联，我们可以显著提升界面的可访问性。这种方法不仅遵循了Web可访问性标准，也为所有用户，特别是依赖辅助技术的用户，提供了更清晰、更完整的信息，从而构建出更包容、更易用的Web应用。