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

Question

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

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

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

Answer 1

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

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

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

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

Answer 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