求助：页面加载时隐藏、JS点击显示的文本无法被屏幕阅读器读取

问题根源 #

仅通过修改visibility属性从hidden改为inherit，屏幕阅读器（如VoiceOver）可能无法监测到元素可见性的变化——CSS属性变更的感知优先级低于专门的无障碍属性。另外inherit值依赖父元素设置，存在隐性可见性隐患；而role=alert触发条件较严格（通常需要动态插入内容或元素从完全隐藏状态切换），所以未生效。

解决方案 #

采用无障碍属性+CSS可见性控制的组合方案，既符合WCAG规范，又能让屏幕阅读器正确识别内容变化：

1. 初始状态设置
   给目标div添加aria-hidden="true"明确标记元素不可见，同时用visibility:hidden控制视觉隐藏，再加上aria-live="polite"告诉屏幕阅读器监听该区域的变化：

   <button id="toggleBtn">显示文本</button>
   <div id="contentDiv" aria-hidden="true" aria-live="polite" style="visibility:hidden;">
     你的文本内容
   </div>
   

2. 点击按钮后的切换逻辑
   点击按钮时，同时更新CSS可见性和无障碍属性：

   document.getElementById('toggleBtn').addEventListener('click', function() {
     const contentDiv = document.getElementById('contentDiv');
     // 用visible代替inherit，确保元素自身可见，不受父元素影响
     contentDiv.style.visibility = 'visible';
     // 更新无障碍属性，明确告知屏幕阅读器元素已可见
     contentDiv.setAttribute('aria-hidden', 'false');
   });
   

关键说明 #

• aria-live="polite"：屏幕阅读器会在用户当前操作完成后（比如按钮点击结束）读取该区域内容，不会打断用户操作，适合非紧急的内容展示。
• aria-hidden：比单纯的CSS属性更直接地向屏幕阅读器传递元素可见状态，避免CSS属性变更监测不及时的问题。
• 避免用tabindex=0：非交互元素设置焦点会违反WCAG规范，干扰正常的焦点导航逻辑。

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