Web无障碍适配：是否需用JavaScript切换aria-hidden属性？

好问题！这绝对是无障碍开发里容易踩坑的细节点，我来给你讲明白。

首先得明确aria-hidden的核心作用：它是给屏幕阅读器等辅助技术发信号的——“这个元素现在的状态是‘隐藏’，你不用把它读给用户听”。如果你的段落在视觉上明明已经显示出来了，但aria-hidden还挂着"true"，那屏幕阅读器就会直接跳过它，这就造成了「视觉用户能看到，但键盘/屏幕阅读器用户看不到听不到」的信息断层，完全违反了无障碍的基本原则。

那为什么CSS搞不定这个？因为CSS只能修改元素的样式（比如display、visibility这些），根本碰不到HTML属性——aria-hidden是HTML属性，CSS没权限改它。所以哪怕你用:hover让段落显示了，aria-hidden的值还是原地不动，辅助技术接收不到状态变化的信号。

结论：必须用JavaScript来同步切换aria-hidden #

你需要监听触发显示/隐藏的事件（不仅是鼠标移入移出，还要考虑键盘的focus/blur！毕竟很多无障碍用户不用鼠标），在元素显示时把aria-hidden设为false，隐藏时设回true。

举个简单的实现例子：

HTML结构 #

<input type="text" id="usernameInput">
<p id="usernameHint" aria-hidden="true" style="display: none;">用户名需要包含至少6个字符</p>

JavaScript代码 #

const input = document.getElementById('usernameInput');
const hintPara = document.getElementById('usernameHint');

// 处理鼠标交互
input.addEventListener('mouseenter', toggleHintVisible);
input.addEventListener('mouseleave', toggleHintHidden);

// 处理键盘交互（关键！别忽略键盘用户）
input.addEventListener('focus', toggleHintVisible);
input.addEventListener('blur', toggleHintHidden);

function toggleHintVisible() {
  hintPara.style.display = 'block';
  hintPara.setAttribute('aria-hidden', 'false');
}

function toggleHintHidden() {
  hintPara.style.display = 'none';
  hintPara.setAttribute('aria-hidden', 'true');
}

额外提醒 #

如果你的隐藏/显示用的是visibility: hidden或者opacity: 0（而不是display: none），辅助技术可能仍然会读取到这个元素——这时候aria-hidden的作用就更关键了，必须严格同步状态，避免用户听到“明明看不见的内容”。

总的来说，aria属性的核心就是准确反映元素的真实状态，辅助技术完全依赖这些属性来传递和视觉一致的信息。CSS负责视觉表现，JS负责同步无障碍属性，两者配合才能保证所有用户都能获取到完整的信息。

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