양식은 사용자가 필드 또는 필드 그룹에 데이터를 제공할 수 있는 요소입니다. 양식은 단일 필드일 수도 있고 페이지당 여러 필드, 입력 유효성 검사, 보안문자가 있는 복잡한 다단계 양식일 수도 있습니다.
양식은 접근성 관점에서 가장 어려운 요소 중 하나로 간주됩니다. 이미 다룬 모든 요소에 대한 지식은 물론 양식에만 적용되는 추가 규칙도 필요하기 때문입니다. 약간의 이해와 시간을 투자하면 나와 사용자에게 적합한 접근성 양식을 만들 수 있습니다.
양식은 이 과정의 마지막 구성요소별 모듈입니다. 이 모듈에서는 양식 관련 가이드라인에 중점을 두지만, 콘텐츠 구조, 키보드 포커스, 색상 대비와 같은 이전 모듈의 가이드라인도 양식 요소에 적용됩니다.
필드
양식의 기본은 필드입니다. 필드는 사용자가 콘텐츠를 입력하거나 선택할 수 있는 입력 또는 라디오 버튼 요소와 같은 작은 대화형 패턴입니다. 다양한 양식 필드 중에서 선택할 수 있습니다.
필드 상태, 속성, 값과 같은 특정 기능과 함수는 HTML 요소에 내장되어 있으므로 ARIA로 맞춤 항목을 빌드하는 대신 확립된 HTML 패턴을 사용하는 것이 기본 권장사항입니다. 맞춤 필드를 사용하려면 ARIA를 수동으로 추가해야 합니다.
권장하지 않음 - ARIA가 포함된 맞춤 HTML
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
권장 - 표준 HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
해당하는 경우 가장 접근성이 좋은 양식 필드 패턴을 선택하는 것 외에도 필드에 HTML 자동 완성 속성을 추가해야 합니다. 자동 완성 속성을 추가하면 사용자 에이전트와 지원 기술 (AT)에 더 세부적인 목적 정의 또는 식별이 허용됩니다.
자동 완성 속성을 사용하면 생일 자동 완성 속성 (bday)이 할당된 필드에 생일 케이크 아이콘을 표시하는 등 사용자가 시각적 표현을 맞춤설정할 수 있습니다. 일반적으로 자동 완성 속성을 사용하면 양식을 더 쉽고 빠르게 작성할 수 있습니다. 이는 특히 인지 및 읽기 장애가 있는 사용자와 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 유용합니다.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
마지막으로, 사용자가 구성요소를 사용하기 전에 동작에 대해 경고를 받지 않은 경우 양식 필드는 포커스를 받거나 사용자 입력을 받을 때 컨텍스트 변경을 생성해서는 안 됩니다. 예를 들어 필드가 포커스를 받거나 사용자가 필드에 콘텐츠를 추가할 때 양식이 자동으로 제출되어서는 안 됩니다.
라벨
라벨은 필드의 용도, 필드의 필수 여부를 사용자에게 알리고 입력 형식과 같은 필드 요구사항에 관한 정보도 제공할 수 있습니다. 라벨은 항상 표시되어야 하며 사용자에게 양식 필드를 정확하게 설명해야 합니다.
접근성 있는 양식의 기본 원칙 중 하나는 필드와 라벨 간에 명확하고 정확한 연결을 설정하는 것입니다. 이는 시각적으로나 프로그래밍 방식으로 모두 마찬가지입니다. 이 컨텍스트가 없으면 사용자가 양식의 필드를 작성하는 방법을 이해하지 못할 수 있습니다.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
또한 우편 주소와 같은 관련 양식 필드는 프로그래매틱 방식으로 시각적으로 그룹화해야 합니다. 한 가지 방법은 fieldset 및 legend 패턴을 사용하여 유사한 요소를 그룹화하는 것입니다.
설명
필드 설명은 필드와 요구사항에 더 많은 컨텍스트를 제공하는 데 사용된다는 점에서 라벨과 목적이 유사합니다. 라벨이나 양식 안내가 충분히 설명적인 경우 접근성을 위해 필드 설명을 제공하지 않아도 됩니다.
하지만 비밀번호 필드의 최소 입력 길이에 관한 정보를 전달하거나 사용자에게 사용할 캘린더 형식 (예: MM-DD-YYYY)을 알려주는 등 양식 오류를 방지하기 위해 추가 정보를 추가하는 것이 유용한 상황도 있습니다.
다양한 방법을 사용하여 양식에 필드 설명을 추가할 수 있습니다. 가장 좋은 방법 중 하나는 <label> 요소 외에도 aria-describedby 속성을 양식 요소에 추가하는 것입니다. 스크린 리더는 설명과 라벨을 모두 읽어줍니다.
요소에 aria-labelledby 속성을 추가하면 속성 값이 <label> 내의 텍스트를 재정의합니다. 언제나처럼 지원하려는 모든 AT로 최종 코드를 테스트하세요.
오류
접근성 있는 양식을 만들 때 사용자가 양식 오류를 일으키지 않도록 할 수 있는 방법이 많습니다. 이 모듈의 앞부분에서 필드를 명확하게 마크업하고, 식별 라벨을 만들고, 가능한 경우 자세한 설명을 추가하는 방법을 다루었습니다. 하지만 아무리 명확한 양식이라도 결국 사용자가 실수를 하게 됩니다.
사용자가 양식 오류를 발견하면 첫 번째 단계는 오류를 알리는 것입니다. 오류가 발생한 필드를 명확하게 식별해야 하며 오류 자체를 텍스트로 사용자에게 설명해야 합니다.
오류 메시지를 표시하는 방법은 다음과 같이 다양합니다.
- 오류가 발생한 위치 근처에 인라인 모달
- 페이지 상단의 하나의 큰 메시지로 그룹화된 오류 모음
오류를 알릴 때는 키보드 포커스와 ARIA 라이브 영역 옵션에 주의해야 합니다.
가능한 경우 사용자에게 오류를 수정하는 방법에 관한 자세한 제안을 제공합니다. 사용자에게 오류를 알리는 데 사용할 수 있는 속성은 두 가지입니다.
- HTML required 속성을 사용할 수 있습니다. 브라우저가 파일 검증 매개변수를 기반으로 일반 오류 메시지를 제공합니다.
- 또는 aria-required 속성을 사용하여 맞춤 오류 메시지를 지원 기술에 공유할 수 있습니다. 모든 사용자에게 메시지가 표시되도록 코드를 추가하지 않는 한 AT만 이 메시지를 수신합니다.
사용자가 모든 오류가 해결되었다고 생각하면 양식을 다시 제출하고 제출 결과에 관한 의견을 제공하도록 허용합니다. 오류 메시지는 사용자에게 업데이트해야 할 사항이 더 있다고 알려주고, 성공 메시지는 모든 오류를 해결하고 양식을 제출했음을 확인해 줍니다.
추가 성공 기준
WCAG 2.2에서는 접근성이 더 뛰어난 양식 환경에 중점을 둔 다음 성공 기준을 도입했습니다.