레이블 제공

사용자 입력에는 대응하는 레이블을 제공해야 한다.

레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말한다.
옷에도 라벨이 있듯, 입력 서식에도 레이블을 제공해야 한다.

---

🥑 레이블이 시각적으로 노출되어 있는 경우

     - 청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린 리더가 "편집창"이라고만 읽어주기 때문에

         아이디를 입력해야 하는지, 비밀번호를 입력해야 하는지 알 수 없다.

 

     1) 레이블과 입력 서식이 1:1 매칭인 경우

     - label for 속성 값과 input id 속성 값을 동일하게 제공

<label for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id">
<label for="user_pw">비밀번호</label>
<input type="text" name="user_pw" id="user_pw">

     2) 레이블과 선택 서식이 1:1 매칭인 경우

<label for="pizza">피자선택</label>
<select name="pizza" id="pizza">
    <option value="default" selected>피자를 선택하세요</option> 
    <option value="1">치즈 퐁듀 파이어 미트</option> 
    <option value="2">블랙앵거스 스테이크</option> 
    <option value="3">베스트 콰트로</option> 
    <option value="4">블랙타이거 슈림프</option> 
</select>

     3) 레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우

<input type="radio" name="size" value="S" id="S">
<label for="S">Small</label>
<input type="radio" name="size" value="M" id="M">
<label for="M">Medium</label>
<input type="radio" name="size" value="L" id="L">
<label for="L">Large</label>

<input type="checkbox" name="topping" value="bacon" id="bacon">
<label for="bacon">베이컨</label>
<input type="checkbox" name="topping" value="cheese" id="cheese">
<label for="cheese">치즈</label>
<input type="checkbox" name="topping" value="onion" id="onion">
<label for="onion">양파</label>
<input type="checkbox" name="topping" value="mushroom" id="mushroom">
<label for="mushroom">버섯</label>

     4) 레이블과 입력 서식이 1:다 매칭인 경우

     - 각 입력 서식에 대해 title을 제공

<input type="text" placeholder="년(4자)" title="생년월일 중 년 4자리 입력">
<input type="text" placeholder="월" title="생년월일 중 월 입력">
<input type="text" placeholder="일" title="생년월일 중 일 입력">

 

🥑 레이블이 시각적으로 노출되지 않은 경우

     - 스크린 리더는 label과 title을 둘 다 읽어주지만 label과 title을 둘 다 제공한 경우

        스크린 리더에 따라 label을 읽어주기도 하고 title을 읽어주기도 한다.

     - 따라서 1:1 매칭인 경우에는 우선적으로 label을 제공하고 이외의 경우에는 title로 설명을 제공해 주면 된다.

<input type="text" placeholder="아이디" title="아이디">
<input type="text" placeholder="비밀번호" title="비밀번호">