3

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?

nmc
  • 8,724
  • 5
  • 36
  • 68
  • I was thinking along the lines of aria hidden, similar to http://stackoverflow.com/questions/10349987/how-to-notify-screen-readers-using-wai-aria-that-a-div-is-now-visible – Mark Robson Oct 31 '13 at 16:51
  • Wouldn't `background-color:transparent` do it? Not sure about the accessibility side. – Liam Oct 31 '13 at 16:53
  • You could have a transparent link in the cell. eg http://jsfiddle.net/LZrc5/1/ – Moob Oct 31 '13 at 17:06
  • @Moob While aesthetically the transparent link works, I tried that table with Chrome Vox and the link descriptions were not read out loud by the screen reader. – nmc Nov 01 '13 at 18:26
  • Setting the opacity to 0.001 may overcome this problem. I'm not familiar with Vox but some screen readers will interpret this as visible even though it's too faint to see. – Moob Nov 01 '13 at 19:14

2 Answers2

4

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I think this would work if I can just figure out how to make the link fill the cell with CSS. – nmc Oct 31 '13 at 20:24
  • 1
    A placeholder image solution to a question about web best practises in 2013? –  Mar 21 '14 at 02:05
1

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

Jean-nicolas
  • 51
  • 4
  • Wait, at the link you've provided, it clearly states "if content is ignored in Voice Over with the latest rule above, it is […] because of `overflow:hidden`. So you're making it *inaccessible*. – Volker E. Sep 11 '15 at 23:01