placeholder와 aria-label을 사용해도 레이블 문제가 남는 이유

웹 폼 입력 필드에서 <label> 요소 없이 placeholder 속성이나 aria-label만으로 레이블을 대체할 경우, 사용자가 텍스트를 입력하는 순간 힌트가 사라져 필드 목적을 잃어버리는 문제가 발생합니다. W3C Accessible Name Computation 알고리즘 우선순위와 명시적 <label for> 결합의 필요성을 분석합니다.

Accessible Name Computation 알고리즘 산출 우선순위

브라우저 접근성 엔진이 폼 필드의 접근가능한 이름(Accessible Name)을 계산할 때 다음 우선순위를 적용합니다.

1순위: aria-labelledby 속성이 참조하는 요소 텍스트, 2순위: aria-label 속성값, 3순위: <label for='id'>로 명시적으로 연결된 텍스트, 4순위: title 속성값, 5순위: input의 placeholder 속성값. placeholder는 최하위 순위이며 입력값이 들어가는 순간 화면에서 사라져 시각적 안내 역할을 상실합니다.

placeholder 속성의 시각적·인지적 한계점

placeholder는 입력 힌트(Hint) 목적으로 설계된 속성이며 정식 레이블(Label)이 아닙니다. 사용자가 필드에 단 1글자라도 입력하면 placeholder 텍스트가 사라지므로, 재검토 시 해당 필드가 무엇을 입력받는 곳인지 파악하기 어렵습니다.

또한 대다수 브라우저의 기본 placeholder 색상은 명암비가 2.5:1 수준으로 낮아 저시력 사용자가 읽기 어려우며, 색상을 강제로 어둡게 수정하면 실제 입력값과 구분하기 힘든 부작용이 생깁니다.

올바른 명시적 HTML <label> 결합 구현 코드

입력 필드에는 항상 영구적으로 노출되는 명시적 <label> 요소를 결합해야 합니다.

• 명시적 결합: <label for='user-email'>이메일 주소</label><input type='email' id='user-email' />
• 암시적 결합: <label>이메일 주소 <input type='email' /></label>
• 시각적 숨김 레이블: 디자인상 레이블을 화면에 숨겨야 하는 경우 .sr-only 클래스를 사용하여 접근성 트리에 텍스트를 남깁니다.