Comments on Radio-Controlled Web Design

25 Reader Comments

Back to the Article
  1. The only problem I see with your method is the JavaScript to support ARIA relies on jQuery, which defeats the page load requirement you started out with.

    Copy & paste the code below to embed this comment.
  2. The shim for IE7 and IE8 utilizes `addEventListener` which is not supported by either of those browsers. It also uses `document.querySelectorAll` which is not supported by IE7.

    Copy & paste the code below to embed this comment.
  3. Nice article, thanks Art. I happen to read this on an iphone 4 though, using Chrome. I cant get the CSS examples to work. The functionak tabs are the ones that use javascript only for me. May be because of the code editor that is used to showcase the examples I am not sure. I will definitely get back and test it on my desktop pc as well.

    Copy & paste the code below to embed this comment.
  4. your ie7 and ie8 JS won’t work in those browsers because neither supports addEventListener and only ie8 supports querSelectorAll

    Copy & paste the code below to embed this comment.
  5. The only problem is with the JavaScript that sometimes don’t support to IE7 and IE8.

    Copy & paste the code below to embed this comment.
  6. Why not use a single checkbox input for instances where you’re toggling a specific state, like showing or hiding the modal or menu?

    Modal: http://codepen.io/shshaw/pen/vBKmJ
    Menu: http://codepen.io/shshaw/pen/gvefr

    In these examples, “checked” indicates visible and unchecked indicates hidden.

    Copy & paste the code below to embed this comment.
  7. Good thoughts.

    To me, a single state toggle is different enough from a multi-state system that the difference in implementations is warranted. The single state toggle code is much easier to modularize with general classes and all that changes in HTML per module is the input ID and label’s “for” attribute. A quick example: http://codepen.io/shshaw/pen/Bsbhl

    Thanks for the response, and thanks for the article. It got me rethinking some of my simple toggle uses on the site I’m currently developing.

    Copy & paste the code below to embed this comment.
  8. Hi Art,

    Love the article. I tried to build something based completely on focus states of a button recently but couldn’t get it working on mobile in the time I had, great to see that people are thinking along the same sort of lines.

    I’m of a similar opinion to Shaw, that checkboxes are really useful for open/close systems, otherwise I’ve found I had to hack together solutions such moving a second radio button label above the first to get the binary behaviour. With checkbox inputs in mind, have you got any thoughts on how to create a checkbox & radio input shim for ie7 and 8? As far as I can tell, it’s currently limited to interpreting radio inputs only.

    Interested to hear your thoughts!

    Cheers,
    Josh

    Copy & paste the code below to embed this comment.
  9. <nerd>Nice article - but it’s Catelyn Stark, not Caitelyn Stark</nerd> ;)

    Copy & paste the code below to embed this comment.
  10. So cool of you to share the info and super cool of you to write such a great, in depth article.

    Much Thanks!

    Copy & paste the code below to embed this comment.
  11. Great article!It is really nice to know that there are others dealing with similar situations, I am not alone. Having people skills as well as technical skills is an awesome combination.We should all work at it! Read more about my website here: Adjustable electric beds

    Copy & paste the code below to embed this comment.
  12. Too bad it doesn’t work with Android stock browser. And css hack doesn’t help.

    Copy & paste the code below to embed this comment.
  13. Why create a shim of your own?
    For IE lt 9 I use html5.js and ie9.js (and throw respond.js into the mix) - I don’t care if IE8 has to load several scripts, users of that browser should be glad to get a working page ;)

    Copy & paste the code below to embed this comment.
  14. Hi Art and everyone,

    Inspired by this very article I made a radio controlled lightbox.
    (https://github.com/BillyNate/cssbox)
    If anyone got some time on his hands to review or bugtest or anything, I would be happy to see some feedback or suggestions.

    Copy & paste the code below to embed this comment.
  15. I was so hopeful this would help with make tab panel components work in a consistent way on screen readers, because every implementation of tabs I’ve seen is problematic.  Radio buttons groups function in a way that is almost identical to the recommendations for how tabs should work in a tablist.  Unfortunately, JAWS (15 at least) in the latest version of IE on Windows 8.1 does not play well with this method.  In Forms mode, it voices “Insert+F! for help” twice every time you move to a different tab.  Also, the semantics are a little muddled.  Radio buttons have strong native semantics that don’t completely overlap with tabs.  This means that, though we are told by the screen reader that we are on a tab, we are also informed that the state of that tab is “checked”, which doesn’t really make sense for a tab.  Specifically, aria-checked is not one of the inherited states and properties of something which has the “tab” role.  Tabs can be selected and maybe even expanded, but being checked is, I think, pushing it.  Also, some of the less common screen reader/browser combinations on Windows are confused by this approach.  Try it out in JAWS/Firefox or NVDA/IE, and you’ll see what I mean.  Haven’t tried it with VoiceOver yet, but it would be interesting to see how it works on OS X and iOS devices.

    Copy & paste the code below to embed this comment.
  16. what a nice idea you shared… thanks…

     

    carpool

    Copy & paste the code below to embed this comment.
  17. I like the general idea, but I dislike the idea of hard-coding the ids into the css. I might (for example) want to have a variable number (or variably named) tabs on a page, generated within the html, and I don’t want to have to change the css for each case.

    However, there is a rather neat way round this: I wonder if you see any downsides? You can put all the labels first to make a tabbed list at the top of the page

    <label for=“starks” ...>
    <label for=“lannisters” ...>

    then have each input followed directly by the content

    <input id=“starks” ...>
    <ul class=“panel”>content</ul>

    <input id=“lannisters” ...>
    <ul class=“panel”>content</ul>

    and in the css you can then simply do something like

    .radio-tabs .panel {
      display: none;
    }
    .radio-tabs input:checked + .panel {
      display: block;
    }

    without having to code any ids at all into the css

    Copy & paste the code below to embed this comment.
  18. Sorry, commenting is closed on this article.