Соответствие 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 приводит к следующей ошибке:

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

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

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? Это необходимо, только если вы хотите сгруппировать параметры в подмножества, но у вас есть только один.

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

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

• Добавьте ярлык к optgroupс, как предлагается здесь.
• Следуйте одному из шаблонов списка, например "раскрывающемуся раскрывающемуся списку", как предлагается здесь.