ARIA 접근성 가이드

역할 · 랜드마크

role="complementary"

본문을 보충하지만 떼어 놓아도 의미가 통하는 곁가지 영역(사이드바, 관련 글 등)을 나타내는 랜드마크입니다.

기초HTML 요소 우선

한눈에 보기

분류
랜드마크
대응 HTML
<aside> (<body>나 <main> 범위일 때. <article>·<aside>·<nav>·<section> 안에서는 접근 가능한 이름이 있을 때만)
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

complementary는 본문(main)과 관련은 있지만, 떼어 내도 본문의 의미가 손상되지 않는 보충 콘텐츠를 표시합니다. 관련 기사, 인기 글, 저자 소개, 광고 영역, 용어 풀이 상자 등이 해당합니다.

HTML과의 관계

<aside>가 대응 요소입니다. HTML-AAM 기준으로 <body>나 <main> 범위의 <aside>는 항상 complementary이고, <article>·<aside>·<nav>·<section> 안에 들어 있는 <aside>는 접근 가능한 이름이 있을 때만 complementary가 되고 이름이 없으면 일반 컨테이너(generic)입니다. 브라우저마다 반영 시기가 조금씩 다를 수 있습니다.

이름 붙이기

이름은 필수가 아니지만, complementary가 둘 이상이면 aria-labelledby(보이는 제목 참조)나 aria-label로 서로 구분되는 이름을 붙입니다. 이름에 “영역”, “사이드바” 같은 역할 이름을 반복하지 않습니다(화면낭독기가 역할을 따로 읽어 주기 때문입니다).

주의할 점

  • 주 메뉴(탐색 링크 묶음)는 사이드바에 있더라도 navigation으로 표시합니다. 위치가 아니라 내용의 성격으로 역할을 정합니다.
  • complementary는 다른 랜드마크 안에 넣을 수 있지만, 가능하면 최상위나 main 바로 아래에 둡니다.

테스터 관점

사이드바 영역이 랜드마크 목록에 “보충”으로 나오는지, 여러 개라면 각각 다른 이름으로 구분되는지 확인합니다.

함께 쓰는 속성

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

사용 예

본문 옆 관련 글

권장HTML
<main>
  <article>…</article>
  <aside aria-labelledby="rel-h">
    <h2 id="rel-h">함께 읽으면 좋은 글</h2>
    <ul>…</ul>
  </aside>
</main>

두 개의 보충 영역 구분

HTML
<aside aria-label="인기 도서">…</aside>
<aside aria-label="공지사항">…</aside>

사이드바 메뉴를 complementary로 (비권장)

비권장HTML
<aside>
  <ul>
    <li><a href="/notice">공지</a></li>
    <li><a href="/faq">자주 묻는 질문</a></li>
  </ul>
</aside>

탐색 링크만 모은 영역이라면 <nav aria-label="보조 메뉴">가 맞습니다.

직접 해 보기

aside의 위치와 이름에 따라 랜드마크가 되는지 비교해 보세요.

예시 페이지 고르기

    예시 페이지 코드

    화면낭독기에서는

    화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
    상황들리는 안내 (예)
    D 키로 랜드마크 이동인기 도서, 보충 랜드마크, 인기 도서, 제목 수준 2
    랜드마크 목록인기 도서 보충

    사용 지침

    이렇게 쓰세요

    • 본문과 별개로 읽어도 되는 보충 내용을 <aside>로 감쌉니다.
    • 보충 영역이 여러 개면 보이는 제목을 aria-labelledby로 연결해 이름을 붙입니다.

    이렇게 쓰지 마세요

    • 화면 옆에 있다는 이유만으로 탐색 메뉴나 본문 일부를 complementary로 만들지 않습니다.
    • 이름에 “보충 영역”처럼 역할 이름을 반복하지 않습니다.
    bannernavigationmaincontentinforegionsearchform

    이 역할을 쓰는 패턴

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

    참고 자료