如何为HTML按钮列表添加符合WCAG标准的无障碍描述？

最优实现方案 #

核心逻辑是利用单个ID可被多个aria-describedby重复引用的特性，既避免内容冗余，又完全符合WCAG规范，兼容所有主流读屏器。
具体实现逻辑：

• 拆分尾注为独立语义节点，分别分配唯一ID，所有同等级的标记按钮都复用同一个描述ID，无需重复写描述内容
• 按钮内的星号标记添加aria-hidden="true"，避免读屏器播报无意义的星号字符
• 将aria-describedby直接加在可聚焦的<button>元素上，规避不可聚焦元素上的属性兼容问题
• 尾注内容保留可视展示，同时对读屏器友好

示例代码

<!-- 可选：列表前增加可视提示，适合视觉用户快速了解标记规则 -->
<p>列表标记说明：*代表重要元素，**代表非常重要元素，完整说明见文末</p>

<ul>
  <li><button aria-describedby="note-very-important">Element <span aria-hidden="true">**</span></button></li>
  <li><button>Element</button></li>
  <li><button aria-describedby="note-important">Element <span aria-hidden="true">*</span></button></li>
  <li><button>Element</button></li>
  <li><button aria-describedby="note-important">Element <span aria-hidden="true">*</span></button></li>
  <li><button aria-describedby="note-important">Element <span aria-hidden="true">*</span></button></li>
  <li><button aria-describedby="note-very-important">Element <span aria-hidden="true">**</span></button></li>
  <li><button>Element</button></li>
  <li><button>Element</button></li>
  <li><button aria-describedby="note-important">Element <span aria-hidden="true">*</span></button></li>
  <li><button aria-describedby="note-very-important">Element <span aria-hidden="true">**</span></button></li>
</ul>

<!-- 尾注部分 -->
<div role="note" aria-label="列表标记说明">
  <p id="note-important">* - 重要元素</p>
  <p id="note-very-important">** - 非常重要的元素</p>
</div>

方案优势

1. 完全合规：不存在<button>内嵌套<a>的非法结构，符合HTML语义规范
2. 无冗余内容：所有同类型标记共享同一份描述文本，仅需声明1次
3. 兼容性好：aria-describedby加在可聚焦的按钮元素上，所有主流浏览器和读屏器（NVDA、VoiceOver、JAWS）均可正常播报
4. 全用户覆盖：视觉用户可以直观看到星号和尾注规则，读屏用户聚焦按钮时会自动播报对应的重要程度说明

内容的提问来源于stack exchange，提问作者InternatZiomal