WCAG 2.1网页无障碍：非交互元素的title属性问题

为什么会触发警告？ #

WCAG 3.3.2要求所有用户都能获取到必要的标签或说明，而非交互元素（比如<div>）上的title属性存在访问性缺陷：

• 键盘用户完全看不到title内容（只有鼠标悬停时才会显示）；
• 不是所有屏幕阅读器都会读取非交互元素的title，就算读取，也可能被用户的阅读器设置忽略；
• 检测工具会默认你可能用title传递重要信息，但这些信息无法覆盖所有用户群体，因此触发警告。

加了aria-label为什么还会有警告？ #

工具的警告是针对非交互元素上存在title属性这件事本身，和你是否添加aria-label无关。而且同时存在title和aria-label，还可能导致部分屏幕阅读器重复读取内容，反而影响体验。

解决办法 #

1. 直接移除title属性：既然你已经用aria-label补充了信息，title完全是冗余且有问题的属性，删掉即可消除警告。
2. 优先用语义化HTML替代aria-label：<div>本身没有语义，如果这个容器是用来标识某个准则区块，更推荐换成<section>，并在内部添加可见的标题元素（比如<h2>），这样所有用户（视觉、屏幕阅读器、键盘用户）都能清晰获取信息，比aria-label更符合WCAG的语义化要求。

修改后的代码示例：

<section class="criterion_secion" id="criterion_214">
  <h2>Success Criterion '2.1.4 Character Key Shortcuts'</h2>
  ...
</section>

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