Forms

양식은 사용자가 필드 또는 필드 그룹에 데이터를 제공할 수 있게 해주는 요소입니다. 양식은 단일 필드처럼 간단할 수도 있고 페이지당 여러 필드, 입력 유효성 검사, 경우에 따라 보안문자가 있는 다단계 양식 요소처럼 복잡할 수도 있습니다.

양식은 접근성 측면에서 가장 어려운 요소 중 하나로 여겨집니다. 양식을 사용하려면 앞서 다룬 모든 요소와 양식과 관련된 추가 규칙에 대한 지식이 필요하기 때문입니다. 약간의 이해와 시간만 있으면 개발자와 사용자에게 편리한 양식을 만들 수 있습니다.

Forms는 이 과정의 마지막 구성요소별 모듈입니다. 이 모듈에서는 양식별 가이드라인에 중점을 두지만 콘텐츠 구조, 키보드 포커스, 색상 대비 등 이전 모듈에서 배운 다른 모든 가이드라인도 양식 요소에 적용됩니다.

필드

형태의 핵심은 들판입니다. 필드는 사용자가 콘텐츠를 입력하거나 선택할 수 있게 해주는 입력 또는 라디오 버튼 요소와 같은 작은 상호작용 패턴입니다. 다양한 양식 필드 중에서 선택할 수 있습니다.

맞춤 ARIA는 직접 추가해야 하는 반면 필드 상태, 속성, 값과 같은 특정 기능은 기본적으로 HTML 요소에 내장되어 있으므로, ARIA로 맞춤 항목을 빌드하는 대신 기존 HTML 패턴을 사용하는 것이 좋습니다.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<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/범례 패턴을 사용하여 비슷한 요소를 그룹화하는 것입니다.

내용 입력란

필드 설명은 필드와 요구사항에 대해 더 많은 컨텍스트를 제공한다는 점에서 라벨과 유사합니다. 라벨 또는 양식 안내가 충분히 설명적인 경우 접근성을 위해 필드 설명이 필요하지 않습니다.

그러나 비밀번호 필드의 최소 입력 길이에 대한 정보를 전달하거나 사용할 캘린더 형식 (예: MM-DD-YYYY)을 사용자에게 알리는 등 정보를 추가하는 것이 양식 오류를 방지하는 데 유용한 경우도 있습니다.

양식에 필드 설명을 추가하는 데 사용할 수 있는 방법은 다양합니다. 가장 좋은 방법 중 하나는 <label> 요소 외에 양식 요소에 aria-describedby 속성을 추가하는 것입니다. 스크린 리더는 설명과 라벨을 모두 읽습니다.

요소에 aria-labelledby 속성을 추가하면 속성 값이 <label> 내의 텍스트를 재정의합니다. 항상 그렇듯이 지원하려는 모든 AT로 최종 코드를 테스트해야 합니다.

오류

액세스 가능한 양식을 만들 때 사용자의 양식 오류가 발생하지 않도록 할 수 있는 방법은 다양합니다. 이 모듈의 앞부분에서는 필드를 명확하게 마크업하고, 식별 라벨을 만들고, 가능한 경우 자세한 설명을 추가하는 방법을 알아보았습니다. 그러나 양식이 아무리 명확하다고 생각하더라도 결국 사용자는 실수를 저지를 것입니다.

사용자에게 양식 오류가 발생하면 첫 번째 단계는 오류를 알리는 것입니다. 오류가 발생한 필드는 명확하게 식별해야 하고, 오류 자체를 텍스트로 사용자에게 설명해야 합니다.

오류 메시지를 표시하는 방법에는 여러 가지가 있습니다. 예를 들면 다음과 같습니다.

• 오류가 발생한 곳의 인라인 팝업 모달
• 오류 모음이 페이지 상단에 하나의 큰 메시지로 그룹화되어 있습니다.

오류를 알릴 때는 키보드 포커스와 ARIA 라이브 영역 옵션에 유의하세요.

가능한 경우 사용자에게 오류 해결 방법에 관한 자세한 제안을 제공하세요. 두 가지 속성을 사용하여 사용자에게 오류를 알릴 수 있습니다.

• HTML 필수 속성을 사용할 수 있습니다. 제출된 유효성 검사 매개변수에 따라 브라우저에서 일반적인 오류 메시지를 제공합니다.
• 또는 aria-required 속성을 사용하여 맞춤설정된 오류 메시지를 AT에게 공유할 수 있습니다. 모든 사용자에게 메시지가 표시되도록 코드를 추가하지 않는 한 AT만 메시지를 수신합니다.

사용자가 모든 오류가 해결되었다고 생각하는 경우 양식을 다시 제출하고 제출 결과에 대한 의견을 제공하도록 합니다. 오류 메시지는 사용자에게 업데이트가 더 있음을 알리고 성공 메시지는 사용자가 모든 오류를 해결하고 양식을 성공적으로 제출했음을 확인하는 것입니다.

학습 내용 확인하기

액세스 가능한 양식에 관한 지식 테스트