Является ли эта ошибка, о которой сообщает Siteimprove по критерию WAI-ARIA 1.3.1, ложным срабатыванием?

#html #material-ui #accessibility #wai-aria #aria-role

#HTML #материал-пользовательский интерфейс #Специальные возможности #wai-aria #aria-роль

Вопрос:

Используя расширение Siteimprove v. 126 для Chrome, все следующие фрагменты HTML сообщают о проблеме «Поле ввода не имеет описания 1.3.1»

Похоже, что описание не требуется, поскольку aria-hidden атрибут должен полностью удалить элемент, насколько это касается API доступности. Аналогично, tabindex=-1 значение атрибута указывает, что этот элемент не предназначен для взаимодействия или представления.

Более того, расширение сообщает об этом как о проблеме даже после добавления role="none" в следующий документ, который является первым решением с перекрестными ссылками в инструменте:

 <input aria-hidden="true" tabindex="-1" 
    class="MuiSelect-nativeInput" 
    value="SORTING_OPTIONS_ENDDATE" 
    style="">

<input aria-hidden="true" tabindex="-1" 
    class="MuiSelect-nativeInput" role="none" 
    value="SORTING_OPTIONS_ENDDATE" 
style="">

  

Примечание: этот скрытый input элемент генерируется как часть <Select /> компонента через пользовательский интерфейс Material. Он используется для хранения выбранного значения

Ответ №1:

Да, это ложное срабатывание.

Вероятно, это помечается как проблема, поскольку он не может знать, собираетесь ли вы «отображать» <select> в будущем, и в этот момент он будет недоступен из-за отсутствия метки.

Вы можете безопасно игнорировать эту ошибку, поскольку входные данные никогда не предназначены для доступа, поэтому состояния tabindex и aria-hidden никогда не изменятся.

Одна вещь, которую я заметил, заключается в том, что они установили opacity значение 0 вместо того, чтобы скрывать ввод, не совсем уверен, почему это так, но это может быть другой причиной, по которой он жалуется, поскольку технически все, что с 0 opacity , все еще может быть доступно некоторым старым программам чтения с экрана, которые не соблюдают aria-hidden . Если бы вы могли изменить это на display: none , это было бы более надежным (это должно быть добавлено JS, так как в противном случае, если вы установите это в CSS и JS завершится с ошибкой, весь ввод будет скрыт).