title: Accessible custom styled checkbox
body: <p>I'm using a label element to create a custom styled checkbox.
  Essentially I'm using it as a button to later perform some styling with the :checked selector. I'm not submitting the value to a form.</p>
  
  <pre><code>&lt;input type="checkbox" id="agree" style="display:none" /&gt;
  .......
  &lt;!-- few more divs here --&gt;
  .......
  &lt;label for="agree" role="button"&gt;Click here&lt;/label&gt;
  &lt;div&gt;This div will be styled if the checkbox is ticked&lt;/div&gt;
  </code></pre>
  
  <p>My question is, in accessibility point of view, is this correct?
  Is there a more semantic way to do it? (css only must mention)</p>
  
  <p>My need is a custom styled checkbox.</p>
  
  <p>I think the correct semantic way will be using a <code>&lt;button&gt;</code>, but then it does not work as a label and will not tick the checkbox..</p>