关于同时使用aria-hidden="true"与aria-labelledby的技术疑问

核心结论 #

当元素设置aria-hidden="true"时，该元素会被屏幕阅读器完全从访问树中移除，包括它身上的aria-labelledby属性在内的所有ARIA属性都不会生效。屏幕阅读器不会读取这个元素的任何内容或属性，所以同时使用这两个属性的做法要么是错误，要么是代码未完成。

结合你的代码片段分析 #

你提供的课程代码里，其实存在两种不同的情况：

• 正确的用法：关闭按钮内的<span aria-hidden="true"></span>
  这个span是用来承载视觉化的关闭图标（比如×符号），但图标本身不需要被屏幕阅读器读取，所以用aria-hidden="true"隐藏它是合理的。而按钮本身通过aria-label="Close"给屏幕阅读器提供了清晰的操作说明，这部分符合可访问性规范。

• 未完成/待修正的代码：外层modal的aria-labelledby=""
  正常的模态框应该通过aria-labelledby关联模态框标题的唯一ID，比如：

  <div class="modal" id="#myModal{{student.id}}" tabindex="-1" aria-labelledby="modal-title-{{student.id}}">
    <!-- ... -->
    <h5 class="modal-title" id="modal-title-{{student.id}}">Modal title</h5>
    <!-- ... -->
  </div>
  

  这样屏幕阅读器打开模态框时，会读取标题内容，明确告知用户当前模态框的主题。你看到的空值aria-labelledby=""大概率是课程还没写完的临时状态，并非要和aria-hidden同时使用的错误写法。

总结 #

如果是某个元素同时设置了aria-hidden="true"和aria-labelledby，那确实是错误的，因为前者会完全屏蔽后者的作用。而你课程里的代码更可能是未完成的状态，创作者还没补全aria-labelledby对应的关联ID。

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