Специальные возможности: текст справки для элементов ввода

Question

У меня есть текст input, который требует от пользователя ввода пароля с конкретными ограничениями.Текст справки для этих ограничений указывается в отдельном элементе DOM.

Я бы хотел, чтобы программа чтения с экрана читала этот текст справки, когда пользователь фокусируется на поле ввода.Я нашел два способа сделать это:

1. использовать aria-describedby="help-text-id" для ввода текста.

   <label for="password"> Password </label>
   <input type="text" aria-describedby="help-text" id="password" />
   <span id="help-text"> The password should at least be 8 characters</span>
   

2. используйте aria-labelledby="label-id help-text-id" для ввода текста, чтобы прочитать соответствующую метку, а также текст справки в виде метки

    <label id="password-label"> Password </label>
    <input type="text" aria-labelledbyby="password label help-text" />
    <span id="help-text"> The password should at least be 8 characters</span>

Мне нравится первый, потому что семантически этот текст справки - это то, что описывает ввод, а не то, что обозначает вход.Я просто не уверен, что это правильный способ справиться с этим.Существуют ли другие шаблоны для объявления текста справки?

Также aria-describedby, похоже, не работает ни с расширением ChromeVox, ни с программой чтения с экрана windows 10.

Ссылки: https://developer.paciellogroup.com/blog/2018/09/describing-aria-describedby/

Answer 1

Вы всегда можете включить текст справки в label, связанный с элементом input.Это гарантировало бы 100% совместимость с любой комбинацией программы чтения с экрана / браузера.

В дополнение к общим инструкциям, важно также предоставить соответствующие инструкции в ярлыках элементов управления формы.Например, указать обязательные поля ввода и форматы данных в тексте меток.https://www.w3.org/WAI/tutorials/forms/instructions/

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

Между двумя предлагаемыми вами решениями я бы остановился на aria-describedby, поскольку он предлагает более высокий уровень поддержки в разных браузерах .