Form tag and web accessibility

웹 양식(Form)은 사용자가 정보를 입력하고 제출하는 핵심 통로인 만큼, 접근성 수칙을 지키는 것이 매우 중요합니다.

단순히 예쁘게 만드는 것을 넘어, 누구나 오차 없이 입력을 완료할 수 있도록 돕는 필수 규칙들을 정리해 드릴게요.

---

1. <label> 태그를 이용한 이름표 제공

가장 기본적이면서 중요한 규칙입니다. 모든 입력창(input, textarea 등)에는 반드시 연결된 이름표(label)가 있어야 합니다.

• 연결 방법: label의 for 속성 값과 input의 id 속성 값을 일치시킵니다.
• 효과: 스크린 리더가 입력창에 포커스 되었을 때 "이름 입력칸입니다"라고 정확히 읽어줍니다.
• 사용성 개선: 마우스로 작은 체크박스나 라디오 버튼을 직접 누르지 않고, 옆의 글자(label)만 클릭해도 해당 입력창이 선택되어 편리합니다.

---

2. Placeholder를 라벨 대신 사용하지 않기

입력창 안에 흐릿하게 보이는 placeholder는 이름표의 역할을 대신할 수 없습니다.

• 문제점: 글자를 입력하기 시작하면 사라지기 때문에, 사용자가 무엇을 입력하고 있었는지 잊어버릴 수 있습니다. 또한 색상이 너무 연해서 저시력 사용자가 읽기 어려운 경우가 많습니다.
• 해결책: 정보는 반드시 외부의 <label> 태그로 제공하고, placeholder는 입력 예시(예: "010-0000-0000")를 보여주는 용도로만 사용하세요.

---

3. 관련 있는 항목은 <fieldset>과 <legend>로 그룹화

연관된 여러 개의 입력 항목은 하나의 그룹으로 묶어주어야 합니다.

• 예시: '배송지 정보'라는 큰 틀 안에 이름, 주소, 연락처 입력창들이 있을 때 유용합니다.
• 효과: 스크린 리더 사용자가 해당 그룹에 진입했을 때 "배송지 정보 영역입니다"라고 맥락을 먼저 설명해 주어 이해를 돕습니다.

HTML

 

<fieldset>
  <legend>성별 선택</legend>
  <input type="radio" id="male" name="gender"><label for="male">남성</label>
  <input type="radio" id="female" name="gender"><label for="female">여성</label>
</fieldset>

---

4. 명확한 에러 메시지 제공

입력이 잘못되었을 때 단순히 "입력값이 틀렸습니다"라고만 하거나, 색상(빨간색 테두리)으로만 표시해서는 안 됩니다.

• 구체적 설명: "비밀번호는 8자리 이상이어야 합니다"처럼 구체적인 해결 방법을 텍스트로 제공해야 합니다.
• 포커스 이동: 오류가 발생했을 때 사용자가 즉시 수정할 수 있도록 해당 오류 칸으로 포커스를 옮겨주는 배려가 필요합니다.

---

💡 실무자의 시선

실무에서는 디자인상 라벨을 숨겨야 하는 상황이 자주 발생합니다.

• 숨김 라벨 활용: 디자인 때문에 화면에 글자를 노출할 수 없다면, label 태그를 쓰되 CSS로 화면에서만 보이지 않게 처리(숨김 레이아웃 기법)하세요. 그래야 스크린 리더는 읽을 수 있습니다.
• 키보드 접근성: 마우스 없이 Tab 키만으로 모든 입력창을 순서대로 이동하고 Enter로 제출할 수 있는지 반드시 테스트해 봐야 합니다.

---

폼 태그의 접근성 수칙을 지키면 모든 사용자가 막힘없이 서비스를 이용할 수 있습니다.

---