3.3.2 레이블 또는 지시문

(Level A)

요약

목표

사용자가 어떤 정보를 입력해야 하는지 알 수 있도록 한다.

할 일

입력값에 대한 레이블 또는 지시문을 제공한다.

중요성

인지 장애가 있는 사람을 포함해 모든 사람은 어떻게 응답해야 하는지 이해할 수 있도록 한다.

성공 기준(SC)

콘텐츠에 사용자 입력이 요구되는 경우 레이블 또는 지시문을 제공해야 한다.

의도

이 성공 기준의 목적은 콘텐츠 저작자가 양식 내의 컨트롤을 식별할 수 있는 지시문이나 레이블을 제공하여, 사용자가 어떤 데이터를 입력해야 하는지 알 수 있도록 하는 것이다. 라디오 버튼, 체크박스, 콤보박스 또는 이와 유사한 선택지를 제공하는 컨트롤의 경우, 사용자가 실제로 무엇을 선택하는지 알 수 있도록 각 옵션에 적절한 레이블이 있어야 한다. 지시문이나 레이블은 데이터 입력란의 데이터 형식을 명시할 수도 있으며, 특히 일반적인 형식이 아니거나 올바른 입력에 대한 특정 규칙이 있는 경우 더욱 그렇다. 콘텐츠 저작자는 지시문이 길고 장황한 경우, 개별 컨트롤에 초점이 있을 때만 이러한 지시문을 사용자에게 표시하도록 선택할 수도 있다.

이 성공 기준의 목적은 불필요한 정보로 페이지를 어지럽히는 것이 아니라, 장애가 있는 사용자에게 도움이 되는 중요한 단서와 지시문을 제공하는 것이다. 너무 많은 정보나 지시문은 너무 적은 것만큼이나 해로울 수 있다. 목표는 사용자가 과도한 혼란이나 탐색 없이 과업을 수행할 수 있도록 충분한 정보를 제공하는 것이다. 대부분의 양식 컨트롤 레이블은 텍스트 기반이다. 이미지를 레이블로 사용하는 것도 기준을 충족하지만, 사용자가 해당 이미지를 쉽게 이해할 수 있도록 주의를 기울여야 한다. 이미지 기반 레이블을 사용할 때 명확성을 높이기 위해 텍스트 기반 툴팁이나 보충 텍스트처럼 추가적인 힌트를 제공하는 것을 고려할 수 있다.

이 성공 기준은 레이블이나 지시문이 올바르게 마크업되고 식별되거나, 해당 컨트롤과 연결될 것을 요구하지 않는다. 그 측면은 1.3.1: 정보와 관계에서 별도로 다룬다. 따라서 관련 레이블과 지시문은 제공하지만 마크업이 올바르지 않은 경우, 이 기준(3.3.2)은 통과하되 1.3.1 기준은 실패할 수 있다.

또한, 이 성공 기준은 양식 컨트롤 및 입력에 대해 접근 가능한 이름이나 설명을 제공하는 대체 방법이 사용되었는지 여부는 고려하지 않는다. 그 측면은 4.1.2: 이름, 역할, 값에서 별도로 다룬다. 컨트롤에 적절한 접근 가능한 이름이나 설명(예: aria-label="...")이 있어 4.1.2는 통과하더라도, 해당 레이블이 보조 기술 사용자뿐만 아니라 모든 사용자에게 시각적으로 제시되지 않는다면 이 기준(3.3.2)은 실패하게 된다.

이 성공 기준은 데이터 입력과 관련이 없는 링크나 기타 컨트롤(예: 확장/축소 위젯 또는 유사한 대화형 컴포넌트 등)에는 적용되지 않는다.

이 성공 기준은 컨트롤에 레이블이나 지시문이 있을 것을 요구하지만, 사용된 레이블이 정확한지, 충분히 명확한지 또는 설명적인지는 2.4.6: 제목과 레이블에서 별도로 다룬다.

참고

이 기준의 규범적 문구에서 사용된 “요구하다(requires)“라는 단어는 필수(required) 양식 입력란에만 적용된다는 뜻이 아니다. 여기서 “요구”는 “수용하다(accepts)”, “기대하다(expects)”, “허용하다(allows)“의 동의어로 사용되었다. 이 기준은 필수 입력란이든 선택 입련란이든 모든 양식 입력란에 적용된다.

이점

