4

I have a data table that looks like this:

<table><thead>
<tr>
<th><input type="checkbox" /></th>
<th scope="col">Foo</th>
<th scope="col">Bar</th><tr>
</thead>
<tbody>
<tr><td><input type="checkbox" /></td><td scope="row">a</td><td>b</td></tr>
<tr><td><input type="checkbox" /></td><td scope="row">c</td><td>d</td></tr>
</tbody></table>

I want the checkbox in the header to select all the checkboxes in the body. I've written the Javascript to do the select and it works fine. However, in IE7 and IE8 (maybe other browsers, but we're not required to support anything else), the checkbox in the header never gets tab focus, so we're failing 508.

Is there a way to handle this without setting tabindexes on everything?

Jon Renaut
  • 127
  • 2
  • 12
  • Have you tried assigning a JS event handler to the header checkboxes? – khaverim Nov 27 '12 at 16:44
  • Sorry I wasn't clear - JS is fine, just not included in this example. My concern is that the checkbox isn't automatically included in the tab index. Question updated to clarify. – Jon Renaut Nov 27 '12 at 17:02
  • checkboxes should natively be tabbable – there must be some other reason it's not working. Can you share any styles or scripts that might be relevant? – crowjonah Nov 27 '12 at 17:06
  • 1
    The problem must be outside the code posted, since IE does not seem to have any difficulty in reaching the checkbox via tabbing. It is certainly an accessibility problem to have a checkbox with no label associated with it, but that’s a different issue. – Jukka K. Korpela Nov 27 '12 at 17:33

3 Answers3

2

As Jukka said in the comments, all of these need labels. Without <label> the form elements will automatically fail any 508 checks. That is maybe the real error it is throwing, but we would need to know what tools are being used.

To answer your new question:

Anyway, the real issue here is not that it doesn't get focus, but that the focus isn't visible. I tried adding a label, and that didn't help, and I tried just adding text to the TD and that didn't help either

Most browsers put a 1 pixel dotted border around all elements as they gain focus. Go through your stylesheet, and look for something like outline: none;. You should either remove that line or add a new rule that adds focus back.

Ryan B
  • 3,364
  • 21
  • 35
0

It looks like the problem was actually poor communication, both in our development team and in the 508 compliance checkers. My only excuse is it happened over the phone while I was away for Thanksgiving without my laptop.

Anyway, the real issue here is not that it doesn't get focus, but that the focus isn't visible. I tried adding a label, and that didn't help, and I tried just adding text to the TD and that didn't help either. I'm going to get my ducks in a row and then ask a new question once I'm sure of what I'm asking.

Thanks, all, for the help.

Jon Renaut
  • 127
  • 2
  • 12
  • As an aside, one of the wonderful things about Stack Overflow is that I often find answers to my own questions because the responses I get force me to rethink what I'm asking. You all ask good questions, and I appreciate it. – Jon Renaut Nov 27 '12 at 17:55
0

You're looking to make tabbing through the checkboxes both functional and visible, yes?

You can't create "on focus" events with JS that change the checkbox styles because checkboxes don't really have any 'styles', save what Ryan B mentioned ...but you can create "on focus" events that change style to a <div> containing said checkbox:

http://jsfiddle.net/ZuvbV/3/

Notice tabbing through the boxes changes the background color to red.

khaverim
  • 3,386
  • 5
  • 36
  • 46