역할 · 랜드마크
role="region"
다른 랜드마크로 설명할 수 없지만 바로 이동할 만큼 중요한 구획을 나타냅니다. 반드시 이름이 있어야 합니다.
한눈에 보기
- 분류
- 랜드마크
- 대응 HTML
<section>(접근 가능한 이름이 있을 때만. 이름이 없으면generic)- 이름 정하는 방법
- 작성자 (author)
- 이름 필수
- 예
- 필수 상위 요소
- 없음
- 필수 하위 요소
- 없음
설명
region은 작성자가 정한 특정 목적의 구획으로, 사용자가 랜드마크 목록에서 바로 찾아가고 싶을 만큼 중요한 영역에 씁니다. 예를 들어 대시보드의 “오늘의 일정” 패널, 쇼핑몰의 “장바구니 요약”, 결제 페이지의 “주문 금액” 같은 영역입니다.
이름이 필수
명세는 region마다 짧고 목적을 설명하는 이름을 반드시 붙이도록 합니다. 보이는 제목이 있으면 aria-labelledby로 그 제목을 참조하고, 가능하면 이름을 제목 요소 안에 둡니다. 이름 없는 region은 랜드마크로 노출되지 않거나 “영역”으로만 들려 쓸모가 없습니다.
HTML과의 관계
<section>은 이름이 있을 때만 region이 됩니다. 이름 없는 <section>은 의미 없는 컨테이너(generic)로 노출되므로, 문서 구획을 나누려고 쓴 section이 모두 랜드마크가 되지는 않습니다. 그래서 랜드마크로 만들 구획에만 이름을 주면 됩니다.
언제 쓰지 않나
- 본문·메뉴·보충 영역·검색·양식처럼 더 구체적인 랜드마크가 맞으면 그 역할을 씁니다.
- 제목(h2, h3)만으로 충분히 구조가 드러나는 일반 문서 구획까지 region으로 만들면 랜드마크가 지나치게 많아집니다. 정말 바로 가야 할 영역 몇 개로 제한합니다.
탭 패널, 아코디언 패널처럼 위젯 일부로 쓰는 경우도 있습니다. APG 아코디언 패턴은 패널에 region과 aria-labelledby(헤더 버튼)를 줄 수 있다고 하되, 동시에 펼칠 수 있는 패널이 대략 6개를 넘는 경우처럼 랜드마크가 지나치게 늘어나는 상황에서는 region을 피하라고 안내합니다.
테스터 관점
region마다 이름이 있는지(이름 없는 role="region"은 오류), 이름이 내용 목적을 설명하는지, 랜드마크가 과도하게 많지 않은지 확인합니다.
함께 쓰는 속성
전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.
사용 예
보이는 제목으로 이름 붙이기 (권장)
<section aria-labelledby="cart-h">
<h2 id="cart-h">장바구니 요약</h2>
<p>3권, 대출 기간 14일</p>
</section>div에 role 지정
<div role="region" aria-labelledby="sched-h">
<h2 id="sched-h">오늘의 일정</h2>
…
</div>이름 없는 region (비권장)
<div role="region">
<h2>오늘의 일정</h2>
</div>제목이 있어도 연결하지 않으면 이름이 생기지 않습니다. aria-labelledby로 제목을 가리켜야 합니다.
직접 해 보기
section에 이름이 있을 때만 영역 랜드마크가 생기는 것을 확인해 보세요.
예시 페이지 코드
실시간 코드 — 조작하면 속성 값이 바뀌는 모습을 볼 수 있습니다
화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| D 키로 랜드마크 이동 | 대출 중인 책, 영역, 대출 중인 책, 제목 수준 2 |
| 영역을 벗어날 때 | 영역 끝 |
사용 지침
이렇게 쓰세요
- region에는 반드시 이름을 붙이고, 보이는 제목을
aria-labelledby로 참조합니다. - 다른 랜드마크로 설명되지 않는 중요한 영역에만 씁니다.
이렇게 쓰지 마세요
- 이름 없는
role="region"을 쓰지 않습니다. - 모든
<section>에 이름을 붙여 랜드마크를 남발하지 않습니다.
관련 역할·패턴
이 역할을 쓰는 패턴