Note: tested in FF with the html5 parser turned on (more about the parser here)
You can try this in FF 3.6(beta) or a nightly (use about:config and set html5.enable to true)
These are regular
... and now svg:
I used circles for no particular reason; probably better to use rects, and save circles for radio buttons. Pretty interesting how easy it is to create an accessible svg widget in an hour or so (with little SVG knowledge).
Known issues include: need to make gecko a11y pay attention to svg elements for building names from relations, and for state changes.