Соответствие WCAG AA: элемент select не имеет значения, доступного для API доступности

Question

У меня есть этот код в HTML.

<select
    class="news-form-control custom-select"
    name="filterState" id="filterState" 
    role="listbox"
    contenteditable="true"
    aria-label="Enter state"
    aria-required="true">

    <optgroup>
        <option value="ALL">ALL</option>
        <option value="AB">AB</option>
        <option value="AE">AE</option>
        <option value="AK">AK</option>
        <option value="AL">AL</option>
    </optgroup>

</select>

Автоматическая проверка соответствия требованиям WCAG 2.0 уровня AA приводит к этой ошибке:

"Этот элемент выбора не имеет значения, доступного для API доступности."

I присвоил значение каждому параметру в раскрывающемся списке и элементу выбора. Так почему я до сих пор получаю эту ошибку?

Answer 1

Это сообщение приходит из правил HTML_CodeSniffer (которые могут использоваться самостоятельно или внутри другого инструмента, такого как pa11y ).Вы можете увидеть отчет, вставив свой HTML-код в инструмент на домашней странице HTML_CodeSniffer .

Первое, что нужно отметить, это то, что он сообщается как предупреждение ,не ошибка , как сказал ваш вопрос.Это не явный сбой WCAG, но его можно улучшить, поэтому давайте посмотрим, как это сделать.

Предупреждение относится к критерию успеха WCAG 4.1.2 " Имя, Роль, Значение ».Это означает, что вспомогательная технология (например, программа чтения с экрана) обладает всей необходимой информацией, чтобы пользователи могли правильно понимать этот элемент управления:

• Имя: что это за ввод называется , т.е. какую часть информации предоставляет пользователь.В данном случае это «Вход в состояние».
  • Использование aria-label для этого нормально, но помогает только пользователям программы чтения с экрана.Я рекомендую заменить это на видимое <label for="filterState">, чтобы все пользователи могли его понять.
• Роль: какой это тип ввода,Здесь это выпадающий селектор.
  • Достаточно использовать элемент <select>.Удалите атрибут role="listbox" - он здесь не нужен.(Атрибут role в основном предназначен для написания пользовательских элементов управления в JS.)
• Значение: Это та часть, о которой HTML_CodeSniffer выдает предупреждение.Это означает текущее значение ввода, чтобы пользователи понимали, что они выбрали.
  • Для HTML <select> это означает добавление атрибута selected к элементу <option>.
  • Это нормально, если начальное значение не определено.Вот почему оно классифицируется как предупреждение, а не ошибка.
  • В этом случае, поскольку есть опция «все», будет полезно пометить эту опцию как selected, когда страница впервые отображаетсяпользователю. Это заставит предупреждение исчезнуть.

Я не знаю, почему у вас здесь есть атрибут contenteditable.Вы также можете удалить это тоже.

Answer 2

Вам действительно нужен optgroup?Это необходимо, только если вы хотите сгруппировать параметры в подмножества, но у вас есть только один.

Может быть, вы показываете здесь только один, но в вашем коде более одного?Но если вы можете жить без него, это сообщение об ошибке, скорее всего, исчезнет.

Если вам действительно нужно optgroup с, вы можете посмотреть на пару вещей:

• Добавьте метку к optgroup s, как это было предложено здесь .
• Следуйте одному из шаблонов списка, например «складной выпадающий список», как было предложено здесь .