时间戳

首页 > 解决方案 > 复选框可访问性显示没有关系

html - 复选框可访问性显示没有关系

问题描述

我有一组带有一个标题的复选框。在检查可访问性时，我收到错误“名称为“recognitionOption”的所有元素不使用 aria-labelledby 引用相同的元素”和“Fieldset 包含不相关的输入”。

<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>

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

提前致谢

标签： htmlcheckboxaccessibilityantduiaccessibility

解决方案

不要在你的情况下使用aria标签

您需要阅读标签控件

您需要按照以下步骤操作：

  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>

推荐阅读