html - 可访问性问题，选项卡不适用于自定义输入

Question

我遇到了一个问题，即只有最初选中的输入按钮可以通过选项卡访问。为了可见性，输入设置为 0，所以据我所知，它应该可以工作。我也尝试了 tab-index，但这并没有做任何事情。我究竟做错了什么？

这是 CodePen 中的代码

.mainColorWrap input[type="radio"],
.imageSizeInputWrapOuter input[type="radio"] {
	opacity: 0;
	position: relative;
	width: 0;
	margin: 0 3px 0 0;
}
.mainColorWrap label {
	display: inline-block;
	background-color: #fff;
	padding: 3px;
	border: 1px solid #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
}
.mainColorWrap label:hover,
.mainColorWrap label:focus,
.frontColorWrap label:hover,
.frontColorWrap label:focus {
	background-color: #000;
}
.mainColorWrap input[type="radio"]:focus + label {
	border: 1px solid #777;
}
.mainColorWrap input[type="radio"]:checked + label {
	background-color: #fff;
	border-color: #777;
}
.radioButtonInner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
}

<div class="mainColorWrap">
   <form>
      <input type="radio" name="colorOption" id="redCheck" value="red" class="mainColorRadiogroup" checked="" tabindex="0">
      <label for="redCheck">
         <div class="radioButtonInner" style="background-color: #c10e21;"></div>
      </label>
      <input type="radio" name="colorOption" id="greenCheck" value="green" class="mainColorRadiogroup" tabindex="0">
      <label for="greenCheck">
         <div class="radioButtonInner" style="background-color: #0ec155;"></div>
      </label>
   </form>
</div>

标签： htmlinputtabsaccessibility