1.3.1 정보와 관계

요구 사항

시각적 표현(글자 크기, 굵기, 들여쓰기, 배치, 색)으로 전달하는 정보·구조·관계를 프로그램이 알아낼 수 있게(programmatically determined) 하거나, 텍스트로도 제공해야 합니다.

• 크고 굵은 글씨로 보이는 제목은 <h1>~<h6>로 표시합니다.
• 목록처럼 보이는 내용은 <ul>, <ol>, <dl>로 만듭니다.
• 데이터 표는 <th>와 scope(또는 headers)로 제목 셀과 데이터 셀의 관계를 알립니다.
• 입력 필드와 레이블은 <label for> 등으로 연결하고, 관련 필드 묶음은 <fieldset>/<legend>로 묶습니다.
• 머리글, 탐색, 본문 같은 영역은 랜드마크(<header>, <nav>, <main> 등)로 구분합니다.
• “* 표시는 필수 항목”처럼 시각적으로만 나타낸 의미도 마크업이나 텍스트로 전달합니다.

왜 필요한가요

화면낭독기 사용자는 제목 목록으로 페이지를 훑어보고, 표에서는 각 셀이 어느 행·열 제목에 속하는지 들으며 이동합니다. 구조가 시각적으로만 표현되면 이 모든 탐색 기능을 쓸 수 없고, 사용자 스타일시트나 읽기 모드로 바꾸었을 때도 구조가 사라집니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 시청각장애인(점자정보단말기 사용자)
• 저시력 사용자(화면 확대 사용자)
• 인지·학습 장애가 있는 사용자
• 사용자 스타일·읽기 모드 사용자

적용 방법

먼저 의미에 맞는 HTML 요소를 사용합니다. HTML 요소로 표현할 수 없는 사용자 정의 위젯의 구조는 ARIA 역할·속성으로 보충합니다(예: tablist, tab, aria-expanded). <div>에 스타일만 입힌 가짜 제목·가짜 표를 만들지 않습니다.

관련 가이드: 랜드마크와 제목 구조, 폼 접근성, 데이터 표 패턴.

<h2>배송 정보</h2>
<fieldset>
  <legend>배송 방법</legend>
  <label><input type="radio" name="ship" value="normal"> 일반 배송</label>
  <label><input type="radio" name="ship" value="fast"> 빠른 배송</label>
</fieldset>

<table>
  <caption>요금표</caption>
  <tr><th scope="col">구분</th><th scope="col">요금</th></tr>
  <tr><th scope="row">일반 배송</th><td>3,000원</td></tr>
</table>

사례

<div class="title-large">공지사항</div>
<span class="label">이메일</span> <input type="email">

<h2>공지사항</h2>
<label for="email">이메일</label> <input type="email" id="email">

자주 하는 실수

• 제목을 <div>나 <b>로 크게 보이게만 만듭니다.
• 데이터 표에 <th>를 쓰지 않거나, 반대로 레이아웃용 표에 <th>와 <caption>을 씁니다.
• 입력 필드 옆에 텍스트만 두고 <label>로 연결하지 않습니다.
• 라디오 버튼 묶음에 질문(그룹 이름)을 연결하지 않습니다.

검사 방법

• CSS를 끄거나 읽기 모드로 페이지를 보고 제목·목록·표 구조가 유지되는지 확인합니다.
• 화면낭독기의 제목 목록·랜드마크 목록·표 탐색 기능으로 구조를 확인합니다.
• 모든 입력 필드에 레이블이 프로그램적으로 연결되어 있는지 개발자 도구의 접근성 패널로 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.3.1 (새 창)