ARIA 접근성 가이드

역할 · 문서 구조

role="article"

기사, 게시글, 댓글처럼 그것만 따로 떼어도 완결되는 콘텐츠 묶음을 나타냅니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<article>
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

article은 문서·페이지·사이트 안에서 독립적으로 배포하거나 재사용할 수 있는 구성 단위입니다. 뉴스 기사, 블로그 글, 포럼 게시물, 사용자 댓글, 상품 카드 등이 해당합니다. 랜드마크는 아니지만 여러 화면낭독기가 article 단위 이동이나 안내를 제공합니다.

HTML과의 관계

<article>가 대응합니다. 댓글처럼 원글과 관련된 글은 원글 <article> 안에 다시 <article>을 넣어 중첩할 수 있습니다.

feed 안의 article

feed 안에서는 각 article이 포커스를 받을 수 있게(tabindex="0" 또는 -1) 만들고, 전체 개수를 알면 aria-setsize·aria-posinset으로 위치를 알립니다. 이 두 속성은 feed 안의 article에서만 의미가 있습니다.

주의할 점

  • article 안에 제목(<h2> 등)을 두어 내용을 알 수 있게 하고, 필요하면 aria-labelledby로 그 제목을 이름으로 연결합니다.
  • 단순한 레이아웃 박스에는 article을 쓰지 않습니다.

함께 쓰는 속성

지원 속성

aria-posinsetaria-setsize

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

사용 예

게시글과 댓글

권장HTML
<article aria-labelledby="post-h">
  <h2 id="post-h">여름 독서 프로그램 안내</h2>
  <p>…</p>
  <section aria-label="댓글">
    <article>
      <p><b>김하늘</b>: 신청 방법이 궁금해요.</p>
    </article>
  </section>
</article>

피드 안의 article

HTML
<div role="feed" aria-busy="false" aria-label="새 소식">
  <article tabindex="0" aria-posinset="1" aria-setsize="20" aria-labelledby="n1">
    <h3 id="n1">도서관 휴관 안내</h3>…
  </article>
</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
글 영역으로 이동여름 독서 프로그램 안내, 아티클

사용 지침

이렇게 쓰세요

  • 독립적으로 의미가 통하는 콘텐츠 단위에 <article>을 씁니다.
  • article 안에 제목을 둡니다.

이렇게 쓰지 마세요

  • 장식용 박스나 레이아웃 칸에 article을 쓰지 않습니다.
  • feed 밖의 article에 aria-posinset/aria-setsize를 쓰지 않습니다.
feedregionmaindocument

참고 자료