如何自定义基于Div实现的表格的无障碍阅读器朗读内容

要完全控制屏幕阅读器聚焦单元格时的朗读内容，替换默认的英文列位置提示（如"Column 3 of 3"）为中文表述（如"第三列，共三列"），可以通过以下两种方式实现：

一、手动设置单个单元格的朗读内容 #

直接给每个role="cell"的元素添加aria-label属性定义自定义朗读文本，同时将单元格内的原始内容标记为aria-hidden="true"，避免重复朗读。

示例修改后的表头单元格代码：

<div colspan="1" role="cell" aria-label="First Name，第一列，共三列">
  <div aria-hidden="true">
    <div><span>First Name</span></div>
  </div>
</div>

示例修改后的内容单元格代码：

<div role="cell" aria-label="John，第一列，共三列">
  <div aria-hidden="true">
    <div>
      <div>John</div>
    </div>
  </div>
</div>

二、JavaScript批量处理（高效方案） #

如果表格行数较多，手动修改效率低，可以用JS动态计算每个单元格的位置，批量设置自定义朗读内容：

// 获取表格容器
const tableContainer = document.querySelector('[role="table"]');
// 获取表格内所有行
const tableRows = tableContainer.querySelectorAll('[role="row"]');
// 获取总列数（取第一行的单元格数量）
const totalColumnCount = tableRows[0]?.querySelectorAll('[role="cell"]').length || 0;

// 遍历每一行处理单元格
tableRows.forEach(row => {
  const cells = row.querySelectorAll('[role="cell"]');
  cells.forEach((cell, columnIndex) => {
    // 获取单元格的文本内容
    const cellContent = cell.textContent.trim();
    // 计算当前列的序号（从1开始计数）
    const currentColumn = columnIndex + 1;
    // 设置自定义的朗读文本
    cell.setAttribute('aria-label', `${cellContent}，第${currentColumn}列，共${totalColumnCount}列`);
    // 隐藏原始内容的屏幕阅读器朗读
    const contentInner = cell.querySelector('div');
    if (contentInner) {
      contentInner.setAttribute('aria-hidden', 'true');
    }
  });
});

核心原理 #

屏幕阅读器对带有role="cell"的元素会自动生成默认的位置提示文本，通过aria-label可以完全覆盖这一默认朗读内容；同时使用aria-hidden="true"隐藏原始内容的文本节点，避免屏幕阅读器重复读取内容和自定义提示。

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