#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 завершится с ошибкой, весь ввод будет скрыт).