ARIA 접근성 가이드

역할 · 랜드마크

role="contentinfo"

저작권, 연락처, 개인정보처리방침 링크처럼 사이트 공통의 꼬리 영역을 나타내는 랜드마크입니다.

기초HTML 요소 우선

한눈에 보기

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

설명

contentinfo는 문서 전체에 대한 정보, 즉 저작권 표시, 회사 정보, 연락처, 이용약관·개인정보처리방침 링크 등을 담는 영역입니다. 보통 페이지 맨 아래에 놓입니다.

HTML과의 관계

<body> 범위의 <footer>는 자동으로 contentinfo가 됩니다. <article>이나 <section>·<main> 안의 <footer>는 그 구획의 꼬리말이라 contentinfo가 아닙니다(최신 HTML-AAM은 ARIA 1.3의 sectionfooter로 대응합니다).

주의할 점

  • 한 문서에 contentinfo는 하나만 둡니다.
  • 글마다 붙는 작성자·작성일 꼬리말에 role="contentinfo"를 붙이지 않습니다.

테스터 관점

랜드마크 목록에 “콘텐츠 정보”가 하나만 나오는지, 본문의 <footer>가 잘못 contentinfo로 지정되지 않았는지 확인합니다.

함께 쓰는 속성

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

사용 예

최상위 footer (권장)

권장HTML
<body>
  <header>…</header>
  <main>…</main>
  <footer>
    <p>© 2026 한빛도서관</p>
    <a href="/privacy">개인정보처리방침</a>
  </footer>
</body>

글 꼬리말에 contentinfo 지정 (비권장)

비권장HTML
<article>
  <h2>이달의 추천 도서</h2>
  …
  <footer role="contentinfo">작성자: 사서팀</footer>
</article>

직접 해 보기

footer의 위치에 따라 랜드마크 목록이 어떻게 달라지는지 보세요.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동콘텐츠 정보 랜드마크, © 2026 한빛도서관

    사용 지침

    이렇게 쓰세요

    • 사이트 공통 꼬리 영역은 <body> 바로 아래 <footer>로 만듭니다.

    이렇게 쓰지 마세요

    • 글·카드·구획의 꼬리말에 role="contentinfo"를 붙이지 않습니다.
    • contentinfo를 한 페이지에 여러 개 만들지 않습니다.
    bannernavigationmaincomplementaryregionsearchform

    이 역할을 쓰는 패턴

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

    참고 자료