如何可以隐藏表格标题元素？

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

A Few Discrepancies

<th> Needs <tr> as a Parent to be Valid

OP（原始邮政）代码在<tr>中没有<thead>，这可能是为什么跳过最后一个<tr>的原因。无效的HTML会混淆VoiceOver等应用程序。

---

三种方法

Disclaimer: Not Tested - Caveat Emptor

以下演示有三个<table>s，它们具有相同的HTML标记，CSS规则和文本内容。每个<caption>有一个不同的.class采用一种隐藏内容的特定方法：

1. .clipped - 假设裁剪内容需要一个长度：clip: rect(0, 0, 0, 0);看起来很可疑。其他一些属性和值看起来也是临时的，所以尝试用以下代码替换caption {...}规则集：

   .clipped {
     position: absolute !important;
     height: 1px; 
     width: 1px; 
     overflow: hidden;
     clip: rect(1px, 1px, 1px, 1px);
   }  

2. .transparent - 这只是为文本指定透明色。高度仍然存在（VoiceOver需要），但如果需要可以调整。 opacity: 0也是一种选择，但在某些情况下，opacity: 0被认为与visibility: hidden（VoiceOver忽略）相同。

   .transparent {
     color: rgba(0, 0, 0, 0);
   }  

3. .collapsed - 这会折叠元素的内容但保留其高度，以便VoiceOver可以识别它。

   .collapsed {
     visibility: collapse;
   }

---

演示

table {
  border: 1px solid #000;
  table-layout: fixed;
  border-collapse: collapse;
  min-width: 200px;
}

th,
td {
  width: 50%;
  border: 1px solid #000;
}

.clipped {
  position: absolute !important;
  height: 1px; 
  width: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.transparent {
  color: rgba(0, 0, 0, 0);
}

.collapsed {
  visibility: collapse;
}

<table>
  <caption class='clipped'>CAPTION</caption>
  <thead><tr><th>TH</th><th>TH</th></tr></thead>
  <tbody><tr><td>TD</td><td>TD</td></tr>
  <tr><td>TD</td><td>TD</td></tr></tbody>
</table>

<table>
  <caption class='transparent'>CAPTION</caption>
  <thead><tr><th>TH</th><th>TH</th></tr></thead>
  <tbody><tr><td>TD</td><td>TD</td></tr>
  <tr><td>TD</td><td>TD</td></tr></tbody>
</table>

<table>
  <caption class='collapsed'>CAPTION</caption>
  <thead><tr><th>TH</th><th>TH</th></tr></thead>
  <tbody><tr><td>TD</td><td>TD</td></tr>
  <tr><td>TD</td><td>TD</td></tr></tbody>
</table>

<p>The <abbr title="Original Post"><b>OP</b></abbr> code didn't have a <code>&lt;tr&gt;</code> in the <code>&lt;thead&gt;</code> which could be the reason why the last <code>&lt;tr&gt;</code> is being skipped.</p>

Answer 2

嗯...我发现你使用caption标签仅仅是为了可访问性，这意味着你不想在视觉上显示它;我建议不要使用它，而是在你的table标签中使用aria-label，这将使屏幕阅读器可以访问它。

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

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