사용자 입력에는 이와 대응하는 레이블을 제공해야 한다. 레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말한다. 옷에도 라벨이 있듯이 입력 서식에도 라벨, 즉, 레이블을 제공해야 한다. 레이블 제공에 대한 사례들을 살펴보도록 하겠다.
레이블이 시각적으로 노출되어 있는 경우
청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린리더가 "편집창"이라고만 읽어준다. 아이디 입력창도 "편집창", 비밀번호 입력 창도 "편집창"이라고 읽어주기 때문에 무엇을 입력해야 하는지 알 수 없다. 따라서 이에 대한 설명을 제공해야 한다.
(1) 레이블과 입력 서식이 1:1 매칭인 경우
레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공
<label for="user_id">아이디</label>
<input type="text" id="user_id" />
<label for="user_pw">비밀번호</label>
<input type="text" id="user_pw" />이렇게 제공하게 되면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게 된다.
(2) 레이블과 선택 서식이 1:1 매칭인 경우
<label for="user_gender">성별</label>
<select id="user_gender">
<option value selected>성별</option>
<option value="0">남자</option>
<option value="1">여자</option>
</select>
(3) 레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우
<input type="radio" id="gender_male" />
<label for="gender_male">남자</label>
<input type="radio" id="gender_female" />
<label for="gender_female">여자</label>
<input type="checkbox" id="agree" />
<label for="agree">이용약관에 동의합니다.</label>라디오 버튼과 체크 박스는 컨트롤 크기가 매우 작은데, 이렇게 레이블을 매칭 시켜주면 레이블만 선택하더라도 컨트롤이 선택되기 때문에 편리하다.
(4) 레이블과 입력 서식이 1:다 매칭인 경우
각 입력 서식에 대해 title을 제공
<input type="text" title="생년월일 중 년 4자리 입력" />
<input type="text" title="생년월일 중 월 입력" />
<input type="text" title="생년월일 중 일 입력" />
레이블이 시각적으로 노출되지 않은 경우
각 입력 서식에 대해 title을 제공
<input type="text" title="아이디" />
<input type="text" title="비밀번호" />스크린리더는 레이블과 타이틀을 둘 다 읽어주지만 둘 다 제공한 경우 스크린리더에 따라 레이블을 읽어주기도 하고 타이틀을 읽어주기도 한다. 따라서 중복 제공은 피하고 클릭할 수 있는 범위가 늘어나기 때문에 1:1매칭인 경우는 우선적으로 레이블을 제공하고 이외의 경우에는 타이틀로 설명을 제공해주시면 된다.
[ 출처 ]
BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35126