WCAG 2.0 aria-labelledby для заголовка формы и отказа от ответственности

Question

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

<form id="profile optional">
  <h1 arialabelledby="profile">Profile</h1>
  <p aria-describedby="optional">All fields are required unless marked optional</p>

  <fieldset>
    <legend id="userInfo" aria-labelledby="formA">User Info</legend>

    <div class="form-control">
      <label id="firstName" for="firstName">First Name</label>
      <input type="text" name="firstName" aria-labelledby="firstName userInfo" aria-required="true" aria-describedby="error-message"/>
      <span id="error-message" style="display:none" aria-hidden="true">Name is required</span>
    </div>

    <div class="form-control">
      <label id="lastName" for="lastName">Last Name</label>
      <input type="text" name="lastName" aria-labelledby="lastName userInfo" aria-required="true" aria-describedby="error-message"/>
      <span id="error-message" style="display:none" aria-hidden="true">Name is required</span>
    </div>

    <div class="form-control">
      <label id="nickName" for="nickName">Nick Name (optional)</label>
      <input type="text" name="nickName" aria-labelledby="nickName userInfo"/>
    </div>
  <fieldset>

  <fieldset>
  ...
  </fieldset>

  <button type="submit" aria-label="Submit Profile">Submit</button>
</form>

Изменить * код для кнопки отправки

Answer 1

Это тот случай, когда вам не нужна ARIA. Вы можете вернуться к хорошему UX, и это сделает ARIA ненужным.

В начале вашей формы вы предоставляете инструкции о том, что все поля обязательны для заполнения. Это хорошо. Затем для полей, которые являются опцией, вы включаете "(необязательно)" в <label>, Это тоже хорошо.

Вы можете остановиться там и все готово.

Тем не менее, вы добавили ARIA в форму и получили некоторые назад. Например:

<form id="profile optional">
 <h1 arialabelledby="profile">Profile</h1>
 <p aria-describedby="optional">All fields are required unless marked optional</p>

Вы говорите <h1> это помечено <form> когда это должно быть наоборот. Вы также говорите <p> что это описывается <form>что опять было бы наоборот. Просто выдерни все это.

Или возьмите этот случай:

<div class="form-control">
  <label id="lastName" for="lastName">Last Name</label>
  <input type="text" name="lastName" aria-labelledby="lastName userInfo" aria-required="true" aria-describedby="error-message"/>
  <span id="error-message" style="display:none" aria-hidden="true">Name is required</span>
</div>

<input> не требуется aria-labelledby - <label> делает это бесплатно. Дополнительно связывая это с <legend> делает его более многословным и может запутать пользователей.

Вы также должны удалить aria-required и просто используйте HTML5 логическое required, Он хорошо поддерживается и полезен для не читателей экрана.

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

То же самое касается кнопки. Дамп Ария и просто сделать это <button type="submit">Submit Profile</button>, Все ваши пользователи получат пользу от более подробной кнопки.

Поскольку вы хорошо используете <legend> а также <fieldset>Вы можете оставить все эти вещи, и вы в хорошей форме.

Вы только что создали доступную, пригодную для использования форму, не содержащую ARIA. ARIA-free это хорошая вещь. ARIA - это мостовая технология, которую следует использовать только тогда, когда в обычном HTML нет необходимости.