전통적인 HTML 폼 관련 요소를 사용하여 폼을 구현할 때 컨트롤에 레이블을 지정하고 레이블을 컨트롤과 명시적으로 연결하는 것이 중요합니다. 스크린 리더 사용자가 페이지를 탐색할 때, 스크린 리더는 폼 컨트롤을 알려주지만, 레이블과 폼이 직접적으로 연결되지 않으면 스크린 리더는 어떤 레이블이 적절한지 알 방법이 없습니다.
아래의 예는 레이블이 있는 간단한 폼을 보여줍니다. 각{{ HTMLElement("input") }} 요소는 id를 가지고 있고, 각{{ HTMLElement("label") }} 요소는 자신과 연결된 {{ HTMLElement("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>
HTML {{ HTMLElement("label") }} 요소는 폼 관련 요소로 적당하지만, 많은 폼 컨트롤은 {{ HTMLElement("div") }}나 {{ HTMLElement("span") }}를 사용한 동적인 Javascript 위젯으로 구현되어있습니다. W3C의 Web Accessibility Initiative에서 만들어진 WAI-ARIA, Accessible Rich Internet Applications 사양은 이러한 경우를 위해 aria-labelledby 속성을 제공하고 있습니다.
아래의 예에서는 순서 없는 리스트를 사용하여 구현한 라디오 버튼 그룹을 보여주고 있습니다. 3행의 {{ HTMLElement("ul") }} 요소에 aria-labelledby 속성에 라디오 그룹의 레이블인 {{ HTMLElement("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>
폼 컨트롤을 가끔 label 외에 추가설명이 있는 경우가 있다. ARIA는 aria-describedby 속성을 사용하여 설명을 컨트롤과 직접 연관시킵니다.
아래 예제는 {{ HTMLElement("div") }} 안의 문장이 {{ HTMLElement("button") }} 요소를 설명하는 것을 보여줍니다. {{ HTMLElement("button") }}의 aria-describedby 속성은 {{ HTMLElement("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 는 폼 컨트롤의 필수나 유효하지 않음을 나타내는 속성을 제공합니다.
아래의 예제는 세 개의 필드가 있는 간단한 폼을 보여줍니다. 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 문서를 참조하세요.