ARIA 접근성 가이드

역할 · 랜드마크

role="banner"

로고, 사이트 이름, 전체 메뉴처럼 사이트 공통의 머리 영역을 나타내는 랜드마크입니다.

기초HTML 요소 우선

한눈에 보기

분류
랜드마크
대응 HTML
<header> (<body> 바로 아래 범위일 때만. <article>, <aside>, <main>, <nav>, <section> 안에 있으면 banner가 아닙니다)
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

banner는 페이지마다 달라지는 내용이 아니라 사이트 전체에 공통으로 붙는 머리 영역을 표시합니다. 보통 로고(사이트 이름), 사이트 검색, 주 메뉴, 로그인 링크 등이 들어가며 화면 맨 위에 가로로 길게 놓입니다. 화면낭독기 사용자는 랜드마크 이동 키(NVDA의 D)나 랜드마크 목록으로 이 영역에 바로 가거나 건너뛸 수 있습니다.

HTML과의 관계

<header>가 <body> 범위에 있을 때(조상 중에 <article>, <aside>, <main>, <nav>, <section>이 없을 때) 브라우저가 자동으로 banner 역할을 줍니다. 그래서 대부분의 경우 role="banner"를 따로 쓸 필요가 없습니다. 반대로 <article>이나 <main> 안의 <header>는 그 구획의 머리말일 뿐이라 banner가 되지 않습니다(일반 컨테이너로 노출되며, 최신 HTML-AAM은 이를 ARIA 1.3의 sectionheader로 대응합니다).

주의할 점

  • 한 문서(document나 application)에는 banner를 하나만 둡니다. iframe 안의 문서처럼 별도 문서라면 각각 하나씩 있을 수 있습니다.
  • 페이지 고유의 제목이나 본문 소개는 banner가 아니라 main에 둡니다.
  • 최상위 <header>를 쓰기 어려운 구조(예: 프레임워크가 감싸는 <div>)라면 그때 role="banner"를 붙입니다.

테스터 관점

랜드마크 목록에서 배너가 정확히 하나인지, 사이트 공통 요소(로고·주 메뉴)가 그 안에 있는지 확인합니다. 본문 안 <header>에 role="banner"를 붙여 배너가 여러 개 생긴 경우가 흔한 오류입니다.

함께 쓰는 속성

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

사용 예

최상위 header 사용 (권장)

권장HTML
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="한빛도서관"></a>
    <nav aria-label="주 메뉴">…</nav>
  </header>
  <main>…</main>
</body>

<body> 바로 아래의 <header>는 자동으로 banner가 됩니다.

구조상 div를 써야 할 때

HTML
<div id="app">
  <div role="banner">
    <a href="/">한빛도서관</a>
  </div>
  <div role="main">…</div>
</div>

본문 머리말에 banner 지정 (비권장)

비권장HTML
<main>
  <article>
    <header role="banner">
      <h1>도서 대출 안내</h1>
    </header>
  </article>
</main>

글(article)의 머리말은 사이트 공통 영역이 아닙니다. 배너가 두 개가 되어 랜드마크 탐색이 혼란스러워집니다.

직접 해 보기

예시 페이지를 바꿔 가며 아래 "찾은 랜드마크" 목록을 비교해 보세요. 화면낭독기가 만드는 랜드마크 목록과 같은 규칙으로 계산합니다.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동배너 랜드마크, 한빛도서관, 링크
    NVDA+F7 랜드마크 목록배너

    사용 지침

    이렇게 쓰세요

    • 사이트 공통 머리 영역은 <body> 바로 아래 <header>로 만듭니다.
    • 배너는 페이지마다 하나만 둡니다.

    이렇게 쓰지 마세요

    • <article>·<section> 안의 머리말에 role="banner"를 붙이지 않습니다.
    • 이미 최상위 <header>인 요소에 role="banner"를 중복해서 쓰지 않습니다(틀리진 않지만 불필요합니다).
    navigationmaincomplementarycontentinforegionsearchform

    이 역할을 쓰는 패턴

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

    참고 자료