성공기준 이해 1.3.5:입력 목적 식별 (Level AA)
요약
- 목표
- 양식 작성이 더 쉬워진다.
- 할 일
- 기술이 허용하는 경우 코드를 사용하여 공통 입력의 목적을 나타낸다.
- 중요성
- 인지 장애가 있는 일부 사람들은 레이블만으로 입력 목적을 이해하지 못할 수도 있다.
의도
이 성공 기준의 목적은 사용자에 대한 정보를 수집하는 양식 입력의 목적이 프로그래밍 방식으로 판별될 수 있도록 보장하여 사용자 에이전트가 다양한 양식을 사용하여 이 목적을 추출하고 사용자에게 제시할 수 있도록 하는 것이다. 특정 분야에서 예상되는 특정 종류의 데이터를 프로그래밍 방식으로 선언하는 기능을 사용하면 특히 특정 인지 장애가 있는 사람들이 양식을 더 쉽게 작성할 수 있다.
눈에 보이는 적절한 레이블과 지시 사항은 사용자가 양식 입력 필드의 목적을 이해하는 데 도움이 될 수 있지만, 특정 유형의 정보를 수집하는 필드를 모호하지 않고 일관되며 다양한 양식에 맞게 - 사용자 에이전트 또는 보조 기술의 도움을 통해 - 사용자 정의된 방식으로 렌더링함으로써 사용자는 이점을 누릴 수 있다.
일부 입력 필드의 경우 type 속성은 입력 필드의 의도를 광범위하게 지정하는 방법을 제공한다(예: <input type="tel">, <input type="email"> 또는 <input type="password">). 그러나 이는 입력 유형을 설명하는 매우 광범위한 범주일 뿐이며 특히 사용자별 입력 필드와 관련된 경우 그 목적이 반드시 필요한 것은 아니다. 예를 들어, type="email"은 필드가 이메일 주소용이라는 것을 나타내지만 그 목적이 사용자의 이메일 주소를 입력하기 위한 것인지 아니면 다른 사람의 이메일을 입력하기 위한 것인지는 명확하지 않다.
이 성공 기준은 WCAG 2.1 권장 사항의 섹션 7에 나와 있으며 프로그래밍 방식으로 식별 가능해야 하는 사용자 인터페이스 구성 요소 입력 목적의 유형을 정의한다. 이러한 사용자 입력 목적이 존재하고 기술이 이를 지원하는 경우 현장 목적은 프로그래밍 방식으로 식별 가능해야 한다.
HTML 자동 완성 속성은 잘 정의된 특정 고정 값의 특정 개수만 허용한다. 예를 들어 저작자가 특정 이름 유형을 지정할 수 있도록 허용함으로써 유형 속성보다 더 세밀한 정의 또는 목적 식별이 가능하다. 이름 (autocomplete="name"), 다른 이름(autocomplete="given-name"), 성(autocomplete="family-name"), 사용자 이름(autocomplete="username") 및 닉네임(autocomplete="nickname").
사전 정의된 정의 분류를 채택하고 용도를 변경함으로써 사용자 에이전트와 보조 기술은 이제 다양한 양식으로 사용자에게 입력의 목적을 제시할 수 있다. 예를 들어 보조 기술은 읽기에 어려움이 있는 사용자를 돕기 위해 입력 필드 옆에 친숙한 아이콘을 표시할 수 있다. 생일 케이크 아이콘은 autocomplete="bday"인 입력 필드 앞에 표시되거나, 전화기 아이콘은 autocomplete="tel"인 입력 필드 앞에 표시될 수 있다.
이 분류 체계의 용도를 변경하는 것 외에도 자동 완성 속성 기술을 사용하여 이 성공 기준을 충족하는 경우 브라우저 및 기타 사용자 에이전트는 브라우저에 저장된 과거 사용자 입력을 기반으로 이러한 필드를 자동 완성하여 올바른 콘텐츠를 제안하고 '자동 완성'할 수 있다. 예를 들어 "생일"(autocomplete="bday")과 같은 일반적인 입력 목적에 대한 보다 세부적인 정의를 정의함으로써 브라우저는 이러한 각 필드(사용자의 생일 날짜)에 대해 개인화된 값을 저장할 수 있다. 사용자는 정보를 입력할 필요가 없으며 대신 필드 값을 확인하거나 필요한 경우 변경할 수 있다. 이는 기억 문제, 난독증 및 기타 장애가 있는 사용자에게 중요한 이점이다. 자동 완성 값은 언어와 무관하므로 사용자 입력 필드(레이블)를 시각적으로 식별하는 데 사용되는 텍스트에 익숙하지 않은 사용자도 고정된 용어 분류로 인해 해당 목적을 일관되게 식별할 수 있다.
입력 필드가 두 가지 다른 입력 목적(예: 사용자 이름/사용자 이메일 필드가 결합된 경우)을 허용하고, 사용된 기술이 다중 목적 값을 정의할 수 없는 경우, 하나의 값만 제공하거나 아예 입력 목적 지정을 생략하는 것도 유효하다.
다른 메타데이터 형식에 대한 사용자 에이전트 및 보조 기술 지원이 성숙해지면 WAI-Adapt: 기호 모듈과 같은 메타데이터 체계를 HTML 자동 완성 속성에 추가로 또는 대신 사용하여 입력 필드의 목적을 식별할 수 있다. 또한 저작자가 제공한 입력 레이블을 식별하고 입력 레이블 지정 대신 사용되는 정의된 어휘 또는 기호와 일치시키는 자동화된 적응을 지원할 수 있다.
이점
- 언어 및 기억 관련 장애가 있거나 실행 기능 및 의사 결정에 영향을 미치는 장애가 있는 사람은 자동 완성 속성을 사용하여 이 성공 기준을 충족할 때 브라우저 자동 완성 개인 정보(예: 이름 또는 주소)의 이점을 누릴 수 있다. 즉, 사용자가 정보를 기억하지 않아도 된다.
- 뇌성마비, 뇌졸중, 머리 부상, 운동 신경 질환 또는 학습 장애가 있는 사람들은 때때로 의사소통을 위해 이미지를 선호한다. 입력 필드에 아이콘을 추가하여 필드의 목적을 시각적으로 전달하는 보조 기술을 사용할 수 있다.
- 운동 장애가 있는 사람들도 양식을 작성할 때 수동 입력의 필요성이 줄어드는 이점을 누릴 수 있다.
예제
- 자동 완성을 사용한 문의 양식
- 문의 양식은 사용자 브라우저에 저장된 자동 완성 값을 바탕으로 이름, 거리, 우편번호, 도시, 전화번호, 이메일 주소 필드를 자동으로 채운다. 보조 기술은 필드의 목적을 시각적으로 전달하기 위해 사용자에게 친숙한 기호/아이콘 세트를 그리는 등 특정 입력 필드를 식별하는 맞춤형 방법을 제공할 수 있다.
- 별도의 청구서 수신 주소와 배송 주소가 포함된 주문 양식
- 제품 주문 양식에서 'billing'과 'shipping'에 관한 자동 완성 토큰을 사용하여 청구 주소와 별도의 주소 필드에 주소를 채운다.
- 아이콘을 사용한 문의 양식
- 아이콘을 추가하는 브라우저 플러그인은 입력 목적을 시각적으로 식별할 수 있도록 사람의 이름, 집 주소, 전화번호, 이메일 주소를 나타내는 아이콘을 삽입한다.
관련 자료
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
기법
이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.
충분 기법
오류
다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
점검 규칙
다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.