본문 바로가기

성공기준 이해 1.3.1:정보와 관계 (Level A)

요약

목표
콘텐츠 구조에 대한 정보를 더 많은 사람들이 이용할 수 있다.
할 일
코드를 사용하여 프레젠테이션을 통해 전달되는 관계와 정보를 강화하라.
중요성
사람들이 원래 의미를 유지하면서 자신의 필요에 맞게 표시를 조정할 수 있다.

의도

이 성공 기준의 목적은 표시 형식이 변경될 때 시각적 또는 청각적 형식이 암시하는 정보와 관계가 유지되도록 하는 것이다. 예를 들어 화면 낭독기로 콘텐츠를 읽을 때나 저작자가 제공한 스타일 시트를 사용자 스타일 시트로 대체할 때 표시 형식이 변경된다.

시력이 있는 사용자는 다양한 시각적 신호를 통해 구조와 관계를 인식한다. 제목은 종종 빈 줄로 단락과 구분된 더 크고 굵은 글꼴로 표시된다. 목록 항목 앞에는 글머리 기호가 있고 들여쓰기가 되어 있을 수도 있다. 단락은 빈 줄로 구분된다. 공통 특성을 공유하는 항목은 표 형식의 행과 열로 구성된다. 양식 필드는 텍스트 레이블을 공유하는 그룹으로 배치될 수 있다. 여러 항목이 서로 관련되어 있음을 나타내기 위해 서로 다른 배경색을 사용할 수 있다. 특별한 상태를 갖는 단어는 글꼴 모음을 변경하거나 굵은 글씨체, 이탤릭체 또는 밑줄을 표시하여 표시한다. 공통 특성을 공유하는 항목은 동일한 행이나 열을 공유하는 셀의 관계와 각 셀의 행 및/또는 열 머리글과의 관계를 이해하는 데 필요한 테이블로 구성되는 등. 이러한 구조와 관계를 프로그래밍 방식으로 판별하거나 텍스트에서 사용할 수 있도록 하면 이해에 중요한 정보를 모든 사람이 인식할 수 있다.

청각 신호도 사용될 수 있다. 예를 들어 차임벨 소리는 새 섹션의 시작을 나타낼 수 있다. 중요한 정보를 강조하거나 인용된 텍스트를 표시하기 위해 음성의 높낮이 또는 말하기 속도의 변화가 사용될 수 있다.

이런 관계가 한 세트의 사용자에게 인식될 수 있으면 해당 관계는 모든 사용자에게 인식되도록 만들어질 수 있다. 정보가 모든 사용자에게 적절하게 제공되었는지 여부를 판단하는 한 가지 방법은 다양한 양식으로 정보에 순차적으로 접근하는 것이다.

용어집 항목에 대한 링크가 앵커 요소(또는 사용 중인 기술에 대한 적절한 링크 요소)를 사용하여 구현되고 다른 글꼴을 사용하여 식별되는 경우 화면 낭독기 사용자는 용어집 용어를 접했을 때 항목이 링크라는 것을 알게 된다. 단, 글꼴 변화에 대한 정보는 받지 못할 수도 있다. 온라인 카탈로그에서는 빨간색으로 표시된 더 큰 글꼴을 사용하여 가격을 표시할 수 있다. 화면 낭독기나 빨간색을 인식할 수 없는 사람은 앞에 화폐 기호가 있는 한 가격에 대한 정보를 계속 파악할 수 있다.

일부 기술은 일부 유형의 정보 및 관계를 프로그래밍 방식으로 판별하는 수단을 제공하지 않는다. 이 경우 정보와 관계에 대한 텍스트 설명이 있어야 한다. 예를 들어, "모든 필수 필드는 별표(*)로 표시됩니다."와 같은 텍스트 설명은 부모 요소나 인접 요소와 같이 설명하는 정보(페이지가 선형화될 때) 근처에 있어야 한다.

관계가 프로그래밍 방식으로 판별되어야 하는지 아니면 텍스트로 표시되어야 하는지에 대한 판단이 필요한 경우가 있을 수 있다. 그러나 기술이 프로그래밍 방식의 관계를 지원하는 경우 정보와 관계를 텍스트로 설명하기보다는 프로그래밍 방식으로 판별하는 것이 좋다.

참고

색상 값을 프로그래밍 방식으로 판별할 필요는 없다. 색상이 전달하는 정보는 단순히 값을 노출하는 것만으로는 제대로 표현될 수 없다. 따라서 성공 기준 1.3.1이 아닌 성공 기준 1.4.1이 색상의 사례를 다루고 있다.

이점

  • 이 성공 기준은 사용자 에이전트가 개별 사용자의 요구에 따라 콘텐츠를 조정할 수 있도록 함으로써 다양한 장애가 있는 사람들을 돕는다.
  • 시각 장애가 있는(화면 낭독기 사용) 사용자는 색상을 통해 전달되는 정보를 텍스트(정보 전달을 위해 색상을 사용하는 이미지에 대한 대체 텍스트 포함)로도 사용할 수 있는 경우 이점을 얻는다.
  • 점자(텍스트) 재생 디스플레이를 사용하는 청각 장애인 사용자는 색상에 따른 정보에 액세스하지 못할 수 있다.

예제

필수 입력란이 포함된 양식
양식에는 여러 필수 필드가 포함되어 있다. 필수 필드의 레이블은 빨간색으로 표시된다. 또한 각 레이블 끝에는 별표 문자 *가 있다. 양식 작성 지침에는 "모든 필수 필드가 빨간색으로 표시되고 별표 *로 표시됩니다."라는 내용과 예시가 나와 있다.
색상과 텍스트를 사용하여 필수 필드를 나타내는 양식
양식에는 필수 필드와 선택 필드가 모두 포함되어 있다. 양식 상단의 지침에는 필수 필드가 빨간색 텍스트로 표시되고 텍스트 대체 항목이 "필수"라고 표시된 아이콘도 있음을 설명한다. 빨간색 텍스트와 아이콘은 적절한 양식 필드와 프로그래밍 방식으로 연결되어 보조 기술 사용자가 필수 필드를 판별할 수 있다.
각 셀의 헤더를 프로그래밍 방식으로 판별할 수 있는 버스 일정표
버스 시간표는 첫 번째 열에 버스 정류장이 수직으로 나열되고 첫 번째 행에 여러 버스가 수평으로 나열되는 표로 구성된다. 각 셀에는 버스가 해당 버스 정류장에 도착하는 시간이 포함되어 있다. 버스 정류장과 버스 셀은 해당 행이나 열의 헤더로 식별되므로 보조 기술을 통해 각 셀의 시간과 연결된 버스와 버스 정류장을 프로그래밍 방식으로 판별할 수 있다.
확인란의 레이블을 프로그래밍 방식으로 판별할 수 있는 양식
양식에서 각 확인란의 레이블은 보조 기술을 통해 프로그래밍 방식으로 판별될 수 있다.
텍스트 문서
간단한 텍스트 문서는 제목 앞에 공백 두 줄, 목록 항목을 나타내는 별표 및 기타 표준 형식 지정 규칙으로 형식이 지정되어 해당 구조가 프로그래밍 방식으로 판별될 수 있다.

관련 자료

자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.

기법

이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.

충분 기법

아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.

상황 A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:

상황 B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:

조언 기법

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

오류

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

점검 규칙

다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.

맨 위로