1.3.1 정보와 관계

(Level A)

요약

목표

콘텐츠 구조에 대한 정보를 더 많은 사람들이 이용할 수 있다.

할 일

표현을 통해 전달되는 관계와 정보를 코드를 이용해 강화한다.

중요성

원래 의미를 유지하면서 각자의 필요에 맞게 표시를 조정할 수 있다.

성공 기준(SC)

표현을 통해 전달되는 정보, 구조, 관계는 프로그래밍 방식으로 판별되거나 텍스트로 이용 가능해야 한다.

의도

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

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

청각적 단서도 사용될 수 있다. 예를 들어, 종소리가 새로운 섹션의 시작을 나타낼 수 있고, 음성 톤이나 말하는 속도의 변화가 중요한 정보를 강조하거나 인용된 텍스트를 나타내는 데 사용될 수 있다.

이러한 관계를 한 그룹의 사용자가 인식 가능하다면, 그 관계는 모든 사람이 인식할 수 있다. 정보가 모든 사용자에게 적절히 제공되었는지 여부를 판단하는 한 가지 방법은 다양한 감각을 이용해 순차적으로 정보에 접근하는 것이다.

용어집 항목에 대한 링크가 앵커 요소(또는 사용하는 기술에 적합한 링크 요소)를 사용하여 구현되고 다른 글꼴로 식별된다면, 스크린 리더 사용자는 글꼴 변화에 대한 정보는 못 받을 수 있지만 용어집 용어를 접할 때 그 항목이 링크라는 것을 들을 수 있다. 온라인 상품 목록은 더 큰 빨간색 글꼴을 사용하여 가격을 나타낼 수 있다. 스크린 리더나 빨간색을 인식할 수 없는 사람이라도, 통화 기호가 앞에 오는 한 가격에 대한 정보를 계속 파악할 수 있다.

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

관계가 프로그래밍 방식으로 판별되어야 하는지 아니면 텍스트로 제시되어야 하는지에 대해 판단이 필요한 경우도 있을 수 있다. 그러나 기술이 프로그래밍 방식의 관계를 지원할 때는 정보와 관계를 텍스트로 설명하기보다는 프로그래밍 방식으로 판별할 수 있도록 제공하는 것을 강력히 권장한다.

참고

색상 값을 프로그래밍 방식으로 판별할 필요는 없다. 색상으로 전달되는 정보는 단순히 값을 노출하는 것만으로는 적절하게 표현될 수 없다. 따라서 성공 기준 1.3.1이 아니라 성공 기준 성공 기준 1.4.1에서 색상의 특정한 사례를 다룬다.

이점

• 이 성공 기준은 사용자 에이전트가 개별 사용자의 필요에 따라 콘텐츠를 조정할 수 있도록 함으로써 다양한 장애를 가진 사람을 돕는다.
• 시각 장애인(스크린 리더 사용자)은 색상을 통해 전달되는 정보가 텍스트로도 제공될 때 도움을 받는다(색상으로 정보를 전달하는 이미지 콘텐츠에 대한 대체 텍스트 포함).
• 점자(텍스트) 재생 디스플레이를 사용하는 시청각 복합 장애인은 색상 의존적인 정보에 접근할 수 없을 수 있다.

예제

필수 입력란이 포함된 양식

양식에 여러 개의 필수 필드가 포함되어 있다. 필수 필드의 레이블은 빨간색으로 표시된다. 또한 각 레이블 끝에는 별표 문자 *가 있다. 양식 작성 지침에는 “모든 필수 필드는 빨간색 별표 *로 표시됩니다”라고 명시한 다음, 예시가 제공된다.

색상과 텍스트를 사용하여 필수 필드를 나타내는 양식

양식에 필수 필드와 선택 필드가 모두 포함되어 있다. 양식 상단의 지침에서 필수 필드는 빨간색 텍스트로 표시되며 “필수”라는 대체 텍스트를 가진 아이콘으로도 표시된다고 설명한다. 빨간색 텍스트와 아이콘 모두 해당 양식 필드와 프로그래밍 방식으로 연결되어 있어 보조 기술 사용자가 필수 필드를 식별할 수 있다.

각 셀의 헤더를 프로그래밍 방식으로 판별할 수 있는 버스 시간표

