A11y: 양식 제출 후 사용자에게 알림

사용자가 양식을 작성할 때 제출 결과가 정확하거나 오류가 있는지 여부를 알려야 합니다. 이렇게 하려면 페이지를 다시 로드하는지 또는 제출이 JavaScript를 사용하여 비동기적으로 수행되는지에 따라 달라질 수 있는 몇 가지 단계를 따라야 합니다.

이름, 이메일 및 메시지가 포함된 매우 간단한 문의 양식을 예로 들어 보겠습니다.

<form>
  <div>
    <label for="name">Name</label>
    <input
      id="name"
      name="name"
      type="text"
      autocomplete="name"
      required
    />
  </div>
  <div>
    <label for="email">E-mail</label><br>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
    />
  </div>
  <div>
    <label for="message">Message</label><br>
    <textarea
      id="message"
      name="message" 
      rows="5"
      cols="70"
      required
    ></textarea>
  </div>
  <button>Send</button>
</form>

페이지를 다시 로드하거나 비동기식으로 만드는 두 가지 상황 모두에서 단계는 다음과 같습니다.

헤더와 오류 목록이 있는 경우 양식 시작 부분에 영역을 만듭니다.

헤더에는 정확한("메시지가 전송되었습니다") 또는 잘못된("양식에 3개의 오류가 있습니다. 확인하십시오") 배송 결과를 보고하는 메시지가 포함되어야 합니다.

오류가 있는 경우 헤더 바로 아래에 각 오류를 간략하고 설명적으로 보고하는 목록을 *표시할 것입니다.

목록의 각 항목은 해당 양식 필드에 연결됩니다.

목록의 각 항목은 aria-describedby 속성을 사용하여 오류에 대한 설명으로 사용됩니다.

따라서 이 예에서 모든 필드가 비어 있는 양식을 제출하려고 하면 다음과 같이 표시됩니다.

<form>
  <div>
    <h3>There are 3 errors in your form, please check it</h3>
    <ul>
      <li>
        <a id="error-name" href="#name">The name field is empty. It's a required field and must be filled in.</a>
      </li>
      <li>
        <a id="error-email" href="#email">The email field is empty. It's a required field and must be filled in.</a>
      </li>
      <li>
        <a id="error-message" href="#message">The message field is empty. It's a required field and must be filled in.</a>
      </li>
    </ul>
  </div>
  <div>
    <label for="name">Name</label>
    <input
      id="name"
      name="name"
      type="text"
      autocomplete="name"
      required
      aria-describedby="error-name"
    />
  </div>
  <div>
    <label for="email">E-mail</label><br>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
      aria-describedby="error-email"
    />
  </div>
  <div>
    <label for="message">Message</label><br>
    <textarea
      id="message"
      name="message"
      rows="5"
      cols="70"
      required
      aria-describedby="error-message"
    ></textarea>
  </div>
  <button>Send</button>
</form>

이 솔루션은 양식이 서버에서 전송되고 검증된다면 충분할 것입니다. 이 경우 양식이 콘텐츠 내부에 더 깊숙이 위치하면 페이지가 다시 로드되는 즉시 스크린 리더에서 가장 먼저 발표되는 것이기 때문에 제출 결과를 보고하기 위해 페이지의 <title>를 사용할 수 있습니다. 따라서 사용자가 옳고 그른지 즉시 알 수 있습니다.

<title>Message sent - Contact form</title>
<title>3 Errors - Contact form</title>

제출이 비동기식으로 수행되고 피드백 정보가 표시되면 스크린 리더 사용자는 변경 사항을 알아차리지 못할 수 있습니다. 이것을 피하려면 이미 언급했듯이 <div role="alert"> 안에 삽입하십시오. 그렇게 하는 즉시 스크린 리더가 이를 알리고 포커스를 해당 영역으로 이동합니다.

따라서 삽입해야 하는 HTML은 다음과 같습니다.

<div role="alert">
  <h3>There are 3 errors in your form, please check it</h3>
  <ul>
    [... errors <li> ...]
  </ul>
</div>

이 모든 정보와 기타 정보는 W3C page dedicated to this topic 에서 찾을 수 있으며, 양식 제출 결과를 사용자에게 알리는 방법에 대한 매우 유용한 팁이 제공됩니다.