Forms

web.devAccessibility  |  web.dev

Accessibility  |  web.dev

How to build inclusive forms.

web.dev

web.devForms  |  web.dev

Forms  |  web.dev

Create accessible forms.

web.dev

Forms

폼(Form)의 개념과 접근성 원칙

폼이란?

• 사용자가 데이터를 입력할 수 있는 필드나 필드 그룹으로 구성된 요소.

• 간단한 필드 하나로 구성되거나, 여러 단계로 나뉜 복잡한 형태(예: 다중 입력 필드, 유효성 검사, CAPTCHA)일 수도 있음.

• 접근성 측면에서 가장 구현하기 까다로운 요소로, 기존 지식(콘텐츠 구조, 키보드 포커스, 색상 대비 등)과 폼 전용 규칙을 모두 알아야 함.

폼의 주요 구성 요소

1. 필드(Fields)

• 폼의 핵심 구성 요소로, 사용자가 데이터를 입력하거나 선택할 수 있는 상호작용 패턴(예: 입력 필드, 라디오 버튼 등)이다.

• 기본적으로 HTML 기본 패턴 사용을 권장하며, 이는 접근성 기능이 내장되어 있음.
📌
커스텀 필드(ARIA 사용)를 만들어야 한다면, ARIA, 키보드 포커스, JavaScript 모듈을 참고해 접근성을 확보해야 함.

// bad (직접 form 형태를 만들겠어!)
<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

// good (접근성 관련 기능들이 내장되어 있음)
<form id="sundae-order-form">
  <!-- form content -->
</form>

• HTML 자동완성(Autocomplete) 속성 추가:
• 입력 목적(예: 이름, 전화번호)을 더 명확히 정의.
• 사용자 경험 개선: 입력 속도 증가, 시각적 표시(예: 생일 필드에 케이크 아이콘) 등.

<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>

• 주의: 필드에 포커스를 두거나 입력할 때, 자동 제출 등의 행동이 발생하지 않도록 해야 함.

2. 레이블(Labels)

• 필드의 목적, 필수 여부, 입력 요구사항(예: 형식)을 사용자에게 알려줌.

• 레이블은 항상 시각적으로 표시되어야 하며, 필드와 레이블 간의 연결이 명확하고 정확해야 함.

<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>를 사용해 그룹화.



<form id="sundae-order-form">
  <h2>Online Sundae Order Form</h2>
  <fieldset>
    <legend>Customer Info</legend>
    <p><label>Name: <input type=name></label></p>
    <p><label>Telephone: <input type=tel></label></p>
    <p><label>Email address: <input type=email></label></p>
  </fieldset>

  <fieldset>
    <legend>Size</legend>
    <p><label><input type=radio name=size value="small">Small</label></p>
    <p><label><input type=radio name=size value="medium">Medium</label></p>
    <p><label><input type=radio name=size value="large">Large</label></p>
  </fieldset>

  <fieldset>
    <legend>Toppings</legend>
    <p><label><input type=checkbox name=topping value="whipped-cream">Whipped cream</label></p>
    <p><label><input type=checkbox name=topping value="cherry">Cherry</label></p>
    <p><label><input type=checkbox name=topping value="nuts">Nuts</label></p>
    <p><label><input type=checkbox name=topping value="caramel-sauce">Caramel sauce</label></p>
    <p><label><input type=checkbox name=topping value="chocolate-sauce">Chocolate sauce</label></p>
  </fieldset>
  <p><label>Delivery instructions: </label><br><textarea name="comments"></textarea></p>
  <p><button>Submit order</button></p>
</form>

3. 설명(Descriptions)

• 레이블만으로 충분히 설명되지 않을 때 추가적인 정보를 제공.
• 예: 비밀번호 최소 길이, 날짜 형식(MM-DD-YYYY) 등.

• description을 추가할 방법은 많으나, label에 aria-describedby 속성을 추가하는 것이 대표적
• 스크린 리더가 레이블과 설명을 함께 읽음.

<form id="sundae-order-form">
  <h2>Online Sundae Order Form</h2>
  
  <fieldset>
    <legend>Customer Info</legend>
    <p><label>Name (required): <input type=name required aria-describedby="name-validation"><br>
        <span id="name-validation" class="validation-message">Please provide your full name</span></label></p>
    <p><label>Telephone (required): <input type=tel required aria-describedby="tel-validation"><br>
        <span id="tel-validation" class="validation-message">Please provide an area code and use the format XXX-XXX-XXXX</span></label></p>
    <p><label>Email address (required): <input type=email required aria-describedby="email-validation"><br>
        <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label></p>
  </fieldset>
  
	...
  <p><button>Submit order</button></p>
</form>

4. 오류 처리(Errors)

• 사용자가 실수를 했을 때 오류를 명확히 알려야 함:
• 오류 필드 위치와 에러 내용을 텍스트로 설명.
• 오류 메시지 표시 방법:
• 오류가 발생한 곳 근처에 인라인으로 표시되는 모달
• 페이지 상단에 하나의 큰 메시지로 묶여 있는 오류 모음

• 수정 방법 제안:
• 사용자에게 오류 해결 방법을 구체적으로 제안해야 함. 이를 위한 두 가지 속성이 있음.
• HTML required 속성:
• 브라우저가 자동으로 일반적인 오류 메시지를 제공합니다. 이는 필드 유효성 검사에 따른 기본 메시지입니다.
• aria-required 속성:
• 사용자 정의 오류 메시지를 제공할 수 있습니다. 하지만 이 메시지는 접근성 도구(AT) 사용자만 볼 수 있으며, 모든 사용자에게 메시지를 보려면 추가 코드가 필요합니다.

• 폼 제출 후 피드백에 관한 내용도 중요.
• 사용자가 오류를 모두 수정했다고 생각하면, 폼을 재제출할 수 있게 해야 하고,
• 성공 메시지를 제공하여 폼 제출이 성공적이었다는 것을 알립니다.
• 오류 메시지는 사용자가 추가적인 수정이 필요함을 알려주고, 성공 메시지는 모든 오류가 해결되어 제출이 성공적임을 확인시켜 줍니다.

추가 성공 기준 (WCAG 2.2)

• Target Size (Minimum) 클릭 가능한 요소 크기를 충분히 크게 설정.

• Consistent Help 일관된 도움말 제공.

• Accessible Authentication 접근 가능한 인증 절차 제공.

• Redundant Entry 동일 정보를 반복적으로 입력하지 않도록 설계.

요약