버스 시간표는 첫 번째 열에 버스 정류장이 세로로 나열되고 첫 번째 행에 각각 다른 버스가 가로로 나열된 표로 구성된다. 각 셀에는 해당 버스가 그 정류장에 도착하는 시간이 포함되어 있다. 버스 정류장과 버스 셀은 해당 행이나 열의 헤더로 식별되어 보조 기술이 각 셀의 시간과 연결된 버스와 버스 정류장을 프로그래밍 방식으로 판별할 수 있다.

체크박스의 레이블을 프로그래밍 방식으로 판별할 수 있는 양식

입력 양식에서 각 체크박스의 레이블을 보조 기술이 프로그래밍 방식으로 판별할 수 있다.

텍스트 문서

단순한 텍스트 문서가 제목 앞의 공백 두 줄, 목록 항목을 나타내는 별표, 기타 표준 서식 규칙으로 형식이 지정되어 구조를 프로그래밍 방식으로 판별할 수 있다.

관련 자료

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

• WebAIM: Semantic Structure
• Heading Tags

기법

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

충분 기법

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

상황 A: 프로그래밍 방식으로 판별 가능한 표현을 통해 정보와 관계를 전달할 수 있도록 의미있는(semantic) 구조를 제공하는 기법:

• ARIA11: Using ARIA landmarks to identify regions of a page
• H101: Using semantic HTML elements to identify regions of a page
• ARIA12: Using role=heading to identify headings
• ARIA13: Using aria-labelledby to name regions and landmarks
• ARIA16: Using aria-labelledby to provide a name for user interface controls
• ARIA17: Using grouping roles to identify related form controls
• ARIA20: Using the region role to identify a region of the page
• G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text
• G117: Using text to convey information that is conveyed by variations in presentation of text
• G140: Separating information and structure from presentation to enable different presentations
• ARIA24: Semantically identifying a font icon with role=“img”
• 다음 기법을 사용하여 프로그래밍 방식으로 판별 가능한 표현을 통해 정보와 관계를 전달한다.
  • G138: Using semantic markup whenever color cues are used
  • H51: Using table markup to present tabular information
  • PDF6: Using table elements for table markup in PDF Documents
  • PDF20: Using Adobe Acrobat Pro’s Table Editor to repair mistagged tables
  • H39: Using caption elements to associate data table captions with data tables
  • H63: Using the scope attribute to associate header cells with data cells in data tables
  • H43: Using id and headers attributes to associate data cells with header cells in data tables
  • H44: Using label elements to associate text labels with form controls
  • H65: Using the title attribute to identify form controls when the label element cannot be used
  • PDF10: Providing labels for interactive form controls in PDF documents
  • PDF12: Providing name, role, value information for form fields in PDF documents
  • H71: Providing a description for groups of form controls using fieldset and legend elements
  • H85: Using optgroup to group option elements inside a select
  • H48: Using ol, ul and dl for lists or groups of links
  • H42: Using h1-h6 to identify headings
  • PDF9: Providing headings by marking content with heading tags in PDF documents
  • PDF11: Providing links and link text using the Link annotation and the /Link structure element in PDF documents
  • PDF17: Specifying consistent page numbering for PDF documents
  • PDF21: Using List tags for lists in PDF documents
  • H97: Grouping related links using the nav element

상황 B: 사용 중인 기법이 표현을 통해 전달되는 정보와 관계를 프로그래밍 방식으로 판별 가능한 의미있는 구조를 제공하지 않는 경우

• G117: Using text to convey information that is conveyed by variations in presentation of text
• Making information and relationships conveyed through presentation programmatically determinable or available in text using the following techniques:
  • T1: Using standard text formatting conventions for paragraphs
  • T2: Using standard text formatting conventions for lists
  • T3: Using standard text formatting conventions for headings

조언 기법

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

• C22: Using CSS to control visual presentation of text
• G162: Positioning labels to maximize predictability of relationships
• ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
• ARIA2: Identifying a required field with the aria-required property
• G141: Organizing a page using headings

오류

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

• F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
• F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content
• F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
• F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links
• F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
• F46: Failure of Success Criterion 1.3.1 due to using th elements, layout tables
• F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information
• F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes
• F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers
• F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
• F111: Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name

점검 규칙

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

• ARIA attribute is defined in WAI-ARIA
• ARIA state or property has valid value
• Element with role attribute has required states and properties
• Form field has non-empty accessible name
• Headers attribute specified on a cell refers to cells in the same table element
• Role attribute has valid value
• ARIA required context role
• ARIA required ID references exist
• ARIA required owned elements
• ARIA state or property is permitted
• Element with role attribute has required states and properties
• Table header cell has assigned cells