양식에 필드가 하나라면, 그 필드 뒤에 오는 버튼은 레이블 역할도 해야 합니다.
기술설명
입력 필드 옆에 버튼이 위치해 있고, 입력 필드의 값을 통해 함수를 호출하는 경우 버튼이 입력 필드의 레이블(label) 역할도 하게 됩니다. 이런 방식은 필드의 목적을 이해하는데 도움을 줍니다.
이런 방식은 주로 입력 필드가 하나일 때 적용되며 입력 필드 뒤에 버튼이 위치합니다.
예시
[예제1] 검색기능
웹 페이지에서 사용자가 검색어를 입력하는 텍스트 필드와 검색을 수행하기 위한 '검색'이라는 레이블이 붙은 버튼이 있습니다.
이 버튼은 텍스트 필드 바로 뒤에 위치해 있지만 텍스트 필드가 검색어를 입력하는 곳임을 알 수 있게 해줍니다.
[예제2] 양식 선택
미국에 사는 사용자가 양식을 작성해야 합니다. 그런데 미국은 주마다 법률과 요구 사항이 다릅니다.
사용자는 거주하는 주에서 요구하는 양식을 선택해야 합니다.
'드롭다운 목록'에서 사용자가 '주'를 선택할 수 있습니다. 그 옆에 있는 버튼은 '주의 양식 가져오기'라는 레이블로 지정되어 있습니다. '주'를 선택하고 버튼을 누르면 선택한 '주'의 양식이 있는 웹 페이지로 이동합니다.
관련기술
H44: 레이블 요소를 사용하여 텍스트 레이블을 양식 컨트롤과 연결
H65: 레이블 요소를 사용할 수 없는 경우 title 속성을 사용하여 폼 컨트롤 식별
H71: fieldset 및 legend 요소를 사용하여 폼 컨트롤 그룹에 대한 설명 제공
점검절차
이 기술을 사용하는 필드와 버튼이 있는 경우,
1. 코드에서 필드와 버튼이 인접해 있는지 확인합니다.
2. 필드와 버튼이 시각적으로도 인접해 있는지 확인합니다.
나의 정리
필드(field)는 해당 필드의 목적을 알려주는 레이블(label)이 따라 다닙니다.
레이블(label)은 해당 필드의 목적을 알려 주기 때문에 필드에 어떤 값을 넣어야 하는지 또는 선택해야 하는지를 알 수 있습니다.
이런 레이블의 역할을 버튼이 해주는 경우가 있습니다.
양식(form)에 필드와 버튼이 하나씩 있는 경우입니다.
이 경우 필드에 레이블을 따로 주지 않고 버튼을 필드 뒤에 배치하는 것입니다.
물론 버튼 안에 텍스트는 필드의 목적을 담고 있어야 합니다.
이 방식을 가장 많이 사용하는 것이 '간편 검색 기능'입니다.
'간편 검색 기능'은 텍스트 필드가 있고 그 뒤에 '검색'이라는 텍스트를 가진 버튼이 있는 것을 말합니다.
텍스트 필드에 검색어를 입력하고 '검색' 버튼을 누르면 해당 검색어가 포함된 검색 결과를 보여줍니다.
레이블이 없어도 버튼의 '검색' 텍스트로 인해 텍스트 필드가 검색어를 입력해야 하는 부분임을 알 수가 있습니다.
G167: Using an adjacent button to label the purpose of a field
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G167.html
G167: Using an adjacent button to label the purpose of a field | Techniques for WCAG 2.0
When a button invokes a function on an input field, has a clear text label, and is rendered adjacent to the input field, the button also acts as a label for the input field. This label helps users understand the purpose of the field without introducing rep
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G169] 텍스트는 한쪽 방향으로 정렬시키자. (31) | 2024.11.22 |
|---|---|
| [웹접근성 지침-일반기술 G168] 사용자가 작업을 계속 할 것인지를 확인한다. (31) | 2024.11.21 |
| [웹접근성 지침-일반기술 G166] 중요한 '비디오 콘텐츠'에 '대체 오디오'가 제공되어야 한다. (32) | 2024.11.19 |
| [웹접근성 지침-일반기술 G165] 플랫폼에서 제공하는 '기본 초점 표시기'를 사용하여 '초점 표시기'의 가시성을 높이자. (6) | 2024.11.18 |
| [웹접근성 지침-일반기술 G164] 온라인에서 거래나 요청을 한 후에 수정 및 취소를 할 수 있는 시간을 제공해야 한다. (33) | 2024.11.17 |
