Специальные возможности Quick Wins: доступные инструкции по полям формы и сообщения об ошибках с использованием…

Итак, у вас есть форма, и вы хотите предоставить доступные инструкции о том, как ожидается заполнение каждого поля.
Если форма маленькая, может иметь смысл предоставить список инструкций в верхней части формы, поэтому, когда пользователь переходит к форме, объявляются инструкции. Дополнительным преимуществом этого подхода является то, что эти инструкции не будут пропущены в режиме форм, поскольку они размещаются до того, как программа чтения с экрана перейдет в режим форм.

<div>
  <ul>
    <li> All fields marked (required) must be filled. </li>
    <li> Dates must be in dd/mm/yy format </li>
  </ul>
</div>
<form>
  <label> Name (required): 
    <input type="text" />
  </label>
  <label> Date of Birth: 
    <input type="text" />
  </label>
</form>

Но если в форме слишком много полей и было бы неэффективно размещать все инструкции вверху, логично будет разместить инструкции вместе с соответствующими полями. Вы можете сделать это, добавив span или div с необходимыми инструкциями и поместив их до или после соответствующего элемента формы, чтобы при перемещении пользователя вверх/вниз (используя клавиши со стрелками в AT) из поля формы описание отображалось. объявил. Однако у этого есть проблема, во-первых, в режиме форм эти поля будут полностью игнорироваться, а во-вторых, эти описания не будут объявляться, когда пользователь фокусируется на соответствующем поле формы.

<form>
  <label> Name (required): 
    <input type="text" />
  </label>
  <span> Name is required </span>
  <label> Date of birth: 
    <input type="text" />
  </label>
  <span> Date of birth should be in dd/mm/yy format </span>
</form>

представляем aria-describedby.

Что касается доступности, интерактивные элементы имеют два важных свойства: доступную метку и доступное описание. Доступная метка обозначает назначение элемента и может быть реализована с помощью элемента label, aria-label, aria-labelledby или может быть получена из текстового значения элемента. Доступное описание обозначает любую дополнительную информацию об элементе, которая может помочь пользователю понять назначение элемента. Для этого используется aria-describedby, и в нашем случае идеально подходит для предоставления описаний. для полей формы. Давайте посмотрим на пример:

<form>
  <label> Name (required): 
    <input type="text" aria-describedby="name-desc" />
  </label>
  <span id="name-desc"> Name is required </span>
  <label> Date of birth: 
    <input type="text" aria-describedby="dob-desc" />
  </label>
  <span id="dob-desc"> Date of birth should be in dd/mm/yy format      </span>
</form>

Вы также можете достичь той же функциональности, используя aria-labelledby, но есть некоторые тонкие различия: во-первых, семантически лучше сделать это, используя aria-describedby, и во-вторых, доступная метка объявляется до объявления типа элемента, а описание объявляется позже как вторичная информация.

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

Предостережение:

в зависимости от настроек программы чтения с экрана пользователя доступные описания могут не объявляться, поэтому может иметь смысл использовать aria-labelledby, если вы хотите быть уверены, что инструкции так или иначе объявляются.

Использованная литература: