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

中的剪辑属性

.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

如何在表格单元格中实现隐形但可访问的链接？

2 个答案: