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

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个，第2个，第3个…星期一发生。

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

谢谢！

Answer 1

通过在第一个位置添加一个选项标签，并为其赋予“选择的”和“禁用的”属性，可以使选择标签显示默认标题，例如“您希望每月的哪个星期一？”。使用“ selected”属性可以使页面加载时预先选择选项标签（带有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操作系统上，标签显示在下拉菜单旁边，一旦激活，选项将显示在页面底部。我个人不喜欢for属性，因为Apple操作系统上的盲文显示器无法正确处理for属性，尽管盲文显示器用户使用了盲文显示功能，但该元素仍未标记。

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>