제가 얼마 전에 블로그에 제목의 중요성에 대한 글을 썼습니다만, 구글 웹마스터 도구로 진단을 하다 보니, 정작 제 자신의 블로그에는 제목이 중복되는 페이지가 꽤 있었습니다!! 특정 카테….

문서를 읽는 방법에서(스크린리더가 되었든, 브라우저가 되었든)

input의 value를 암묵적 label로 처리하기에는 label 보다는 단계가 당연히 낮을 수 밖에 없을것 같은데요. value를 label의 뜻과 동일하게 사용해야한다는 법이 있는것도아니구요.

label이 연결된 경우 label 을 읽어 주는 것이 최상의 접근이며 그렇지 않은경우 value를 암묵적 label로 읽어 주는 두번째 단계라고 생각 할 수 있지 않을까 해요(단지 제생각입니다.;; )

작업을 하다보면 통상 추천하는 방식인 4번째 방법을 사용하게 되는데(1번, 3번 항목은 쓰지 않습니다.), 마크업의 양이 늘어나서 가끔 더 좋은 방법이 없을까 생각을 한적이 있습니다.

그러다가 'implicit labels'에 대한 명세서 내용을 보고, 만약 value 값으로 레이블링 하는 것이 문제가 없다면 이 방법도 괜찮은거 아닌가 하는 생각이 들었습니다.

굳이 label을 쓰지 않더라도 말이죠.(사용성은 떨어질지 몰라도)

물론 label을 써야한다는건 동의합니다. ^^

value 값으로 처리되는 것에 대한 접근성의 문제를 다루는 글이 있다면 혹시 주소라도 알 수 없을까요? (저도 열심히 찾아보겠습니다.)

그게 왜 낮은 단계인지, label을 대체할 수 없다는 그런 글이요.. ^^

무식하니 언제나 공부공부공부!!! ㅋㅋ

답변 정말 감사합니다.

<dl><dt>1. 가장 낮은 단계: 레이블이 있을 만한 위치에 텍스트를 놓는 방법</dt><dd>예를 들면, <code>전화번호: <input type="text" name="phone" /></code>와 같이 폼 바로 앞이라는 위치는 정황상 레이블일 가능성이 많다는 것이죠. 그러나 가장 불명확하고 불완전한 방법이겠죠.</dd><dt>2. 낮은 단계: value 속성값을 그대로 쓰는 것</dt><dd>성민장군님이 보여주신 예가 이 경우겠네요. <button>의 경우에는 버튼 자체에 value가 있어서 그것이 시각적으로도 보이고, 기계도 그것을 레이블이라고 처리하니까 문제가 없습니다. 그러나 라디오 버튼의 경우에는 value값을 데이터로 처리하지만, 시각적으로 레이블은 따로 보여주어야 합니다. 그래서 그냥 텍스트로 라디오 버튼 옆에다 value에 있는 값을 그대로 다시 한 번 써주면 암묵적으로 레이블이라고 볼 수 있다는 것이죠.</dd>

<dt>3. 중간 단계: <label>을 쓰되, 명시적으로 폼과 짝지어놓지 않은 것</dt><dd>예를 들면 <code><label>First Name<input type="text" name="firstname"/></label></code>에서와 같이 레이블이 무슨 폼과 짝지어지는지 명시적으로 for나 id 속성값을 주지 않고, 대신에 레이블이 폼을 완전히 감싸서, 바깥에 있는 텍스트가 안에 있는 폼에 대한 레이블이라고 암묵적으로 표시하는 방법입니다. </dd><dt>4. 명시적 레이블링(explicit labeling): for와 id를 써서 레이블과 폼을 명확하게 짝지은 것</dt><dd>예를 들면, <code><label for="firstname">First Name</label><input type="text" name="firstname" id="firstname"/></code>에서와 같이 레이블의 for와 폼의 id를 짝지어줌으로써 명확하게 해당 폼의 레이블이 무엇인지 알 수 있게 하는 방법입니다. 권장되는 방법이지요. 물론 라디오 버튼의 경우, id는 모두 따로 주되, name은 여러 개의 폼이 공유를 해야 한 그룹 내에서 배타적인(exclusive) 선택이 되겠지요. 성민장군님의 예를 명시적인 레이블링으로 다시 표현하면, <code><input type="radio" name="sex" id="male" value="Male"/><label for="male">Male</label><input type="radio" name="sex" id="female" value="Female"/><label for="female">Female</label></code>정도가 되겠네요.</dd></dl>

글도 오랜만이네요…

제목의 중요성에 대해 다시금 정리해주셔서 정말 감사합니다.

저역시 잘 배우고 갑니다~ ^^

참… 안그래도 아침에 지하철에서 html 4.01 명세를 프린트해서 꼼꼼히 보면서 왔는데, 궁금한게 있었습니다.

<blockquote cite="http://www.w3.org/TR/html401/interact/forms.html#h-17.9">For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.

여기서 implicit labels 이라는게 구체적으로 어떤건지 궁금합니다. 뒤에 있는 예제에서 label을 쓰지 않고 value로 처리한게 있는데요.

<code>

<INPUT type="radio" name="sex" value="Male"> Male

<INPUT type="radio" name="sex" value="Female"> Female

</code>

이 예에서는 label을 쓰지 않고 value만으로 implicit labels 이 된다는 말인가요?

시간되시면 답변 부탁드립니다~ ^^

이거 스탠다드 메거진에 투고하는건 어떨까요~? ㅎㅎ

ㅎㅎ 제목 관련 태그가 너무 정리가 잘되어있는데요~? 잘배우겠습니다~~