NVDA读取含input/select标签的表格时跳过单元格问题咨询

问题现象 #

点击表格“+”按钮新增行后，NVDA屏幕阅读器存在以下异常：

• 无法通过方向键单独聚焦带input/select的表格单元格，会直接跳过这些单元格
• 强制聚焦单元格时，会一次性读出整行所有内容
• 仅当表格包含输入类元素时触发该问题
• Tab键可正常导航输入控件，但方向键无法执行表格单元格的常规导航操作

原因分析 #

1. 动态DOM变更未被辅助技术识别：通过HTML字符串拼接生成表格行并插入DOM时，NVDA可能未及时感知到表格结构的更新，无法重新解析行列关系。
2. 布局CSS干扰表格语义：单元格内使用display:flex布局，破坏了表格原生的行列结构语义，导致NVDA无法正确识别单元格边界。
3. 语义属性缺失：原始表格未添加明确的ARIA角色属性，辅助技术对表格结构的识别依赖原生HTML语义，动态添加行后语义关联断裂。

解决方案 #

1. 改用原生DOM创建元素：避免HTML字符串拼接，通过原生API创建表格行和单元格，确保浏览器和辅助技术能正确识别元素的语义结构。
2. 调整单元格布局：替换display:flex为不破坏表格语义的布局方式（如inline-block）。
3. 增强表格ARIA语义：为表格、表头、表体添加明确的ARIA角色，辅助技术能更稳定地解析表格结构。
4. 添加动态内容通知：为表体设置aria-live="polite"，让辅助技术感知到动态行的添加，自动更新结构认知。

修改后的代码示例 #

JavaScript #

function addRow() {
  // 创建行元素
  const row = document.createElement('tr');

  // 构建第一列（input）
  const td1 = document.createElement('td');
  const input1 = document.createElement('input');
  input1.className = 'inp1';
  input1.name = 'inp1';
  td1.appendChild(input1);

  // 构建第二列（select）
  const td2 = document.createElement('td');
  const select1 = document.createElement('select');
  select1.className = 'sel1';
  select1.name = 'sel1';
  ['opt1', 'opt2'].forEach(text => {
    const opt = document.createElement('option');
    opt.textContent = text;
    select1.appendChild(opt);
  });
  td2.appendChild(select1);

  // 构建第三列（input）
  const td3 = document.createElement('td');
  const input2 = document.createElement('input');
  input2.className = 'inp2';
  input2.name = 'inp2';
  td3.appendChild(input2);

  // 构建第四列（select）
  const td4 = document.createElement('td');
  const select2 = document.createElement('select');
  select2.className = 'sel2';
  select2.name = 'sel2';
  ['opt3', 'opt4'].forEach(text => {
    const opt = document.createElement('option');
    opt.textContent = text;
    select2.appendChild(opt);
  });
  td4.appendChild(select2);

  // 构建第五列（操作按钮，替换flex布局）
  const td5 = document.createElement('td');
  const createBtn = (value, cls, name, handler) => {
    const div = document.createElement('div');
    div.style.display = 'inline-block';
    div.style.margin = '0 4px';
    const btn = document.createElement('input');
    btn.type = 'button';
    btn.value = value;
    btn.className = cls;
    btn.name = name;
    btn.addEventListener('click', handler);
    div.appendChild(btn);
    return div;
  };

  td5.appendChild(createBtn('+', 'inp3', 'inp3', addRow));
  td5.appendChild(createBtn('-', 'inp4', 'inp4', () => remRow(row)));
  row.appendChild(td5);

  // 组装行并插入表体
  row.append(td1, td2, td3, td4);
  document.getElementById('tbody1').appendChild(row);
}

function remRow(row) {
  // 推荐直接删除行而非隐藏，避免DOM冗余干扰语义
  row.remove();
  // 若需保留隐藏逻辑，可使用：row.style.display = 'none';
}

document.addEventListener('DOMContentLoaded', addRow);

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 增强表格语义识别 -->
<table role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" scope="col">col1</th>
      <th role="columnheader" scope="col">col2</th>
      <th role="columnheader" scope="col">col3</th>
      <th role="columnheader" scope="col">col4</th>
      <th role="columnheader" scope="col">col5</th>
    </tr>
  </thead>
  <tbody id="tbody1" role="rowgroup" aria-live="polite">
  </tbody>
</table>

关键修改说明 #

• 放弃HTML字符串拼接，改用原生DOM API创建元素，确保每个节点的语义被正确识别。
• 将单元格内的flex布局替换为inline-block，避免破坏表格原生的行列结构解析。
• 添加ARIA角色属性（role="table"、role="rowgroup"等）和scope属性，明确表格各部分的语义关系。
• 为表体设置aria-live="polite"，让NVDA能感知到动态行的添加，自动更新对表格结构的认知。
• 删除行时改用row.remove()，减少DOM冗余对辅助技术的干扰（若业务需保留隐藏逻辑，可恢复原代码）。

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