Accessible CSS toggle switch using standard form controls

<div class="row">
  <div class="large-12 columns">
    <div class="hero-box">

      <div class="row">
        <div class="large-6 columns">

          <h4>Light switch</h4>
          <p>Use the light switch, instead of a checkbox, for simple <em>“On/Off”</em> options. </p>

          <div class="row toggle-demo">

            <label class="switch-light switch-candy">
              <input type="checkbox">

              <strong class="large-4 columns">
                Wireless
              </strong>

              <span class="large-4 columns float-left">
                <span>Off</span>
                <span>On</span>
                <a></a>
              </span>
            </label>

          </div>

          <div class="row toggle-demo">

            <label class="switch-light switch-material">
              <input type="checkbox">

              <strong class="large-4 columns">
                Geolocation
              </strong>

              <span class="large-4 columns float-left">
                <span>Off</span>
                <span>On</span>
                <a></a>
              </span>
            </label>

          </div>

          <div class="row toggle-demo">

            <label class="switch-light switch-holo">
              <input type="checkbox">

              <strong class="large-4 columns">
                Airplane Mode
              </strong>

              <span class="large-3 columns float-left">
                <span>Off</span>
                <span>On</span>
                <a></a>
              </span>
            </label>

          </div>

        </div>
        <div class="large-6 columns">

          <h4>Toggle switch</h4>
          <p>Use the toggle switches, instead of radio buttons, for two or more, specific options. </p>

          <fieldset class="row toggle-demo">
            <legend class="large-3 columns">View</legend>
            <div class="switch-toggle switch-candy large-9 columns">
              <input id="d-c1" name="view-d-c" type="radio" checked="">
              <label for="d-c1" onclick="">Week</label>

              <input id="d-c2" name="view-d-c" type="radio">
              <label for="d-c2" onclick="">Month</label>

              <input id="d-c3" name="view-d-c" type="radio">
              <label for="d-c3" onclick="">Year</label>

              <a></a>
            </div>
          </fieldset>

          <fieldset class="row toggle-demo">
            <legend class="large-3 columns">Storage</legend>
            <div class="switch-toggle switch-material large-9 columns">
              <input id="d-h1" name="view-d-h" type="radio" checked="">
              <label for="d-h1" onclick="">MTP</label>

              <input id="d-h2" name="view-d-h" type="radio">
              <label for="d-h2" onclick="">UMS</label>

              <input id="d-h3" name="view-d-h" type="radio">
              <label for="d-h3" onclick="">PTP</label>

              <a></a>
            </div>
          </fieldset>

          <fieldset class="row toggle-demo">
            <legend class="large-3 columns">Debug</legend>
            <div class="switch-toggle switch-holo large-9 columns">
              <input id="d-m1" name="view-d-m" type="radio" checked="">
              <label for="d-m1" onclick="">Disabled</label>

              <input id="d-m2" name="view-d-m" type="radio">
              <label for="d-m2" onclick="">ADB</label>

              <input id="d-m3" name="view-d-m" type="radio">
              <label for="d-m3" onclick="">DevTools</label>

              <a></a>
            </div>
          </fieldset>

        </div>

      </div>

    </div>
  </div>
</div>