Search code examples
htmlaccessibilitywcag

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

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?

Solution

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