폼은 사용자가 필드 또는 필드 그룹에 데이터를 입력할 수 있게 해주는 요소입니다. 폼은 단일 필드처럼 단순할 수도 있고, 페이지당 여러 필드가 있는 다단계 폼 요소, 입력 유효성 검사, 때로는 CAPTCHA가 포함된 복잡한 형태일 수도 있습니다.
폼은 접근성 관점에서 올바르게 구현하기 가장 어려운 요소 중 하나로 간주됩니다. 이미 다룬 모든 요소에 대한 지식과 함께 폼에만 특화된 추가 규칙에 대한 이해가 필요하기 때문입니다. 하지만 이해와 시간을 투자하면 여러분과 사용자에게 적합한 접근성 있는 폼을 만들 수 있습니다.
폼은 이 과정의 마지막 컴포넌트별 모듈입니다. 이 모듈은 폼 관련 특정 지침에 초점을 맞출 것이지만, 콘텐츠 구조, 키보드 포커스, 색상 대비와 같이 이전 모듈에서 배운 다른 모든 지침도 폼 요소에 적용됩니다.
Note: 참고: 더 나은 폼을 만드는 방법을 배우려면 Learn Forms 과정을 검토하세요. 해당 과정에는 추가적인 접근성 관련 폼 콘텐츠가 포함된 폼 접근성 모듈이 있습니다.
폼의 핵심은 필드입니다. 필드는 입력이나 라디오 버튼 요소와 같이 사용자가 콘텐츠를 입력하거나 선택할 수 있게 해주는 작은 인터랙티브 패턴입니다. 선택할 수 있는 다양한 종류의 폼 필드가 있습니다.
기본 권장사항은 ARIA로 커스텀 요소를 만드는 대신 기존의 HTML 패턴을 사용하는 것입니다. 필드 상태, 속성, 값과 같은 특정 기능과 기능성이 HTML 요소에 본질적으로 내장되어 있는 반면, 커스텀 ARIA는 수동으로 추가해야 하기 때문입니다.
Note: 상황상 커스텀 폼 필드를 만들어야 하는 경우, 이러한 커스텀 폼 필드를 가능한 한 접근성 있게 만드는 방법을 이해하기 위해 ARIA와 HTML, 키보드 포커스, JavaScript 모듈을 반드시 검토하세요.
ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>HTML
<form id="sundae-order-form">
<!-- form content -->
</form>가장 접근성 있는 폼 필드 패턴을 선택하는 것 외에도, 해당되는 경우 필드에 HTML autocomplete 속성을 추가해야 합니다. autocomplete 속성을 추가하면 사용자 에이전트와 보조 기술(AT)에 더 세분화된 목적 정의나 식별이 가능해집니다.
autocomplete 속성을 사용하면 사용자가 시각적 표현을 개인화할 수 있습니다. 예를 들어, 생일 autocomplete 속성(bday)이 할당된 필드에 생일 케이크 아이콘을 표시하는 것과 같습니다. 더 일반적으로, autocomplete 속성은 폼 작성을 더 쉽고 빠르게 만듭니다. 이는 특히 인지 및 읽기 장애가 있는 사람들과 스크린 리더와 같은 보조 기술을 사용하는 사람들에게 도움이 됩니다.
<form id="sundae-order-form">
<p>이름: <input type="name" autocomplete="name"></p>
<p>전화번호: <input type="tel" autocomplete="tel"></p>
<p>이메일 주소: <input type="email" autocomplete="email"></p>
</form>마지막으로, 컴포넌트를 사용하기 전에 사용자에게 동작에 대해 경고하지 않은 경우, 폼 필드는 포커스를 받거나 사용자 입력을 받을 때 맥락적 변화를 일으켜서는 안 됩니다. 예를 들어, 필드가 포커스를 받거나 사용자가 필드에 내용을 추가했을 때 폼이 자동으로 제출되어서는 안 됩니다.
레이블은 필드의 목적, 필수 여부, 그리고 입력 형식과 같은 필드 요구사항에 대한 정보를 사용자에게 알려줍니다. 레이블은 항상 보여야 하며 폼 필드를 사용자에게 정확하게 설명해야 합니다.
접근성 있는 폼의 기본 원칙 중 하나는 필드와 그 레이블 사이의 명확하고 정확한 연결을 설정하는 것입니다. 이는 시각적으로나 프로그래밍적으로 모두 해당됩니다. 이러한 맥락이 없다면, 사용자는 폼의 필드를 어떻게 채워야 할지 이해하지 못할 수 있습니다.
<form id="sundae-order-form">
<p><label>이름 (필수): <input type="name" autocomplete="name" required></label></p>
<p><label>전화번호 (필수): <input type="tel" autocomplete="tel" required></label></p>
<p><label>이메일 주소: <input type="email" autocomplete="email"></label></p>
</form>또한, 우편 주소와 같은 관련된 폼 필드들은 프로그래밍적으로나 시각적으로 그룹화되어야 합니다. 한 가지 방법은 fieldset/legend 패턴을 사용하여 비슷한 요소들을 그룹화하는 것입니다.
필드 설명은 필드와 요구사항에 대한 더 많은 맥락을 제공하는 데 사용된다는 점에서 레이블과 목적이 비슷합니다. 레이블이나 폼 지침이 충분히 설명적이라면 접근성을 위해 필드 설명이 반드시 필요한 것은 아닙니다.
하지만 폼 오류를 피하기 위해 추가 정보를 제공하는 것이 유용한 상황이 있습니다. 예를 들어, 비밀번호 필드의 최소 입력 길이에 대한 정보를 전달하거나 사용자에게 어떤 달력 형식을 사용해야 하는지(예: MM-DD-YYYY) 알려주는 경우입니다.
폼에 필드 설명을 추가하는 데 사용할 수 있는 다양한 방법이 있습니다. 가장 좋은 방법 중 하나는 <label> 요소 외에도 폼 요소에 aria-describedby 속성을 추가하는 것입니다. 스크린 리더는 설명과 레이블을 모두 읽을 것입니다.
요소에 aria-labelledby 속성을 추가하면, 속성 값이 <label> 내의 텍스트를 덮어씁니다. 항상 지원하고자 하는 모든 보조 기술로 최종 코드를 테스트하는 것을 잊지 마세요.
접근성 있는 폼을 만들 때, 사용자가 폼 오류를 범하는 것을 방지하기 위해 할 수 있는 일이 많습니다. 이 모듈의 앞부분에서 우리는 필드를 명확하게 표시하고, 식별 가능한 레이블을 만들며, 가능한 한 자세한 설명을 추가하는 것을 다뤘습니다. 하지만 폼이 얼마나 명확하다고 생각하든, 결국 사용자는 실수를 할 것입니다.
사용자가 폼 오류를 만났을 때, 첫 번째 단계는 오류를 알리는 것입니다. 오류가 발생한 필드는 명확하게 식별되어야 하며, 오류 자체가 텍스트로 사용자에게 설명되어야 합니다.
오류 메시지를 표시하는 다양한 방법이 있습니다. 예를 들면:
- 팝업 모달, 오류가 발생한 곳 근처에 인라인으로 표시
- 페이지 상단에 하나의 더 큰 메시지로 그룹화된 오류 모음
오류를 알릴 때 키보드 포커스와 ARIA 실시간 영역 옵션에 주의를 기울이세요.
가능한 한, 오류를 해결하는 방법에 대한 자세한 제안을 사용자에게 제공하세요. 사용자에게 오류를 알리는 데 사용할 수 있는 두 가지 속성이 있습니다.
- HTML required 속성을 사용할 수 있습니다. 브라우저는 필드 유효성 검사 매개변수를 기반으로 일반적인 오류 메시지를 제공할 것입니다.
- 또는 aria-required 속성을 사용하여 보조 기술에 맞춤형 오류 메시지를 전달할 수 있습니다. 모든 사용자에게 메시지를 표시하는 추가 코드를 넣지 않는 한 보조 기술만 메시지를 받게 됩니다.
사용자가 모든 오류가 해결되었다고 생각하면, 폼을 다시 제출할 수 있게 하고 제출 결과에 대한 피드백을 제공하세요. 오류 메시지는 사용자에게 더 많은 업데이트가 필요하다고 알려주는 반면, 성공 메시지는 모든 오류가 해결되었고 폼이 성공적으로 제출되었음을 확인해줍니다.
Note: WCAG 2.2가 아직 개발 중이지만, Target Size (Minimum), Consistent Help, Accessible Authentication, Redundant Entry와 같이 더 접근성 있는 폼 경험에 초점을 맞춘 여러 성공 기준이 제안되어 있으므로, 향후 프로젝트를 위해 이를 인지하고 있어야 합니다. Cop