기본적인 폼 힌트

전통적인 HTML 폼 관련 요소를 사용하여 폼을 구현할 때 컨트롤에 레이블을 지정하고 레이블을 컨트롤과 명시적으로 연결하는 것이 중요합니다. 스크린 리더 사용자가 페이지를 탐색할 때, 스크린 리더는 폼 컨트롤을 알려주지만, 레이블과 폼이 직접적으로 연결되지 않으면 스크린 리더는 어떤 레이블이 적절한지 알 방법이 없습니다. 

아래의 예는 레이블이 있는 간단한 폼을 보여줍니다. 각<input> 요소는 id를 가지고 있고, 각<label> 요소는 자신과 연결된 <input>의 id를 나타내는  for 속성을 가지고 있습니다.

<form>
  <ul>
    <li>
      <input id="wine-1" type="checkbox" value="riesling"/>
      <label for="wine-1">Berg Rottland Riesling</label>
    </li>
    <li>
      <input id="wine-2" type="checkbox" value="pinot-blanc"/>
      <label for="wine-2">Pinot Blanc</label>
    </li>
    <li>
      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
      <label for="wine-3">Pinot Grigio</label>
    </li>
    <li>
      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
      <label for="wine-4">Gewürztraminer</label>
    </li>
  </ul>
</form>

ARIA로 라벨링 하기

HTML <label> 요소는 폼 관련 요소로 적당하지만, 많은 폼 컨트롤은 <div><span>를 사용한 동적인 Javascript 위젯으로 구현되어있습니다. W3C의 Web Accessibility Initiative에서 만들어진 WAI-ARIAAccessible Rich Internet Applications 사양은 이러한 경우를 위해 aria-labelledby 속성을 제공하고 있습니다.

아래의 예에서는 순서 없는 리스트를 사용하여 구현한 라디오 버튼 그룹을 보여주고 있습니다. 3행의  <ul> 요소에 aria-labelledby 속성에 라디오 그룹의 레이블인 <h3> 요소의  id  rg1_label을 설정했습니다. 

<h3 id="rg1_label">Lunch Options</h3>

<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Thai
  </li>
  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Subway
  </li>
  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
    <img role="presentation" src="radio-checked.gif" /> Radio Maria
  </li>
</ul>  

ARIA로 설명하기

폼 컨트롤을 가끔 label 외에 추가설명이 있는 경우가 있다. ARIA는 aria-describedby 속성을 사용하여 설명을 컨트롤과 직접 연관시킵니다. 

아래 예제는 <div> 안의 문장이  <button> 요소를 설명하는 것을 보여줍니다. <button>의  aria-describedby 속성은 <div>id를 참조합니다. 

<button aria-describedby="descriptionRevert">Revert</button>
<div id="descriptionRevert">Reverting will undo any changes that have been made
                            since the last save.</div>

Note: aria-describedby 속성은 폼 컨트롤 외에도 다른 용도로 사용됩니다. 

필수 필드와 유효하지 않은 필드 

Note: 현재는 전 세계 사용자의 97%가  required를 사용할 수 있으므로 required와 aria-required 모두를 사용하는 것은 더는 권장하지 않습니다.

일반적으로 웹 개발자는 필수 필드와 유효하지 않은 필드를 나타내기 위해서 시각적인 방법을 사용합니다. 보조 기술(ATs)은 언제나 표시된 것을 통해서 정보를 추측하지는 않습니다. ARIA 는 폼 컨트롤의 필수나 유효하지 않음을 나타내는 속성을 제공합니다. 

  • AT에 폼을 완료하기 위한 필수요소임을 알리기 위해 aria-required 속성을 폼에 적용할 수 있습니다. 
  • 데이터 필드에 올바르지 않은 데이터가 있는 것을 AT에 알리기 위해 aria-invalid 상태를 적용하는 것으로 사용자는 올바르지 않은 데이터를 입력했다는 것을 알 수 있습니다. 

아래의 예제는 세 개의 필드가 있는 간단한 폼을 보여줍니다. 4행과 12행에서는 aria-required 속성이 true(레이블 옆에 별표와 함께)로 설정되어 name과 email 필드가 필수임을 나타냅니다. 두 번째 예제는 email 형식을 검증하고 그 결과에 따라서 email 필드(HTML 12행)의 (요소를 시각적으로 변경하는 것과 함께) aria-invalid 속성을 설정하는 Javascript 스니펫입니다. 

<form>
  <div>
    <label for="name">* Name:</label>
    <input type="text" value="name" id="name" aria-required="true"/>
  </div>
  <div>
    <label for="phone">Phone:</label>
    <input type="text" value="phone" id="phone" aria-required="false"/>
  </div>
  <div>
    <label for="email">* E-mail:</label>
    <input type="text" value="email" id="email" aria-required="true"/>
  </div>
</form>

폼 항목의 유효성을 검사하는 스크립트는 다음과 같습니다. 

var validate = function () {
  var emailElement = document.getElementById(emailFieldId);
  var valid = emailValid(formData.email); // returns true if valid, false otherwise

  emailElement.setAttribute("aria-invalid", !valid);
  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
};

유용한 오류 메시지 제공

ARIA alerts to enhance forms 사용법을 읽으세요.

폼 접근성을위한 ARIA 사용에 대한 자세한 지침은 WAI-ARIA Authoring Practices 문서를 참조하세요.