如何在表格单元格中实现不可见但可访问的链接？答案

【问题标题】：How to implement invisible but accessible link in a table cell?如何在表格单元格中实现不可见但可访问的链接？
【发布时间】：2013-10-31 16:45:31
【问题描述】：

我正在尝试创建一个可点击的空表格单元格，该单元格也易于访问。

用例：一天的日程表，每个单元格代表一个时间段。在单元格中没有任何内容的情况下，时间段是可用的并且应该是可点击的，以便可以预订时间段。

如何实现它以使其符合 WCAG2.0？

【问题讨论】：

我在考虑隐藏的咏叹调，类似于stackoverflow.com/questions/10349987/…
background-color:transparent 不会这样做吗？不确定可访问性方面。
你可以在单元格中有一个透明的链接。例如jsfiddle.net/LZrc5/1
@Moob 虽然透明链接在美学上有效，但我用 Chrome Vox 尝试了该表，但屏幕阅读器没有大声读出链接描述。
将不透明度设置为 0.001 可以解决这个问题。我对 Vox 不熟悉，但一些屏幕阅读器会将其解释为可见，即使它太微弱而无法看到。

标签： html accessibility wcag

【解决方案1】：

如果您特别考虑盲人（正如大多数真正考虑可访问性的网络作者/设计师一样），那么您可以包括例如带有描述性替代文字的单像素透明图像，比如

<td><a href=...><img alt=Available src=pixel1.gif width=1 height=1></a></td>

使用一些 CSS 使 a 元素在视觉上填充 td 元素。

但是从更广泛的角度考虑，您可以从所有有视力的人是否会立即理解空白单元格意味着可用性的问题开始。通常，当一个空单元格成为问题时，解决方案包括以某种方式使其非空。

【讨论】：

如果我能弄清楚如何让链接用 CSS 填充单元格，我认为这会起作用。
2013 年网络最佳实践问题的占位符图像解决方案？

【解决方案2】：

您可以使用 css 中的 clip 属性

.element-invisible { 
    position: absolute !important;
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px);
    font-size:1%;  /* ios */
}


<td><a class="element-invisible" href=...>bla bla bla</a></td>

如果您想了解有关此技术的更多信息，请访问：

http://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html

【讨论】：

等等，在您提供的链接中，它清楚地指出“如果内容在 Voice Over 中被上面的最新规则忽略，它是 [...] 因为overflow:hidden。所以你是使其无法访问。