ARIA 접근성 가이드

역할 · 랜드마크

role="main"

페이지의 핵심 본문을 나타내는 랜드마크입니다. 문서마다 하나만 둡니다.

기초HTML 요소 우선

한눈에 보기

분류
랜드마크
대응 HTML
<main>
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

main은 그 페이지에만 있는 중심 내용, 즉 사용자가 이 페이지를 찾아온 이유가 되는 영역을 표시합니다. 머리말·메뉴·꼬리말처럼 여러 페이지에 반복되는 부분은 넣지 않습니다. 화면낭독기 사용자는 랜드마크 이동으로 반복 영역을 건너뛰고 본문으로 바로 갈 수 있어, 반복 영역 건너뛰기(WCAG 2.4.1)를 돕는 기본 수단이 됩니다.

HTML과의 관계

<main> 요소를 쓰면 자동으로 main 역할이 됩니다. 오래된 브라우저 지원을 위해 <main role="main">처럼 쓰던 관행이 있었지만 현재는 필요하지 않습니다.

주의할 점

  • 한 문서에는 보이는 main이 하나만 있어야 합니다. HTML도 hidden이 아닌 <main>을 둘 이상 두지 못하게 합니다.
  • <main>은 <article>, <aside>, <nav>, <header>, <footer> 안에 넣지 않습니다.
  • 페이지의 <h1>은 보통 main 안 첫머리에 둡니다.
  • “본문 바로가기” 링크는 <main id="content">를 대상으로 하면 됩니다. 일부 브라우저에서 포커스 이동이 확실하도록 대상에 tabindex="-1"을 함께 두기도 합니다.

테스터 관점

랜드마크 목록에 “메인”이 정확히 하나 있는지, 반복 영역(메뉴·배너)이 main 밖에 있는지, 본문 바로가기가 main으로 이동하는지 확인합니다.

함께 쓰는 속성

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

사용 예

기본 구조

권장HTML
<body>
  <a href="#content" class="skip">본문 바로가기</a>
  <header>…</header>
  <nav aria-label="주 메뉴">…</nav>
  <main id="content" tabindex="-1">
    <h1>도서 검색</h1>
    …
  </main>
  <footer>…</footer>
</body>

단일 페이지 앱에서 div를 써야 할 때

HTML
<div id="root">
  <div role="main" id="content">…</div>
</div>

main이 여러 개 (비권장)

비권장HTML
<main>목록</main>
<main>상세</main>

보이는 main은 하나여야 합니다. 탭처럼 바꿔 보여 준다면 숨긴 쪽에 hidden을 줍니다.

직접 해 보기

main이 하나일 때와 둘일 때 랜드마크 목록을 비교해 보세요.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동메인 랜드마크, 도서 검색, 제목 수준 1
    본문 바로가기 링크 실행메인 랜드마크, 도서 검색, 제목 수준 1

    사용 지침

    이렇게 쓰세요

    • 페이지의 고유 본문 전체를 <main> 하나로 감쌉니다.
    • 본문 바로가기 링크의 대상으로 main을 씁니다.

    이렇게 쓰지 마세요

    • 머리말·메뉴·꼬리말을 main 안에 넣지 않습니다.
    • 보이는 main을 두 개 이상 두지 않습니다.
    bannernavigationcomplementarycontentinforegionsearchform

    이 역할을 쓰는 패턴

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

    참고 자료