如何可访问地隐藏表格标题元素？

Posted 2023-02-19

【中文标题】如何可访问地隐藏表格标题元素？

【英文标题】：How to accessibly hide table caption element?

【发布时间】：2019-07-19 11:49:10

【问题描述】：

有什么方法可以在不破坏屏幕阅读器对表格其余部分的解释方式的情况下轻松隐藏表格标题？使用通常推荐的隐藏元素样式隐藏<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>

【问题讨论】：

这对我来说适用于 chrome

@soulshined 你还在用 VoiceOver 吗？

【参考方案1】：

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

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

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

【讨论】：

这似乎不是 WCAG 接受的方法，即使它有效。我的问题是 SonarQube 的 WCAG 规则对此有所抱怨。

SonarScan 现在至少在 IDE 扫描中接受 aria-label,。

【参考方案2】：

一些差异

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

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

---

三种方法

免责声明：未经测试 - Caveat Emptor

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

.clipped - 假设剪辑内容需要长度：clip: rect(0, 0, 0, 0); 看起来很可疑。其他一些属性和值看起来也是临时的，因此请尝试将 caption ... 规则集替换为：

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

.transparent - 这只是为文本分配透明颜色。高度仍然存在（VoiceOver 需要），但可以根据需要进行调整。 opacity: 0 也是一个选项，但在某些情况下，opacity: 0 被视为与 visibility: hidden 相同（VoiceOver 会忽略）。

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

.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>

【讨论】：

谢谢。原文中<tr> 的省略只是将最小示例放在一起时的一个意外。原来的情况下，它应该有<tr>。

关于样式，实际上导致问题的关键规则是position: static。对于 VoiceOver 上的相同效果，其余部分确实可以消除。作为参考，我展示的样式块是 Magento 框架中用于隐藏可见文本以使屏幕阅读器仍然可用的标准规则。稍后我将测试示例，但要求是标题完全不影响可见布局，因此仅使文本透明是行不通的。

"...但要求标题完全不影响可见布局，因此仅使文本透明是行不通的。” 文本最少修改了所有方法（包括您的代码）。与color: red 相同。单击第二个表格上方并选择 -- 您应该会看到突出显示的文本。

在您的第二个和第三个示例中，即使不可见，也为标题保留了空间。这就是我所说的影响可见布局的意思。当我问是否有任何方法可以“方便地隐藏”它时，我的意思是以一种在视觉上完全没有影响的方式隐藏它，包括间距，但仍然让屏幕阅读器可以使用它。

为了记录，我刚刚用 VoiceOver 进行了测试。您的建议 #1（“已剪辑”）仍然与我最初提到的 VoiceOver 存在相同的问题。您的建议 #2（“透明”）和 #3（“折叠”）确实避免了 VoiceOver 问题，但它们不符合我在上一条评论中提到的“视觉隐藏”的条件。

【参考方案3】：

由于position: absolute; 是导致问题的原因，实用的解决方案是跳过它并改用margin-top: -1px;。经过 Chrome + 画外音测试和验证。

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

【参考方案4】：

我对此讨论有点晚了，但有一个尚未提及的解决方案。

您可以在表格元素上使用摘要属性。 summary 属性不会影响您的布局，但会被屏幕阅读器读取。

如果您使用标题元素或 aria-label 属性，它们将覆盖摘要属性。所以只需要单独使用摘要。

<table summary="Table of Fruits">

【讨论】：

如果您使用的是 HTML 4，则可以使用 summary 属性，但在 HTML 5 中，该属性已被弃用。见html.spec.whatwg.org/multipage/obsolete.html#attr-table-summary