单选按钮可访问性问题：点击Female标签无法选中对应选项如何解决

问题根因 #

该问题是由于违反HTML基础规范导致的：同一HTML页面内所有元素的id属性必须全局唯一。你当前的代码存在两处错误：

• 两个单选输入框的id都设置为了gender，浏览器匹配label的for属性时，默认只会指向第一个匹配到id的元素，因此点击所有关联for="gender"的label都会选中第一个单选框
• 两个label元素的id也重复设置为了gender-label，属于不符合HTML规范的写法

修复方案 #

方案1：保持label与input分离的写法 #

仅修改HTML部分的id和对应for属性即可，你的自定义单选框CSS代码无需调整：

<div class="radio-group">
  <fieldset>
    <legend>Gender</legend>
    <label for="gender-male">
        Male
        </label>
    <input type="radio" name="gender" id="gender-male" value="male">

    <label for="gender-female">
        Female
        </label>
    <input type="radio" name="gender" id="gender-female" value="female">
  </fieldset>
</div>

修改后两个单选框为同组（name属性一致），每个label的for属性匹配对应单选框的唯一id，点击对应文本即可选中对应选项。

方案2：优化为label嵌套写法（更简洁） #

可以直接把input嵌套在label内部，不需要额外设置id和for属性做关联，避免出现匹配错误问题，写法更简洁：

<div class="radio-group">
  <fieldset>
    <legend>Gender</legend>
    <label>
        Male
        <input type="radio" name="gender" value="male">
    </label>

    <label>
        Female
        <input type="radio" name="gender" value="female">
    </label>
  </fieldset>
</div>

内容的提问来源于stack exchange，提问作者MadMan