WAVE无障碍检测报空按钮错误，符合WCAG 2.0 Level AA标准如何修复

你收到空按钮报错的核心原因是原生<button>属于默认可交互语义元素，仅添加role="presentation"无法完全移除其原生交互语义，且按钮无任何可被辅助技术识别的有效文本内容，title="none"属性对无障碍识别无正向作用，屏幕阅读器无法解析该按钮的用途。

可选择的修复方案，按实际使用场景选择： #

场景1：该按钮为禁用/隐藏状态，不需要被辅助技术识别、也不需要响应键盘焦点 #

• 新增aria-hidden="true"属性告知辅助技术完全忽略该元素，同时新增tabindex="-1"移除其键盘可聚焦能力，可移除无效的role="presentation"和title="none"属性，修改后代码如下：

<button type="button" class="owl-prev disabled h-hidden" aria-hidden="true" tabindex="-1">

如果该按钮是永久废弃不需要使用的，直接删除整段代码即可彻底解决报错。

场景2：该按钮为轮播控制功能按钮，仅当前状态为禁用，后续会启用可交互 #

需要给按钮添加有效无障碍名称，不需要再添加role="presentation"，可选两种实现方式：

• 方式1：添加屏幕阅读器专属可见文本（不影响视觉布局）
  给按钮内部插入仅辅助技术可识别的文本节点，配套全局通用的视觉隐藏样式即可：

<button type="button" class="owl-prev disabled h-hidden">
  <span class="sr-only">上一张轮播图</span>
</button>

sr-only类的通用样式可实现视觉隐藏但保留屏幕阅读器识别能力，不会影响原有页面布局

• 方式2：直接添加aria-label属性（改动最小）
  直接给按钮标签添加aria-label属性声明按钮用途：

<button type="button" class="owl-prev disabled h-hidden" aria-label="上一张轮播图">

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