Using checkboxes for outputting Boolean choices [on hold]

Apologies in advance: this is a bit of a long set-up for a short question!

For the app I'm working on at the moment, I have a bunch of content units (mostly D3 graphs, actually, but that's not really important). On each content unit there are user-selectable options, which turn on and off features of the display (e.g. lines on a graph or columns in a data table).

In the JavaScript version of the site, I use a checkbox element to present the state of the user's choice, and the click event immediately changes the state of the checkbox, and the state of the corresponding feature of the content unit.

We also want the app to be fully WCAG compliant, which means making it work without JavaScript. Since there are multiple content units on the page, I don't want to wrap a form element around every set of user choices, each with a submit button. Instead, my current design is to use a link as the label for the checkbox, roughly speaking:

<label>
  <input type='checkbox' name='foo' id='foo' checked />
  <a href='?show-foo=false'>
    Hide foo
  </a>
</label>

This all works fine, using Rails to set the href of the link appropriately, the user can turn the state of foo on and off just by clicking on the link.

The problem is that you have to click on the checkbox label for this to work. If my user clicks on the checkbox itself, the box gets checked but the state doesn't change. This seems to me like a flaw in my design, and likely to fail the accessibility audit. Part of the reason is that checkboxes can't be set to be readonly, which seems like an odd omission to me, but not something I can change (absent JavaScript). So I can't really use a checkbox as a way to simply output a Boolean choice that's encoded in the page URL.

So in summary: am I right that this isn't a good design? What are alternative WCAG-compliant ways to output a Boolean state selection that's tacitly part of the state of the page?

update

@AdrianoRepetti suggested putting the checkbox inside the a element:

<label>
  <a href='?show-foo=false'>
    <input type='checkbox' name='foo' id='foo' checked />
    Hide foo
  </a>

but when I tried this, the checkbox can still be checked without triggering the link, so the page state doesn't change.

Tags: