Как правильно обозначить выпадающее меню, используемое для заполнения предложения?

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

Действительно, существует несколько подходов. Мой предпочтительный вариант (так как он ВСЕГДА работает как для дисплея Брайля, так и для голоса, в ОС 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>

Другие способы используют for (здесь вам нужен идентификатор в выпадающем списке, в то время как свойство for находится на метке). Или вы можете сделать то, что предложил другое решение.

Преимущество aria-labeledby? Имя селектора появляется рядом с КАЖДОЙ опцией, а не просто одной (отключенной) опцией. По крайней мере, на Windows. В операционной системе Apple ярлык появляется рядом с раскрывающимся списком, а после активации параметры отображаются внизу страницы. Лично мне не нравится свойство for, поскольку оно неправильно обрабатывается брайлевскими дисплеями в операционной системе Apple, оставляя элемент «немеченым» для пользователей брайлевских дисплеев - хотя он и помечен.

Answer 2

Предполагая, что будет более одной группы радио / избранных, я бы обозначил это следующим образом:

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

Answer 3

У тега select можно отображать заголовок по умолчанию, например «Какой понедельник месяца вы бы предпочли?», Добавив тег опции в первой позиции и присвоив ему атрибуты «selected» и «disabled».Атрибут «selected» делает так, чтобы тег опции (с выбранным атрибутом) был предварительно выбран при загрузке страницы, и атрибут disabled, чтобы пользователь не мог фактически выбрать этот тег опции.

Извлечь первыйответ здесь: Как добавить заголовок в HTML-тег выбора