Checkbox and Radio (data-toggle buttons) are not accessible by pressing tab

[jeffkevin]

Tested on all major browsers in windows 8.1

Checkbox and radio buttons are not accessible when pressing the TAB key,
to see the bug

1. visit http://getbootstrap.com/javascript/#buttons-examples.
2. click the single toggle button to select it.
3. now press tab.

expected result: focus on the checkbox below it.
current result: jumped to the link skipping both the checkbox and radio buttons.

[deviprsd]

But that doesnt seem to be a bootstrap problem ..... i tired in win 7 maj browsers it skips to the link
Solely a browser problem .... why dont you experiment with the css page .... try the radios and checkboxes which have not been styled.

[baelter]

To me, it seems to be a problem that should be solved by bootstrap. The problem is that the actual input has
display: none;
which removes it from the tab order.

[deviprsd]

Changing such css properties might cause complexities. @cvrebert take a look. In the mean time I'm looking for a fix.

[jeffkevin]

on our end, we fixed this problem by changing bootstrap css as follows:

Before:

[data-toggle=buttons]>.btn>input[type=radio],
[data-toggle=buttons]>.btn>input[type=checkbox] {
  display: none; 
}

After:

[data-toggle=buttons]>.btn>input[type=radio],
[data-toggle=buttons]>.btn>input[type=checkbox] {
  position: absolute;
  left: -9999px;
}

[zzDave]

This worked, once we added display:inline or block.

[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
    display:inline;
    position:absolute;
    left:-9999px;
}

[mbarbier1]

There is one problem this doesn't solve. We have a business request that a user should be allowed to click on the buttons, then press Enter to submit the form. While I can tab through the buttons now, when I click on a button with the mouse the checkbox still does not receive input focus so the Enter key does not work. Any idea how to fix this?

[cvrebert]

As of the current version of the code in the master branch, the checkbox button is focusable via tabbing, but it doesn't receive focus styling. Also, clicking on a checkbox button doesn't focus it.

[fat]

not a js bug, reassigning to css/html team

[interactivellama]

+1 Same issue. I'm doing an accessibility audit on our Bootstrap based controls at https://github.com/ExactTarget/fuelux/tree/3.0.0-wip

@zzDave Removing the display:none fixed the tabbing issue. Thanks.

[thecristen]

(revising my previous comment) The above snippets did help with tabbing, and I was able to use the arrow keys to choose radio buttons in my case. Though as @mbarbier1 implies above.. the checked property doesn't change this way so we cannot submit the right values.

Also from a UX standpoint, tabbing does not seem to set the focus (so I can't tell visually which set of buttons I'm on until I change my selection via arrow keys).

[hnrch02]

We'd need some JavaScript to add focus styling to the labels. tabindex doesn't work on labels, at least in Chrome. See this JS Bin. There also seems to be a problem with focusing input[type="radio"]s which needs more investigation.

[mdo]

@fat Pretty sure we need JS here to detect when the <input> gets :focus so that it can bubble that up to the <label>. There's no way to do that in CSS at present.

[interactivellama]

This is how we do it in FuelUX with a CSS-only sibling selector.

input[type="checkbox"]:focus + .checkbox-label {
    color: @grayLight;
}

But this requires an extra span tag, of course.

[mdo]

Yeah, and the span would have to be the <button>. That can't happen, if at all practically speaking, until v4.

[hnrch02]

If only we had :has...

[TorIPi0]

+1 Same issue. I need this control adapted to the new law(!) in Norway that
requires all public websites to be accessible at least to AA levels under
WCAG 2.0, and would really be happy if someone did some fixing here.

On Fri, Jun 13, 2014 at 6:09 PM, Stephen James notifications@github.com
wrote:

+1 Same issue. I'm doing an accessibility audit on our Bootstrap based
controls at https://github.com/ExactTarget/fuelux/tree/3.0.0-wip

@zzDave https://github.com/zzDave Removing the display:none fixed the
tabbing issue. Thanks.

—
Reply to this email directly or view it on GitHub
#12145 (comment).

[hnrch02]

As @mdo mentioned, to get this working we would need to introduce breaking changes which can not happen until v4 because of SemVer. Maybe somebody would take the liberty of creating a plugin that patches this in the meantime?

[mdo]

Well the JS can happen before then.

[hnrch02]

Yup, definitely, but then there still is the problem with focusing radio inputs.

[hnrch02]

I implemented this as a proof-of-concept yesterday, which can be seen here. Try tabbing to Radio 2.

[jeffkevin]

In the latest update of bootstrap tabbing on checkbox and radios are now working, but it is not visible or no focus styles.
we tried to workaround this problem by adding js:

$('[data-toggle="buttons"] input[type="checkbox"],[data-toggle="buttons"] input[type="radio"]').bind('focusin focusout', function(e) {
  if (e.type=='focusin') $(this).parent('label').addClass('focus'); else $(this).parent('label').removeClass('focus');
});

and css:

[data-toggle="buttons"] label.focus {
  outline: thin dotted;
  outline-offset: -2px;
}

These workaround makes the checkbox and radio more accessible by putting outline when they are focused. We can further tweak the style in this css, to match the other buttons.

[hnrch02]

@jeffkevin #13907 will solve this.

[jeffkevin]

nice thanks!

[mdo]

I believe this is fixed now that #13907 merged.