온라인 서식 label, title, placeholder 사용 가이드 > 그누보드5 가이드

그누보드5 가이드

기존 그누보드4와 다른것들이나 새로워진 것을 설명합니다.

온라인 서식 label, title, placeholder 사용 가이드 정보

마크업 온라인 서식 label, title, placeholder 사용 가이드

본문

목차

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

들어가기

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

다음은 그누보드4s 에서 온라인 서식 중 input, select, textarea 등과 label 을 연결하는 방법론입니다.
퍼블리싱을 하다 보면 디자인 혹은 시각적 이유로 label 은 화면에 보이지 않도록 처리하는 경우가 있습니다.
이 때 스크린 리더 사용자는 숨겨진 label 을 스크린 리더가 인식해주기 때문에 별다른 어려움을 느끼지 않을 수 있지만, 되려 일반인들이 인식하기 어려운 문제가 발생할 수 있습니다.
이러한 상황에 대한 해결책으로 다음의 방법을 제시하고 있으며, 실제 그누보드4s 에서 활용하고 있는 방법입니다.
예제 중 sound_only 는 스크린 리더에서만 출력되도록 미리 정의된 css 클래스입니다.
센스리더는 labeltitle 을 중복 사용하는 경우 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 의 기능을 쉽사리 유추할 수 있는 경우 titlelabel 보다 간략하게 작성하거나 생략한다. 예를 들어, '회원님들에 대한 안내문 메일' 이라는 label 이 있을 경우, title 은 '메일' 정도로 간략하게 작성하거나 생략한다.
  6. 모바일 디바이스 접속 시 placeholder 를 우선적으로 사용하고, radio, checkbox, select, textarea 인 경우 label 만 사용한다. (placeholderlabel 을 대체할 수 없다고 html 스펙에 명시되어 있음을 fb 에서 황규연님이 알려주셨습니다. 참고해주세요.)

댓글 6개

placeholder는 label과 다른 역할을 하는 요소로, label이나 title의 대체 속성이 될 수 없어요.
placeholder는 예로, 이메일 [이메일 입력창] 이 있다면, 이메일 주소 입력 예시를 보여주는 것으로 label과 쓰임이 다릅니다 :)

(앗.. 밑에 추가되었네요 ㅎㅎ)
네, 그래서 사실 이 부분을 어떻게 처리할까 고민 중입니다.
placeholder 는 시각적으로 유용하지만, 보이스오버 같은 경우 본문에서도 언급한 바와 같이 label 과 함께 제공될 때 중복으로 음성을 출력해줘서요.
그런데 어떤 분은 placeholder 의 명도대비가 낮다는 점을 지적하시기도 하시네요.
고민입니다. ㅠㅠ
지운아빠님..

이 게시물 처럼.. 목차가 나오게 해서 글을 작성하려면 어떻게 해야 하는지 궁금해서 문의드려 봅니다.
전체 16 |RSS

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT