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

Question

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

<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月1日，2日，3日......周一发生。

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

谢谢！

Answer 1

您可以通过在第一个位置添加选项标记，并为其指定“已选择”和“已禁用”属性，使选择标记显示默认标题，例如“您喜欢哪个星期一？”。 “selected”属性使得在页面加载时预选选项标签（具有所选属性），并禁用属性，以便用户实际上不能选择该选项标签。

看看这里的第一个答案：How to add a title to a html select tag

Answer 2

实际上，有多种方法。我最喜欢的一个（因为它总是适用于盲文显示和语音，在Windows和Apple的操作系统上）：

<label id="selectorLabel">Just for demo purposes...</label>
<select aria-labeledby="selectorLabel" name="demoSelector">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>

其他方式正在使用（这里你需要下拉列表中的id，而for属性在标签上）。或者您可以执行其他解决方案建议的操作。

aria-labeledby的优势？选择器的名称显示在EACH选项旁边，而不是仅仅是一个（禁用）选项。至少在Windows上。在Apple的操作系统上，标签出现在下拉列表旁边，一旦激活，选项就会显示在页面底部。我个人不喜欢这个属性，因为苹果操作系统上的盲文显示器没有对其进行适当的处​​理，因为盲文显示器用户的“无标签”元素 - 虽然它被标记了。

Answer 3

假设将有多个无线电/选择组，我会将其标记为：

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