양식은 사용자가 필드 또는 필드 그룹에 데이터를 제공할 수 있는 요소입니다. 양식은 단일 입력란처럼 간단할 수도 있고 페이지당 여러 입력란, 입력 유효성 검사, 경우에 따라 보안문자가 있는 다단계 양식 요소처럼 복잡할 수도 있습니다.
양식은 이미 다룬 모든 요소에 대한 지식과 양식에만 적용되는 추가 규칙을 모두 알아야 하므로 접근성 관점에서 가장 다루기 어려운 요소 중 하나로 간주됩니다. 약간의 이해와 시간을 들여 나와 사용자에게 적합한 접근성 양식을 만들 수 있습니다.
양식은 이 과정의 마지막 구성요소별 모듈입니다. 이 모듈에서는 양식 관련 가이드라인에 중점을 두지만 콘텐츠 구조, 키보드 포커스, 색상 대비 등 이전 모듈에서 배운 다른 모든 가이드라인도 양식 요소에 적용됩니다.
필드
양식의 핵심은 필드입니다. 필드는 사용자가 콘텐츠를 입력하거나 선택할 수 있는 작은 양방향 패턴(예: 입력란 또는 라디오 버튼 요소)입니다. 다양한 양식 필드를 선택할 수 있습니다.
기본 권장사항은 ARIA로 맞춤 항목을 빌드하는 대신 기존 HTML 패턴을 사용하는 것입니다. 필드 상태, 속성, 값과 같은 특정 기능과 함수가 본질적으로 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)이 할당된 입력란에 생일 케이크 아이콘을 표시하는 등 시각적 프레젠테이션을 맞춤설정할 수 있습니다. 더 일반적으로 자동 완성 속성을 사용하면 양식을 더 쉽고 빠르게 작성할 수 있습니다. 이는 특히 인지 및 읽기 장애가 있는 사용자와 화면 리더와 같은 AT를 사용하는 사용자에게 유용합니다.
<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에 공유할 수 있습니다. 모든 사용자에게 메시지를 표시하는 코드를 추가하지 않으면 AT만 메시지를 수신합니다.
사용자가 모든 오류가 해결되었다고 생각하면 양식을 다시 제출하고 제출 결과에 관한 의견을 제공하도록 허용합니다. 오류 메시지는 사용자에게 더 많은 업데이트가 필요하다고 알리고 성공 메시지는 모든 오류를 해결하고 양식을 제출했음을 확인해 줍니다.
추가 성공 기준
WCAG 2.2에서는 더 접근하기 쉬운 양식 환경에 중점을 둔 다음과 같은 성공 기준을 도입했습니다.
이해도 확인
접근성 양식에 대한 지식 테스트
다음 중 가장 접근하기 쉬운 양식 입력은 무엇인가요?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>