Placeholder는 label이 아닙니다

필드에 힌트 문구를 넣고 레이블을 생략하고 싶을 수 있습니다. 하지만 플레이스홀더는 힌트이지 이름이 아닙니다. ⚠️

누군가 입력을 시작하는 순간 플레이스홀더가 사라집니다. 이제 이 필드가 무엇을 위한 것인지 알려 주는 내용이 남아 있지 않습니다.

기억력이나 주의력에 어려움이 있는 사용자는 힌트가 사라진 뒤에도 그 내용을 기억해야 합니다. 계속 표시되는 레이블은 이러한 부담을 덜어 줍니다.

플레이스홀더 문구는 대개 연한 회색이어서 대비 규정을 충족하지 못하는 경우가 많습니다. 저시력 사용자는 문구를 전혀 읽지 못할 수도 있습니다.

회색 힌트 문구가 이미 입력된 값처럼 보일 수 있습니다. 사용자는 필드를 건너뛰었다가 필수 입력 오류를 보고 당황하게 됩니다.

이름으로서 플레이스홀더를 지원하는 스크린 리더 기능은 브라우저마다 다르고 일관되지 않습니다. 반드시 읽어 준다고 기대할 수 없습니다.

플레이스홀더는 형식 예시와 같은 추가 힌트로 사용하면 괜찮습니다. 실제 레이블과 함께 사용하고, 절대로 플레이스홀더만 사용하지 마세요.

플레이스홀더는 날짜 형식과 같은 형식 예시를 보여 주는 데 유용합니다. 필드의 실제 이름은 여전히 레이블이 전달합니다.

부동 레이블은 입력을 시작하면 위로 올라가 이름을 계속 표시합니다. 실제 레이블을 애니메이션으로 표시하는 방식이므로 기준을 충족합니다.

빠르게 확인해 보세요. 필드에 입력해 보세요. 입력 후 필드가 무엇을 요구하는지 더 이상 알 수 없다면 플레이스홀더가 레이블 역할을 하고 있었던 것입니다.

WCAG의 레이블 또는 지침 기준은 명확하고 계속 표시되는 이름을 요구합니다. 플레이스홀더만 있는 필드는 감사에서 반복적으로 실패합니다.

플레이스홀더는 사라지는 힌트이지 이름이 아닙니다. 실제 레이블을 유지하고, 플레이스홀더는 추가적인 형식 안내에만 사용하세요. 💡