时间戳

首页 > 解决方案 > 您如何正确标记用于填写句子的下拉菜单？

html - 您如何正确标记用于填写句子的下拉菜单？

问题描述

我有一组单选按钮来选择事件的频率，其中一个如下：

<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="mondayMonthly" id="mondayMonthly">
        <label class="form-check-label" for="mondayMonthly">
            <select class="form-control-inline" id="mondayMonthlyNumber" name="mondayMonthlyNumber">
                <option>1st</option>
                <option>2nd</option>
                <option>3rd</option>
                <option>4th</option>
                <option>5th</option>
            </select>
              Monday of the month</label>
 </div>

结果：
图片：上述代码的输出 - 带有标签读数的单选按钮

与之交互的流程如下：

  1. 选择一个单选项目。
  2. 在单选按钮的标签中，选择事件是否在每月的第 1、第 2、第 3……星期一发生。

将其标记为可访问性的最佳方法是什么？我在想有一些版本的aria-属性，也许for=""这会使这项工作，但我真的不知道从哪里开始。

谢谢！

标签： htmlaccessibilitywai-aria

解决方案

假设会有不止一组收音机/选择，我会这样标记：

<fieldset class="form-check form-check-inline">
  <legend>Choose frequency</legend>
  <p>
    <input class="form-check-input" aria-label="monday monthly" type="radio" name="mondayMonthly">
    <select class="form-control-inline" aria-label="which monday of the month">
      <option aria-label="first">1st</option>
      <option aria-label="second">2nd</option>
      <option aria-label="third">3rd</option>
      <option aria-label="forth">4th</option>
      <option aria-label="fifth">5th</option>
    </select>
    <span>Monday of the month</span>
  </p>
  <p>
    <input class="form-check-input" aria-label="tuesday monthly" type="radio" name="mondayMonthly">
    <select class="form-control-inline" aria-label="which tuesday of the month">
      <option aria-label="first">1st</option>
      <option aria-label="second">2nd</option>
      <option aria-label="third">3rd</option>
      <option aria-label="forth">4th</option>
      <option aria-label="fifth">5th</option>
    </select>
    <span>Tuesday of the month</span>
  </p>
  <p>
    ...
  </p>
</fieldset>

推荐阅读