필드의 해당 레이블을 누구나 예상할 수 있는 위치에 두어야 합니다.
필드의 왼쪽이나 위쪽에 레이블을 위치해야 사용하자가 혼란스러워 하지 않습니다.
기술설명
양식 안에 있는 필드의 레이블(label)이 사용자가 예상하는 위치에 있다면, 아무리 복잡해도 사용자가 찾는 필드를 쉽게 찾을 수 있습니다. 대부분의 레이블은 필드 바로 앞에 위치해 있습니다.
왼쪽에서 오른쪽 방향으로 글을 쓰는 언어의 경우, 필드 왼쪽이나 위쪽에 레이블을 배치하고, 반대인 경우에는 필드의 오른쪽이나 위쪽으로 배치합니다.
라디오 버튼이나 체크 박스의 레이블은 필드 뒤에 배치됩니다.
이렇게 위치를 정하는 이유는 필드, 라디오 버튼, 체크박스 들의 레이블 위치를 사용자가 예측할 수 있게 하기 위해서입니다.
필드마다 너비가 똑같을 수는 없습니다. 그래서 레이블을 필드 앞에 배치합니다.
이렇게 하면 레이블과 필드를 보기 좋게 정렬시 킬 수 있으며, 레이블을 찾기가 더 쉽습니다.
만약 필드 안에 데이터가 있다면 레이블을 먼저 읽고 그 다음에 데이터를 보는 것이 내용을 이해하는데 도움이 됩니다.
체크 박스와 라디오 버튼은 균일한 너비를 가지고 있지만 레이블은 그렇지 않을 수 있습니다.
그래서 체크 박스와 라디오 버튼의 레이블은 뒤에 배치합니다.
예시
[예시1] 텍스트 필드 위에 레이블이 위치한 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form action="">
<fieldset>
<label for="name">이름</label><br>
<input type="text" id="name" /><br>
<label for="name">나이</label><br>
<input type="text" id="age" />
</fieldset>
</form>
</body>
</html>
[예시2] 텍스트 필드 왼쪽에 레이블이 위치한 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form action="">
<fieldset>
<label for="name">이름</label>
<input type="text" id="name" /><br>
<label for="name">나이</label>
<input type="text" id="age" />
</fieldset>
</form>
</body>
</html>
[예시3] 라디오 버튼 오른쪽에 레이블이 위치한 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form</title>
</head>
<body>
<form action="">
<fieldset>
<legend>성별</legend>
<input type="radio" id="m" />
<label for="m">남성</label>
<input type="radio" id="w" />
<label for="w">여성</label>
</fieldset>
</form>
</body>
</html>
자료
다음 자료들은 참고만 해주세요.
- 라벨 위치 지정
관련기술
H44: 레이블 요소를 사용하여 텍스트 레이블을 양식 컨트롤과 연결
H71: fieldset 및 legend 요소를 사용하여 폼 컨트롤 그룹에 대한 설명 제공
H65: 레이블 요소를 사용할 수 없는 경우 title 속성을 사용하여 폼 컨트롤 식별
G167: 인접한 버튼을 사용하여 필드의 목적에 레이블을 지정
점검절차
웹페이지에 양식 필드가 있는 경우:
1. 양식 필드에 눈에 보이는 레이블(label)이 있는지 확인합니다.
2. 양실 필드가 체크박스나 라디오 버튼인 경우, 레이블(label)이 필드 뒤에 있는지 확인합니다.
3. 양식 필드가 체크박스나 라디오 버튼이 아닌 경우, 레이블(label)이 필드 앞에 있는지 확인합니다.
나의 정리
바늘과 실처럼 '필드'와 '레이블(label)'은 한 쌍을 이룹니다.
레이블은 필드가 무엇인지를 알려주는 이름표와 같습니다. 사람의 경우 이름표가 가슴에 있어야 하듯, 레이블은 해당 필드의 앞에 배치디어야 합니다. 이름표를 보고 사람을 보듯이 레이블을 먼저 먼저 보게 해야 합니다. 그래야 레이블을 통해 필드가 무엇인지를 알 수 있기 때문입니다.
예를 들어 이름을 입력하는 필드가 있다면, 필드만으로는 사용자가 여기에 무엇을 입력해야하는지 알 수가 없습니다.
하지만 필드 앞에 레이블이 '이름'이라고 되어 있다면 사용자는 해당 필드가 이름을 입력해야 한다는 것을 알 수 있게됩니다.
대부분 레이블은 필드의 위나 앞(=왼쪽)에 배치합니다. 이렇게 배치 해야 사용자가 레이블과 필드가 한쌍인지를 예측할 수 있습니다. 이렇게 예측할 수 있는 곳에 배치하면 입력해야 하는 필드가 많은 경우, 레이블과 필드의 정렬이 쉽고 꾸미기에도 좋아집니다.
왼쪽에 '이름'이라는 레이블이 있으면 그 오른쪽 필드가 이름을 입력하는 필드라고 예상하며,
'비밀번호'라는 레이블 밑에 필드가 있다면 이 필드에 비밀번호를 입력해야 한다고 예상할 것입니다.
이렇게 누구나 예상하는 위치에 두면 사용자가 혼란스러워 하지 않게됩니다.
필드의 해당 레이블을 누구나 예상할 수 있는 위치에 두어야 합니다.
필드의 왼쪽이나 위쪽에 레이블을 위치해야 사용하자가 혼란스러워 하지 않습니다.
G162: Positioning labels to maximize predictability of relationships
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G162.html
G162: Positioning labels to maximize predictability of relationships | Techniques for WCAG 2.0
When labels for form fields are positioned where the user expects them visually, it is easier to understand complex forms and to locate specific fields. Labels for most fields are positioned immediately before the field, that is, for left-to-right language
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G164] 온라인에서 거래나 요청을 한 후에 수정 및 취소를 할 수 있는 시간을 제공해야 한다. (33) | 2024.11.17 |
|---|---|
| [웹접근성 지침-일반기술 G163] 사용자가 '표준 발음 구별 기호'를 켜고 끌 수 있게 하자. (20) | 2024.11.16 |
| [웹접근성 지침-일반기술 G161] 사용자가 콘텐츠를 찾는데 도움을 주는 '검색기능'을 제공하자. (35) | 2024.11.14 |
| [웹접근성 지침-일반기술 G160] 콘텐츠를 이용하는데 필요한 정보, 아이디어, 처리 과정을 수화로 제공해야 합니다. (10) | 2024.11.13 |
| [웹접근성 지침-일반기술 G159] '비디오 전용 콘텐츠'에 '시간 기반의 대체 미디어'를 제공하자 (3) | 2024.11.12 |
