Accessible Custom Semantic UI checkboxes and radios

by Allen N.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/container.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/grid.min.css">
<div class="row">
  <div class="ui grid container">


    <div class="twelve wide four wide computer column">
      <legend><strong>Checkbox for Multiple Selections</strong></legend>
      <div class="checkbox">
        <input type="checkbox" name="checkboxName" id="checkbox_1" checked>
        <label for="checkbox_1">Selection 1 chosen</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkboxName" id="checkbox_2">
        <label for="checkbox_2">Selection 2</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkboxName" id="checkbox_3">
        <label for="checkbox_3">Selection 3</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkboxName" id="checkbox_4">
        <label for="checkbox_4">Selection 4 with a long amount of text so it wraps to multiple lines</label>
      </div>
    </div>


    <div class="twelve wide four wide computer column">
      <legend><strong>Radio Traditional Selection </strong></legend>
      <div class="radio">
        <input type="radio" name="radioName" id="radio_1" checked>
        <label for="radio_1">Option 1</label>
      </div>
      <div class="radio">
        <input type="radio" name="radioName" id="radio_2">
        <label for="radio_2">Option 2</label>
      </div>
      <div class="radio">
        <input type="radio" name="radioName" id="radio_3">
        <label for="radio_3">Option 3 with a long amount of text so it wraps to multiple lines</label>
      </div>
    </div>


  </div>
</div>

SCSS

@function remSize($size) {
  $rem_Size: $size / 16px;
  @return #{$rem_Size}rem;
}
@mixin default-transition {
  -webkit-transition: all 420ms ease-out;
  -moz-transition: all 420ms ease-out;
  -o-transition: all 420ms ease-out;
  transition: all 420ms ease-out;
}

$color-purple: #693a77;
$color-white: #ffffff;
$color-gray-mid: #979797;
$color-gray-darker: #4a4a4a;

body {
  overflow-x: hidden;
  min-width: 320px;
  background: #fff;
  font-family: OpenSans,'Helvetica Neue',Arial,Helvetica,sans-serif;
  font-size: 16px;
  line-height: 1.4285em;
  color: rgba(0,0,0,.87);
  font-smoothing: antialiased;
}

.checkbox, .radio {
	position: relative;
	margin-left: 	remSize(-7px);
	input {
		position: absolute;
		opacity: 0;
		& + label {
			display: block;
      padding-top: 	remSize(5px);
			padding-bottom: remSize(5px);
			padding-right:	remSize(7px);
			padding-left: 	remSize(39px);
			line-height: 	remSize(24px);
			border-radius: 	remSize(2px);
			color: $color-gray-darker;
			cursor: pointer;
			@include default-transition;
			&:hover {
				background-color: $color-purple;
				color: $color-white;
				&:before {
					border-color: $color-white;
				}
			}
			&:before {
				position: absolute;
				top: remSize(17px);
				left: 	remSize(7px);
				width: 	remSize(20px);
				height: remSize(20px);
				border-radius: 2px;
				background-color: $color-white;
				border: solid 1px $color-gray-mid;
				transform: translateY(-50%);
				@include default-transition;
				content: '';
			}
			&:after {
				position: absolute;
				top: remSize(17px);
				left: 18px;//-------------------This is 17px in our project code
				display: inline-block;
				width: 6px;
				height: 10px;
				border-right: 2px solid;
				border-bottom: 2px solid;
				border-color: $color-white;
				transform: translate(-50%, -50%) rotate(37deg) scale(0.1);
				@include default-transition;
				content: "";
			}
		}
		&:checked {
			& + label {
				&:before {
					background-color:...