radios are menus

dabblet.css

/* radios are menus */
menu { border:1px solid; border-radius:2px;
	padding:0; margin:2px 0; overflow:hidden }
menu a, menu:before,
menu label { display:inline-block; cursor:pointer;
	padding:.6em 1.6em; margin:0; color:inherit; text-decoration:none }
menu label { margin:2px; border-radius:2px; float:left }
menu a:not([href]){ text-decoration:line-through }
menu a:first-child, menu a[href]:hover, menu a[href]:active,
:checked + label, menu label:hover, menu label:active { 
	background:rgba(255,255,255,.8); color:red }
menu[title]:before { content:attr(title); float:left; 
	text-transform:uppercase; font-size:.8em; line-height:2.6 }
menu [type] { display:none }
[name=wrong]:checked + label { color:transparent }

body > * { max-width:600px; margin:1em auto; color:rgba(255,255,255,.9) }
h1 { font-size:1.6em }

body { font:100%/1.6 Segoe UI,Helvetica Neue,Helvetica,sans-serif;
 background:linear-gradient(orange, red) }
html,body { min-height:100% }
* { color:inherit }

[rel=author]{ display:block; margin:2.6em 0; border-top:1px dashed; padding:.6em 0; text-align:right }
[rel=author]:before { content:'—' }
[rel=author]:after { content:', 2014' }

body:before { content:'select Result to see only the article ↑'; display:block; font-size:smaller; text-align:right }

dabblet.html

<h1>radios are menus</h1>
<p> While looking into high-contrast guidelines,
I noticed a tendency to still use <a href="//google.com/search?q=define+skeuomorphism" target=_blank>skeuomorphs</a> where they should not belong:
switches (radios).
<p>The problem becomes evident when you use high contrast: designers will
tend to use <b>high contrast to indicate selected
but will neglect to include the label</b> to indicate what the state is.</p>
<menu title=wrong>
  <input type=radio name=wrong checked id=wrong_on>
  <label for=wrong_on>on</label>
  <input type=radio name=wrong id=wrong_off>
  <label for=wrong_off>off</label>
</menu>

<p>Radio states <code>[on/off]</code> exclude other options in the exact way that
menus, toolbars and navigations work: <code>[current]</code>, <code>[selected]</code>,
and <code>[open]</code> are all the same:
<menu>
  <a href>home</a>
  <a href>search</a>
  <a href>about</a>
  <a>settings</a>
</menu>
<menu title=switch>
  <input type=radio name=something checked id=something_on>
  <label for=something_on>on</label>
  <input type=radio name=something id=something_off>
  <label for=something_off>off</label>
</menu>

<p>You may argue that you could have more than one selection simultaneously,
and this is a checkbox state. All you need is to accommodate the interface accordingly.

<menu title=filters>
	<input type=checkbox name=filter id=one>
	<label for=one>one</label>
	<input type=checkbox name=filter id=two checked>
	<label for=two>two</label>
	<input type=checkbox name=filter id=three checked>
	<label for=three>three</label>
	<input type=checkbox name=filter id=four>
	<label for=four>four</label>
</menu>

<p>Toggle the choices and see the underlying HTML.

<a rel=author href=//github.com/brito>brito</a>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}