在Web无障碍开发场景中，NVDA作为主流的屏幕阅读器，默认会优先读取按钮的可见文本内容，但很多业务场景下需要让NVDA读取和可见文本不同的可访问名称，比如按钮可见文本是图标，需要播报具体的功能描述，或者可见文本是简写，需要播报完整的操作说明。
NVDA读取按钮名称的优先级规则
NVDA读取按钮的可访问名称时，会按照固定的优先级顺序获取内容，了解这个规则才能针对性调整配置：
- 第一优先级：
aria-labelledby属性指向的元素内容 - 第二优先级：
aria-label属性的值 - 第三优先级：按钮的
value属性（针对input类型按钮）或者按钮内部的可见文本内容 - 第四优先级：
title属性的值
设置按钮可访问名称的常用方法
1. 使用aria-label属性
当需要给按钮设置简短的可访问名称，且不需要关联页面其他元素时，直接使用aria-label是最简单的方式，该属性的值会直接作为NVDA读取的内容，不会显示在页面上。
<!-- 可见文本是图标，NVDA会读取aria-label的内容 -->
<button aria-label="提交订单">
<svg width="16" height="16">
<path d="M2 2h12v12H2z"/>
</svg>
</button>
2. 使用aria-labelledby属性
如果按钮的可访问名称需要复用页面上已有的其他元素内容，比如按钮的功能说明已经在旁边的提示文本中写了，就可以用aria-labelledby关联对应元素的id，NVDA会拼接所有关联元素的内容作为可访问名称。
<span id="btn-desc">确认删除当前选中的3条数据</span> <button aria-labelledby="btn-desc"> 删除 </button>
3. 使用视觉隐藏文本
如果需要让NVDA读取更长的描述，同时不想影响页面的视觉布局，可以使用视觉隐藏的类，把额外的可访问名称内容放在按钮内部，视觉上不显示但屏幕阅读器可以读取到。
/* 视觉隐藏样式，仅屏幕阅读器可读 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<button> 下一步 <span class="sr-only">，进入收货地址填写页面</span> </button>
常见错误与排查方法
如果设置后NVDA还是读取可见文本，可以先排查以下问题：
- 检查是否存在多个优先级更高的属性冲突，比如同时设置了
aria-label和aria-labelledby，会优先读取aria-labelledby的内容 - 检查
aria-labelledby指向的id是否存在，或者是否存在重复id的情况 - 检查按钮内部是否有隐藏的可见文本，比如用了
display:none的元素，NVDA不会读取display:none的内容
方法选择建议
不同场景下可以选择不同的方案：
| 场景 | 推荐方案 |
|---|---|
| 按钮可见文本是图标，需要简短功能描述 | aria-label |
| 可访问名称复用页面已有文本 | aria-labelledby |
| 需要长描述且不影响视觉布局 | 视觉隐藏文本 |