html - 如何轻松隐藏表格标题元素？

Question

有没有什么方法可以在不破坏屏幕阅读器解释表格其余部分的方式的情况下轻松隐藏表格标题？隐藏 <caption>使用通常推荐的隐藏元素的样式会在视觉上破坏 VoiceOver 的行为，导致它在使用“下一个”击键线性阅读时跳过表格中的最后一行。 (可以通过显式向下导航列来强制 VoiceOver 进入最后一行，但这需要用户知道这样做。)

我认识到这可能是 VoiceOver 本身的一个错误，但如果有一个干净的解决方法，那将是理想的，因为 WCAG 需要使用实际可用的辅助技术进行访问。

这里有一个极简主义的例子来演示:

更新:下面的样式规则是 Magento 框架中使用的标准规则，用于在视觉上隐藏元素，同时让屏幕阅读器可以访问它们。导致 VoiceOver 行为的关键规则是 position: absolute ;但是，如果简单地删除它，布局流程就会受到影响。

caption {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

<table>
  <caption>Table of Fruits</caption>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

<p>Voiceover will jump straight from "Red" in prior table to this paragraph, skipping the last row.</p>

Answer 1

嗯...我看到你正在使用 caption标记只是为了可访问性，这意味着您不想在视觉上显示它；我建议干脆不要使用它，而是在你的 table 中使用 aria-label|标签，这将使屏幕阅读器可以访问它。

<table aria-label="Table of fruits"> ... </table>

阅读此 page 的第一段了解 aria-label用法。