입력 서식에 레이블 제공하기
오류 유형으로 살펴보는 웹 접근성 지침
사용자로부터 값을 입력 받을 때 사용하는 사용자 인터페이스를 입력 서식이라고 부릅니다. 우리가 입력 서식을 통해 정확한 값을 받기 위해서는 레이블(label)이 필요합니다. 여기서 말하는 레이블은 서식에 입력해야 하는 값이 무엇인지 설명하는 이름표입니다.
이번 글에서는 간단하게 레이블의 제공 여부와 레이블을 올바르게 제공하기 위해 주의해야 할 사항을 오류유형을 통해 살펴보도록 하겠습니다.
입력 서식에 레이블이 없는 경우
입력 서식에 대응하는 레이블이 없다는 것은 사용자가 입력해야 하는 값이 무엇인지 알 수 없는 상황과 같습니다. 레이블처럼 보이는 것이 있어도 스크린리더가 이를 읽지 못하면, 스크린리더 사용자에게는 레이블이 없는 것과 마찬가지입니다.
Example
placeholder로 레이블을 대체한 이메일 입력 서식
예제는 이메일 입력 서식에 레이블을 제공하지 않고, placeholder 속성(입력 서식에 입력을 기대하는 값을 힌트로 지정하는 속성)만을 사용하여 레이블을 대체하였습니다. 이러한 입력 서식은 사용자가 입력을 하는 동시에 입력해야 하는 값이 무엇인지 알 수 없게 됩니다. 또한, PC 환경에서 placeholder를 읽지 못하는 스크린리더 제품도 있기 때문에 placeholder만 사용해서는 안 됩니다.
예제의 경우 가장 좋은 해결방법은 이메일 입력 서식에 대응하는 레이블을 제공하는 것이지만, 시각적인 디자인을 고려하여 레이블을 제공하기 어려운 경우에는 aria-label을 제공하거나, 최소한 title을 제공해야만 합니다.
입력 서식의 레이블이 적절하지 않은 경우
입력 서식 옆에 레이블이 있는데 무엇을 입력해야 할지 헷갈린다면, 사용자는 우리의 의도와 다른 값을 입력할 수 있고, 아니면 입력을 포기할 수도 있습니다. 따라서, 레이블의 의미가 모호하지는 않은지, 오해의 소지는 없는지 사용자의 관점에서 점검해 봐야 합니다.
Example
모호한 레이블을 제공한 근무년수 입력 서식
예제는 실업금여를 모의로 계산해보기 위해서 사용자가 근무한 연수를 입력하도록 요구하고 있는 상황을 연출해 보았습니다. 입력 서식 옆에 '근무년수'라는 레이블이 있지만, 사용자 입장에서는 레이블이 다소 모호해 보일 수 있습니다. 왜냐하면 실제 실업급여를 계산해보기 위해서 필요한 정보는 사용자가 고용보험에 가입한 총 기간이기 때문입니다.
사용자 입장에서는 근무년수와 고용보험에 가입한 기간이 같지 않을 수도 있기 때문에, 단순히 '근무년수'라는 레이블은 실업급여를 계산하기 위해 필요한 입력 서식에 적합하지 않습니다. 예제의 상황에는 '고용보험 총 가입기간'이라는 문구가 '근무년수'라는 문구 보다 명확하여 입력 서식에 대한 레이블로 적합할 것입니다.
입력 서식에 레이블을 올바르게 연결하지 않은 경우
입력 서식 근처에 요구하는 입력 값이 무엇인지 알 수 있게 해주는 텍스트를 제공했다고 해서 레이블이 올바르게 제공되었다고 볼 수는 없습니다. <label> 태그를 사용해도 프로그램상 대응되는 입력 서식이 무엇인지 알 수 없으면, 스크린리더 사용자는 여전히 서식에 입력해야 되는 값이 무엇인지 알지 못합니다.
Example
레이블이 잘못 연결되어 있는 라디오 버튼
<p>충전하시고 싶으신 금액을 선택하여 주세요.</p>
<div class="radio_group">
<input type="radio" name="price" id="price-1">
<label for="price-1">1만원</label>
<input type="radio" name="price" id="price-2">
<label for="price-5">2만원</label>
<input type="radio" name="price" id="price-3">
<label for="price-3">3만원</label>
<input type="radio" name="price" id="price-4">
<label for="price-4">4만원</label>
<input type="radio" name="price" id="price-5">
<label for="price-5">5만원</label>
</div>
예제는 사용자에게 충전하려는 금액이 얼마인지 묻고 충전가능한 금액을 라디오 버튼으로 제공하고 있습니다. 시각적으로 보기에는 문제가 전혀 없어 보입니다.
하지만 문제는 사용자가 충전을 하려고 '2만원'의 레이블을 클릭하자, '5만원' 레이블 옆에 있는 라디오 버튼이 선택되었습니다. 위 예제의 코드를 살펴보면 '2만원' 레이블의 for 속성값이 '5만원'의 입력 서식의 id값과 일치하고 있습니다. 이렇게 입력 서식에 레이블을 올바르게 매칭하지 않으면, 위 예제의 상황에서 사용자는 원하는 금액을 충전하지 못하거나 충전을 포기할 수도 있습니다.
이와 같은 상황을 막기 위해서는 <label>의 for 속성 값이 존재하는지 확인하고, 대응시키려는 입력 서식의 id값과 완벽하게 일치시켜야 합니다.
입력 서식의 id가 페이지 내에서 중복되는 경우
Example
같은 id를 사용하는 입력 서식들이 존재하는 약관동의 페이지
...생략...
<li>
<input type="checkbox" name="terms2" id="terms">
<label for="terms">(필수) 개인 정보 취급 방침</label>
<a href="#" class="btn_small_defalut">상세보기</a>
</li>
<li>
<input type="checkbox" name="terms3" id="terms">
<label for="terms">(필수) 위치 정보 수집 동의</label>
<a href="#" class="btn_small_defalut">상세보기</a>
</li>
...생략...
예제는 흔히 회원가입을 할 때 볼 수 있는 약관동의 페이지입니다. 페이지에는 '서비스 이용 약관'과 '개인 정보 취급 방침', '위치 정보 수집 동의'를 묻는 체크박스 입력 서식 및 레이블이 각각 존재하고 있습니다. 이번에는 각 입력 서식에 대응하는 레이블의 for 속성 값도 id값과 일치하고 있습니다.
하지만, '개인 정보 취급 방침' 체크박스 id와 '위치 정보 수집 동의' 체크박스 id가 "terms"로 동일합니다.
실제로 위 예제의 '위치정보 수집동의'의 레이블을 클릭하면 '개인 정보 취급 방침' 체크박스만 선택이 되는 것을 볼 수 있습니다. 이렇게 사용자의 의도와는 다른 결과를 초래할 수 있기 때문에 웹 표준에서는 한 페이지의 요소의 id값이 중복되면 안 된다고 명시하고 있습니다.
이와 같은 문제를 해결하기 위해서는 중복되는 입력 서식의 id값을 서로 다르게 수정하고, 이러한 문제가 발생하기 전에 오류를 점검하는 과정이 필요합니다.
요약
우리는 누구나 입력 서식이 쉽게 느껴지기를 원합니다. 만약 입력 서식에 대한 설명이 불충분하다면 사용자는 무엇을 입력해야 하는지 이해하지 못할 수 있습니다.
하지만 이를 위해 단순히 <label> 태그를 사용하는 것으로 그칠 것이 아니라, 프로그램상 대응되는 입력 서식이 무엇인지 알 수 있게 대상을 지정해야 합니다. 이를 위해서는 입력 서식의 id값을 각 입력 서식에 대응하는 레이블의 for 속성 값과 일치시켜야 합니다.
이 때 주의할 점은 한 페이지 내에 요소의 id값이 중복되지 않도록 설정하는 것입니다. 이렇게 입력 서식에 레이블을 제공한다면, 누구나 이해하기 쉬운 친절한 입력 서식이 될 것 입니다.