• 레이블과 지시문(예상 데이터 형식의 예제 포함)을 제공하면, 인지, 언어 및 학습 장애가 있는 사용자를 포함해 모든 사용자가 정보를 정확하게 입력하는 데 도움이 된다.
• 레이블과 지시문(필수 입력란 식별 포함)을 제공하면 사용자가 불완전하거나 잘못된 양식을 제출하는 것을 방지할 수 있으며, 제출 오류를 수정하기 위해 페이지/양식을 다시 탐색해야 하는 번거로움을 줄일 수 있다.

예제

• 사용자에게 미국 주의 2자리 약어를 입력하도록 요청하는 입력란 옆에, 주 이름의 알파벳 순서와 올바른 약어 목록을 팝업으로 띄워주는 링크가 있다.
• 날짜 입력란에 올바른 날짜 형식을 나타내는 텍스트 지시문이 제공된다.
• 한 웹사이트에서는 로그인을 위해 사용자 이름을 만들기 위한 “사용자 이름”이라는 텍스트 레이블이 제공된다. 다른 웹사이트에서는 사용자 이름을 만드는 데 사용할 수 있는 문자에 대한 엄격한 규칙이 있다. 이러한 웹사이트에서는 사용자가 불필요한 오류를 겪지 않도록 입력란과 함께 추가 지시문을 제공해야 한다.
• 웹사이트 헤더에 전역 검색 입력란이 제공된다. 어떤 용어든 입력할 수 있으므로 지시문은 필요하지 않지만, 입력란의 목적을 전달할 단서가 필요하다. 일반적으로 이러한 검색 입력란은 검색 아이콘(돋보기)과 짝을 이루어 시각적 레이블 역할을 하며, 때로는 검색 쿼리를 제출하는 버튼의 시각적 식별자 역할도 겸한다.
• 이름 입력을 위해 두 개의 별도 텍스트 입력란이 제공된다. “이름”이라는 단일 레이블만 사용하는 대신(이렇게 하면 두 번째 텍스트 입력란이 레이블 없이 비어 있는 것처럼 보일 수 있음), 각 입력란에 “이름”과 “성”이라는 명확한 레이블을 부여한다.
• 미국 전화번호는 입력 시 지역 번호, 국번, 번호를 세 개의 입력란으로 나눈다. 지역 번호 입력란은 괄호로 묶고, 국번과 전화번호 입력란은 대시(-)로 구분한다. 이러한 구두점은 미국 전화번호 형식에 익숙한 사람들에게 시각적 단서를 제공하지만, 입력란에 레이블을 붙이기에는 충분하지 않다. 단일 “전화번호” 레이블 역시 세 입력란 모두를 설명할 수 없다. 이러한 문제를 해결하기 위해 세 개의 입력란을 fieldset 요소로 묶고, 해당 그룹의 제목으로 “전화번호”라는 legend 요소를 제공한다. 디자인 과정에서 구두점 외의 시각적 레이블을 제공할 수 없으므로, 각 입력란에 “title” 속성을 사용하여 보이지 않는 레이블을 부여한다. 이 속성의 값은 각각 “지역번호”, “국번”, “번호”이다.

기법

이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.

충분 기법

• G131: Providing descriptive labels AND one of the following:
  • ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
  • ARIA9: Using aria-labelledby to concatenate a label from several text nodes
  • ARIA17: Using grouping roles to identify related form controls
  • G89: Providing expected data format and example
  • G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
  • G162: Positioning labels to maximize predictability of relationships
  • G83: Providing text descriptions to identify required fields that were not completed
  • H90: Indicating required form controls using label or legend
  • PDF5: Indicating required form controls in PDF forms
• H44: Using label elements to associate text labels with form controls
• PDF10: Providing labels for interactive form controls in PDF documents
• H71: Providing a description for groups of form controls using fieldset and legend elements
• G167: Using an adjacent button to label the purpose of a field

참고

위 목록 끝에 있는 기술은 “최후의 수단”으로 간주되어야 하며 다른 기술을 페이지에 적용할 수 없는 경우에만 사용해야 한다. 더 넓은 사용자 그룹에 대한 접근성을 높이기 때문에 이전 기술이 선호된다.

조언 기법

준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.

• G13: Describing what will happen before a change to a form control that causes a change of context to occur is made
• ARIA2: Identifying a required field with the aria-required property

오류

다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

• F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label