HTML5中表格内外标题元素的层级顺序及解决方案咨询

根据HTML5规范，<th>元素内不允许嵌套标题元素，但这会导致表格周边内容影响标题映射，产生异常的层级顺序。

当表格的第二个<td>（对应Table topic 2）需要设置子标题时，按页面既有标题结构（上级为<h2>）应使用<h3>，但屏幕阅读器无法识别该<h3>为Table topic 2的子标题。

示例代码：

<h2>Lorum Ipsum</h2>
<p>Dolor sit amet, consectetur adipiscing elit.</p>

<table>
   <thead>
      <tr>
         <th>Table topic 1</th>
         <th>Table topic 2</th>
         <th>Table topic 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Lorum ipsum...</td>
         <td>
            Dolor sit amet...
            <h3>Table topic 2 Subheading</h3>
            Consectetur adipiscing elit...
         </td>
         <td>Donec malesuada congue...</td>
      </tr>
   </tbody>
</table>

解决方案：保持正确标题层级，用ARIA关联从属关系 #

既不要强行改用<h4>，也不要只单独用<h3>，正确的做法是保留<h3>的层级，通过ARIA属性明确子标题与表格列标题的从属关系：

1. 给对应的<th>设置唯一id，用于标识表格列标题
2. 给<h3>添加aria-labelledby属性，关联到该id，让辅助技术识别两者的从属关系

修改后的代码：

<h2>Lorum Ipsum</h2>
<p>Dolor sit amet, consectetur adipiscing elit.</p>

<table>
   <thead>
      <tr>
         <th>Table topic 1</th>
         <th id="table-topic-2">Table topic 2</th>
         <th>Table topic 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Lorum ipsum...</td>
         <td>
            Dolor sit amet...
            <h3 aria-labelledby="table-topic-2">Table topic 2 Subheading</h3>
            Consectetur adipiscing elit...
         </td>
         <td>Donec malesuada congue...</td>
      </tr>
   </tbody>
</table>

为什么不选其他方案？ #

• 改用<h4>：会破坏页面整体标题的语义层级，标题层级应反映内容的逻辑关系，而非为适配表格结构强行降级，这会让依赖标题导航的用户产生误解。
• 仅用<h3>不加ARIA：屏幕阅读器会将其识别为<h2>的直接子标题，无法关联到对应的表格列标题，导致辅助导航时逻辑混乱。

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