13장 이름표가 사라지는 폼
placeholder만 있는 폼
세 칸을 채운 뒤의 화면
입력하는 순간 이름표가 지워진다
되돌아왔을 때 세 번째 칸이 무엇이었는지 알 수 없다
label이 있는 폼
세 칸을 채운 뒤의 화면
숫자만 입력해도 됩니다
이름표가 칸 위에 그대로 남는다
형식 안내는 placeholder가 아니라 별도 문장으로
「placeholder만 있는 폼」이 의도적으로 잘못 만든 교보재입니다.
이름표를 placeholder로만 두었습니다. 디자인은 깔끔해 보이지만,
입력을 시작하는 순간 그 칸이 무엇을 묻던 칸인지 화면에서 사라집니다.
이 문제는 잠깐 다른 일을 하다 돌아왔을 때, 제출 전에 검토할 때, 오류를 고치려고 되짚을 때 드러납니다. 스크린리더 사용자에게는 더 이릅니다. 브라우저에 따라 placeholder를 읽지 않거나, 읽더라도 값이 들어가면 그만 읽습니다.
「label이 있는 폼」처럼 <label for>로 이름표를 연결하고, 형식 안내가 필요하면
placeholder 대신 별도 문장으로 두고 aria-describedby로 묶습니다.
책 13장에서 다룹니다.