ARIA 접근성 가이드

역할 · 문서 구조

role="heading"

구획의 제목입니다. 화면낭독기 사용자가 가장 많이 쓰는 탐색 수단이며, <h1>~<h6>에 대응합니다.

기초HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
이름 정하는 방법
콘텐츠, 작성자 (contents, author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

heading은 페이지 구획의 제목입니다. 화면낭독기 사용자는 제목 목록을 띄우거나 H 키(수준별로는 1~6)로 제목 사이를 건너뛰며 페이지를 훑어봅니다. 시각 사용자가 큰 글씨를 훑어보는 것과 같은 역할이어서, 제목 구조는 접근성에서 가장 기본적이고 효과가 큰 요소입니다(WCAG 1.3.1, 2.4.6, 2.4.10 관련).

HTML과의 관계

<h1>~<h6>가 heading 역할과 수준을 자동으로 가집니다. role="heading"은 HTML 제목 요소를 쓸 수 없는 경우(서드파티 위젯 등)에만 씁니다.

aria-level이 필수

WAI-ARIA 1.2에서 role="heading"은 aria-level이 필수입니다. 빠뜨리면 브라우저는 대개 수준 2로 처리하지만, 명시적으로 적어야 합니다. HTML 제목 요소에는 태그 이름이 곧 수준이므로 필요 없습니다.

좋은 제목 구조

  • 페이지 주제를 나타내는 <h1>을 하나 둡니다(보통 main 첫머리).
  • 수준은 내용의 계층을 따릅니다. 글자 크기를 맞추려고 수준을 고르지 않습니다. 크기는 CSS로 조절합니다.
  • 수준을 건너뛰지 않는 것(h2 다음 h4)이 좋습니다. 명세 위반은 아니지만 구조를 파악하기 어렵게 합니다.
  • 제목처럼 보이는 텍스트(굵고 큰 <div>, <p><strong>)는 실제 제목으로 만듭니다. 반대로 단순히 강조하고 싶은 문장을 제목으로 만들지 않습니다.

주의할 점

  • 제목 안의 링크·버튼은 괜찮지만(아코디언 헤더가 대표적), <button role="heading">처럼 버튼 자체를 제목으로 바꾸면 버튼 의미가 사라집니다. 제목 안에 버튼을 넣습니다.
  • 빈 제목(텍스트가 없는 <h2>)을 남기지 않습니다. 이름이 필수입니다.

테스터 관점

화면낭독기 제목 목록(NVDA: NVDA+F7)이나 브라우저 확장(예: HeadingsMap)으로 제목만 읽어도 페이지 구조가 이해되는지 확인합니다. 시각적으로 제목인데 목록에 없는 경우, 빈 제목, 수준 건너뛰기를 점검합니다.

함께 쓰는 속성

필수 속성

aria-level

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

HTML 제목 (권장)

권장HTML
<h1>도서 검색</h1>
<h2>검색 결과</h2>
<h3>작은 아씨들</h3>

role="heading" (HTML 제목을 쓸 수 없을 때)

HTML
<div role="heading" aria-level="2">검색 결과</div>

모양만 제목 (비권장)

비권장HTML
<div class="title-lg">검색 결과</div>
<div role="heading">대출 안내</div>

첫 줄은 제목으로 인식되지 않고, 둘째 줄은 필수 속성 aria-level이 빠졌습니다.

아코디언: 제목 안에 버튼

권장HTML
<h3>
  <button type="button" aria-expanded="false" aria-controls="p1">대출 기간</button>
</h3>

직접 해 보기

예시 문서를 바꿔 가며 화면낭독기 제목 목록과 같은 방식으로 계산한 결과를 비교해 보세요.

예시 문서 고르기

    예시 문서 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    H 키로 다음 제목 이동검색 결과, 제목 수준 2
    3 키로 수준 3 제목 이동작은 아씨들, 제목 수준 3

    사용 지침

    이렇게 쓰세요

    • HTML <h1>~<h6>를 내용의 계층에 맞게 씁니다.
    • role="heading"에는 반드시 aria-level을 줍니다.
    • 아코디언·탭 헤더처럼 조작 요소가 필요하면 제목 안에 버튼을 넣습니다.

    이렇게 쓰지 마세요

    • 글자 크기를 위해 제목 수준을 고르지 않습니다.
    • 버튼이나 링크 요소 자체에 role="heading"을 주지 않습니다.
    • 시각적 제목을 <div>로만 만들지 않습니다.
    regionmainarticledocument

    이 역할을 쓰는 패턴

    아코디언페이지 레이아웃(랜드마크)

    참고 자료