목차

1. 들어가기
2. label 만 사용하는 경우
3. title 만 사용하는 경우
4. label 과 title 을 중복 사용하는 경우
5. placeholder 만 사용하는 경우
6. 정리

들어가기

이번 글은 다른 글보다 더 문장이 거친 것 같습니다. 작업 중 틈틈이 정리해서 올리다보니... 안습입니다. ㅠ

다음은 그누보드4s 에서 온라인 서식 중 input, select, textarea 등과 label 을 연결하는 방법론입니다.
퍼블리싱을 하다 보면 디자인 혹은 시각적 이유로 label 은 화면에 보이지 않도록 처리하는 경우가 있습니다.
이 때 스크린 리더 사용자는 숨겨진 label 을 스크린 리더가 인식해주기 때문에 별다른 어려움을 느끼지 않을 수 있지만, 되려 일반인들이 인식하기 어려운 문제가 발생할 수 있습니다.
이러한 상황에 대한 해결책으로 다음의 방법을 제시하고 있으며, 실제 그누보드4s 에서 활용하고 있는 방법입니다.
예제 중 sound_only 는 스크린 리더에서만 출력되도록 미리 정의된 css 클래스입니다.
센스리더는 label 과 title 을 중복 사용하는 경우 label 값을 우선으로, 중복되지 않게 음성을 출력하고 있습니다.
하지만 다른 스크린리더는 중복으로 음성 출력을 하는 경우도 있습니다.

label 만 사용하는 경우

<label for="stx">검색어</label>
<input type="text" name="stx" id="stx">

<label for="today" class="sound_only">오늘로 지정</label>
<input type="text" name="today" id="today"> 오늘

<label for="check" class="sound_only">회원체크</label>
<input type="checkbox" name="check" id="check">

input[type=radio||checkbox], select, textarea

title 만 사용하는 경우

input[type=file] 단, 인접한 곳(보통 input[type=file]의 바로 앞에) 보충텍스트를 함께 제공할 것을 권장

label 과 title 을 중복 사용하는 경우

<label for="banned" class="sound_only">차단하기</label>
<input type="checkbox" name="banned" id="banned">
<label for="banned_today" class="sound_only">차단일을 오늘로 지정</label>
<input type="checkbox" name="banned_today" id="banned_today" title="차단일을 오늘로 지정">

placeholder 만 사용하는 경우

모바일 디바이스로 접속했을 때 보이스오버에서는 label, placeholder 중복 시 음성도 중복해서 출력합니다.

1. input[type=text] 일 때 placeholder 를 사용한다.
2. 1.의 예외 table.frm_tbl 에 속한 th 값을 label 로 쓸 수 있을 때는 예외로 label 을 사용한다.
3. input[type=text] 의 넓이가 placeholder 문자열의 넓이보다 작으면 label 을 중복 사용한다.
4. 2.의 예외 이때 label 은 시각적으로 표시되어야 한다. 아니라면 placeholder 만 사용한다.

정리

1. label 이 시각적으로 표시되는 경우, title 을 사용하지 않는다.
2. label 이 시각적으로 표시되지 않지만, 인접한 시각적 보충텍스트가 존재하는 경우 title 을 사용하지 않는다.
3. label 이 시각적으로 표시되지 않고, 인접한 시각적 보충텍스트가 존재하지 않는 경우 title 을 중복 사용한다.
4. label 이 시각적으로 표시되지 않고, 인접한 시각적 보충텍스트가 존재하지 않으면서 동시에 해당 서식이 다른 서식의 기능을 보조하며, 실제 서버로 값을 전송하지 않는 경우 title 을 중복 사용한다.
5. 문맥과 정황을 고려하여 input 의 기능을 쉽사리 유추할 수 있는 경우 title 은 label 보다 간략하게 작성하거나 생략한다. 예를 들어, '회원님들에 대한 안내문 메일' 이라는 label 이 있을 경우, title 은 '메일' 정도로 간략하게 작성하거나 생략한다.
6. 모바일 디바이스 접속 시 placeholder 를 우선적으로 사용하고, radio, checkbox, select, textarea 인 경우 label 만 사용한다. (placeholder 로 label 을 대체할 수 없다고 html 스펙에 명시되어 있음을 fb 에서 황규연님이 알려주셨습니다. 참고해주세요.)