5

I have seen a lot of examples of usage of <input type="radio"> and <input type="checkbox"> along with some css like

input:checked + div.tab-content {display:block;}
div.tab-content {display:none;}

to implement js-free tabs, dropdowns etc.

This is clearly a hack, but what are the exact UX downsides (e.g. for accessibility) of this approach? Am I better off with some bootstrap-based or :target-based tabs?

To explain better here's couple implementations:

  • 2
    Perfectly valid question, but it may be better suited for stack overflow. – William Anderson Apr 20 '17 at 12:41
  • 1
    @WilliamAnderson I think it is much better off here, because what I want to know is what does it change in terms of UX, not implementation. – Ivan Apr 20 '17 at 12:45
  • 1
    I suggest you to provide a picture with your question- for better understanding of the issue. – Yuval Pruss Apr 20 '17 at 14:07
  • @YuvalPruss I linked a couple of examples – Ivan Apr 20 '17 at 14:29
  • @WilliamAnderson I think that whether the tabs are JavaScript or a CSS trick with radios makes no difference to the user experience, simply because the user doesn't know about or perceive any difference in the implementations. Unless your case is somehow different? I can think of one exception: using CSS for tabs means you don't have to use JavaScript, which means you may not need to download any libraries (such as jQuery). In that case you'd see a speed boost which would have a minor positive effect on the overall experience. – Doug Proctor Apr 20 '17 at 14:40
1

If you take this W3 schools example which uses both CSS and JavaScript you can see how the elements used for the tabs are buttons rather than inputs.

The difference here is that, when using the Keyboard Tab button, buttons can be focused one by one while radio inputs are focused as a group and then you need to use arrow up/down keys to navigate through them.

In the example you post the actual input is hidden (display:none) and the label is what the user can click (which automatically selects the input). As far as I could test the labels are not able to receive focus, so it is not possible to navigate through them with the keyboard.

  • I would also add the fact that to scroll with up/down arrows user has to unfocus the input group. – Ivan Apr 23 '17 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.