How to implement invisible but accessible link in a table cell?

Question

I'm trying to create a clickable empty table cell that is also accessibility friendly.

Use case: a table of a day's schedule with each cell representing a time slot. Where there is nothing in the cell, the time slot is available and should be clickable so that the time slot could be booked.

How do I implement this so that it's WCAG2.0 compliant?

Answer 1

If you are specifically thinking of blind people (as most web authors/designers who think about accessibility really are), then you can include e.g. a single-pixel transparent image with a descriptive alt text, say

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

with some CSS that makes the a element fill the td element visually.

But thinking wider, you could start from the question whether all sighted people will immediately understand that a blank cell means availability. Usually, when an empty cell is the problem, the solution consists of making it non-empty, somehow.

Answer 2

You can use the clip property from 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>

If you want more information about this technique go to :

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