如何以可访问的方式隐藏表格标题元素？

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标签只是为了可访问性，这意味着您不想在视觉上显示它；我建议不要使用它，而是在您的标签中使用 aria-label table，这将使屏幕阅读器可以访问它。

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

阅读本页的第一段以了解aria-label用法。

Answer 2

一些差异

<th><tr>作为父母需要有效

OP （原始帖子）代码中没有，这可能是跳过最后一个的原因。无效的 HTML 容易混淆VoiceOver等应用程序。 <tr><thead><tr>

三种方法

免责声明：未经测试 -买者自负

以下演示有三个<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也是一个选项，但在某些情况下被认为与（VoiceOveropacity: 0忽略）相同。visibility: hidden

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

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

   .collapsed {
     visibility: collapse;
   }
   

演示

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

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