带z-index穿透输入框的对话框无障碍访问问题及方案咨询

首先，你说得没错——单纯靠z-index实现的穿透输入框方案确实不兼容屏幕阅读器。当屏幕阅读器识别到role="dialog"的元素时，它默认会把对话框当作模态容器，期望背景内容不可交互、不可访问。但你的方案里背景输入框仍能被键盘聚焦和屏幕阅读器读取，这会导致用户导航混乱，违背无障碍设计的核心原则。

不用修改所有输入框的前提下，我们可以通过调整ARIA语义和焦点管理来实现兼容无障碍的穿透效果，具体步骤如下：

核心思路 #

• 告诉屏幕阅读器当前对话框不是严格模态的，允许背景部分元素可访问；
• 对不需要穿透的背景元素进行无障碍隐藏，只保留目标输入框的可访问性；
• 完善焦点管理，确保键盘导航逻辑清晰，符合用户预期。

修改后的实现代码 #

<form id="mainForm">
  <div class="showThrough">
    <label>Input 1:</label><input/>
  </div>
  <div class="nonShowThrough">
    <label>Input 2:</label><input/>
  </div>
  <div class="showThrough">
    <label>Input 3:</label><input class="showThrough"/>
  </div>
  <input type="button" onclick="showDialog()" value="Show dialog" id="showDialogBtn"/>
  <input type="button" value="Submit"/>
  <div id="dialog" role="dialog" aria-modal="false" aria-labelledby="dialogTitle" class="layer" style="display: none;">
    <h3 id="dialogTitle">Dialog</h3>
    <input type="button" value="Close" onclick="hideDialog()" id="closeDialogBtn" style="position: absolute; bottom: 15px; right: 15px;"/>
  </div>
</form>

<style>
form > div { margin: 10px; }
.layer { margin: 0; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; }
.showThrough { position: relative; z-index: 1100; }
</style>

<script>
const dialog = document.getElementById('dialog');
const closeBtn = document.getElementById('closeDialogBtn');
const showBtn = document.getElementById('showDialogBtn');
const nonShowThroughElements = document.querySelectorAll('.nonShowThrough');
const showThroughInputs = document.querySelectorAll('.showThrough input');

function showDialog() {
  dialog.style.display = 'flex';
  
  // 1. 隐藏非穿透元素的无障碍访问性
  nonShowThroughElements.forEach(el => {
    el.setAttribute('aria-hidden', 'true');
    // 给可聚焦元素设置tabindex=-1，避免键盘聚焦
    el.querySelectorAll('input, button, select').forEach(control => {
      control.setAttribute('tabindex', '-1');
    });
  });
  
  // 2. 确保对话框内的关闭按钮获得焦点（无障碍最佳实践）
  closeBtn.focus();
  
  // 3. 监听Esc键关闭对话框
  document.addEventListener('keydown', handleEscKey);
  
  // 4. 监听穿透输入框的焦点，确保Esc仍能关闭对话框
  showThroughInputs.forEach(input => {
    input.addEventListener('keydown', handleEscKey);
  });
}

function hideDialog() {
  dialog.style.display = 'none';
  
  // 恢复非穿透元素的无障碍状态
  nonShowThroughElements.forEach(el => {
    el.removeAttribute('aria-hidden');
    el.querySelectorAll('input, button, select').forEach(control => {
      control.removeAttribute('tabindex');
    });
  });
  
  // 移除事件监听
  document.removeEventListener('keydown', handleEscKey);
  showThroughInputs.forEach(input => {
    input.removeEventListener('keydown', handleEscKey);
  });
  
  // 焦点回到触发按钮
  showBtn.focus();
}

function handleEscKey(e) {
  if (e.key === 'Escape') {
    hideDialog();
  }
}
</script>

关键细节解释 #

• aria-modal="false"：明确告诉屏幕阅读器这个对话框不是严格模态的，允许背景部分元素被访问；
• aria-hidden="true"：给非穿透元素添加这个属性后，屏幕阅读器会完全忽略这些元素及其子元素；
• tabindex="-1"：让原本可聚焦的非穿透控件无法通过Tab键访问，避免键盘导航混乱；
• 焦点管理：对话框打开时聚焦关闭按钮，关闭时回到触发按钮，同时支持Esc键关闭，符合用户的键盘操作习惯；
• 事件监听：确保即使焦点在穿透输入框中，按Esc键仍能关闭对话框，保持交互一致性。

为什么这个方案可行？ #

它没有改动输入框的DOM位置，只是通过ARIA属性和焦点控制，在视觉穿透的同时，给屏幕阅读器和键盘用户提供了清晰的导航逻辑——只有标记为.showThrough的输入框能被访问，其他背景内容会被无障碍系统忽略，完美平衡了视觉需求和无障碍要求。

内容的提问来源于stack exchange，提问作者Nils-o-mat