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

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

<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>

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


html wai-aria wcag2.0
person Andrew Pham    schedule 14.07.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это тот случай, когда вам не нужна 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 в любом случае скрывает его от программ чтения с экрана.

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

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

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

person aardrian    schedule 15.07.2016
comment
Потрясающие! Я прочитал больше о ARIA free и о том, как HTML5 уже поддерживает большую часть специальных возможностей после того, как вы упомянули об этом, поэтому большое спасибо за разъяснение. Я ухожу с html5accessibility.com, чтобы убедиться, что все, что я делаю, поддерживается доступностью, но есть ли там что-нибудь сложное, на что я должен обратить внимание? - person Andrew Pham; 16.07.2016
comment
HTML5Accessibility.com - фантастический ресурс, и я рад, что вы ищете. Что касается хитрости, если вы ознакомитесь с 5 правил использования ARIA и подходите к этому осторожно, я думаю, вы будете в отличной форме. Я, например, очень рад видеть, что вы проявляете интерес. - person aardrian; 18.07.2016