如何用<strike>标签实现表格整行删除线并兼顾无障碍？

直接用<strike>（HTML5已废弃，推荐用<s>或<del>）包裹<tr>无效，因为HTML规范限制<tr>的父元素只能是表格相关容器（<table>/<thead>/<tbody>等），无效嵌套会被浏览器忽略。纯CSS的text-decoration: line-through只有视觉效果，无语义，无法被无障碍工具识别，所以推荐以下语义化方案：

方案1：用<s>或<del>包裹每个单元格内容 #

这两个都是HTML语义化标签，能被屏幕阅读器识别为“已失效/已删除”内容，同时实现视觉删除线效果：

示例代码（给第二行添加删除线） #

<table>
  <tr>
    <td>正常行</td>
    <td>正常内容</td>
  </tr>
  <!-- 需要添加删除线的行 -->
  <tr aria-label="此行内容已不再有效">
    <td><s>已失效行</s></td>
    <td><s>失效内容</s></td>
  </tr>
</table>

标签选择说明 #

• <s>：适用于不再相关或过时的内容（比如下架商品、过期信息），屏幕阅读器会提示“删除的文本”。
• <del>：适用于被主动删除的内容（比如数据修订、移除的条目），语义更明确，屏幕阅读器会提示“已删除的文本”。

方案2：结合ARIA属性增强无障碍提示 #

如果觉得逐个单元格包裹标签麻烦，可给目标行添加aria-deleted="true"属性，同时配合CSS视觉效果，但仍需保留语义化标签保障无障碍识别：

<style>
  .deleted-row td {
    text-decoration: line-through;
  }
</style>
<table>
  <tr>
    <td>正常行</td>
    <td>正常内容</td>
  </tr>
  <tr class="deleted-row" aria-deleted="true">
    <td><s>已删除行</s></td>
    <td><s>删除内容</s></td>
  </tr>
</table>

这里的CSS只是辅助视觉，核心的语义识别还是靠<s>标签和ARIA属性，确保无障碍工具能正确解读。

关键注意点 #

1. 不要用废弃的<strike>标签，HTML5已用<s>/<del>替代，兼容性更好且语义更清晰。
2. 纯CSS方案无法提供语义信息，必须结合语义化HTML标签才能满足无障碍要求。
3. ARIA属性是增强手段，不能替代语义化标签，两者搭配使用能最大化兼容性。

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