复选框可访问性显示无关联

编程问答 2022-08-15

问题描述

我有一组带有一个标题的复选框。在检查可访问性时，出现错误“名称为“ recognitionoption”的所有元素均未引用具有aria-labelledby的相同元素”和“字段集包含不相关的输入”。

<fieldset>
   <legend id="item-Box">Item Box</legend>
   <div>Choose your favourite item</div>
   <div aria-labelledby="item-Box">
      <div class="ant-row ant-form-item">
         <div class="ant-col ant-form-item-control-wrapper">
            <div class="ant-form-item-control">
               <span class="ant-form-item-children">
                  <div>
                     <label><span class="ant-radio ant-radio-checked"><input name="itemOption" id="itemOption1" type="radio" class="ant-radio-input" aria-label="item1" value="10" checked=""><span class="ant-radio-inner"></span></span></label><span class="small-Box">Jackfruit</span>
                  </div>
                  <div><label class="ant-radio-wrapper"><span class="ant-radio"><input name="itemOption" id="itemOption2" type="radio" class="ant-radio-input" aria-label="item2" value="20"><span class="ant-radio-inner"></span></span></label><span>Mango</span></div>
               </span>
            </div>
         </div>
      </div>
   </div>
</fieldset>

如果有人可以对此提出建议，将会很有帮助。

预先感谢

解决方法

请勿在您的情况下使用 aria 标签

您需要阅读Labeling Controls

您需要执行以下步骤：

  1. 删除aria标签
  2. 在标签内设置文本（在您的情况下，将带有文本的跨度移动到标签上）
  3. 将输入与标签关联

您正确的html：

<fieldset>
  <legend id="item-box">Item Box</legend>
  <div>Choose your favourite item</div>
  <div class="ant-row ant-form-item">
    <div class="ant-col ant-form-item-control-wrapper">
      <div class="ant-form-item-control">
        <span class="ant-form-item-children">
          <div>
            <label for="itemOption1">
              <span class="ant-radio ant-radio-checked">
                <input name="itemOption" id="itemOption1" type="radio" class="ant-radio-input" value="10" checked>
                <span class="ant-radio-inner"></span>
              </span>
              <span class="small-box">Jackfruit</span>
            </label>
          </div>
          <div>
            <label class="ant-radio-wrapper" for="itemOption2">
              <span class="ant-radio">
                <input name="itemOption" id="itemOption2" type="radio" class="ant-radio-input" value="20">
                <span class="ant-radio-inner"></span>
              </span>
              <span>Mango</span>
            </label>
          </div>
        </span>
      </div>
    </div>
  </div>
</fieldset>
accessibilityantdcheckboxhtmluiaccessibility