ARIA 접근성 가이드

역할 · 문서 구조

role="feed"

스크롤하면 글(article)이 계속 추가되는 무한 스크롤 목록을 화면낭독기로 탐색할 수 있게 합니다.

심화

한눈에 보기

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

설명

feed는 뉴스 피드, SNS 타임라인처럼 사용자가 읽어 내려가면 새 글을 불러와 끝없이 이어지는 글 목록입니다. 일반 무한 스크롤은 화면낭독기 사용자가 끝에 도달하기 전에 내용이 바뀌거나, 반대로 새 내용을 불러오지 못하는 문제가 있습니다. feed는 이를 해결하기 위해 읽기 커서 이동과 포커스를 연동하는 규칙을 정합니다.

구조 규칙

  • feed의 자식은 article입니다. 각 article은 포커스를 받을 수 있게 tabindex="0"(또는 -1)을 주고, 포커스를 받으면 화면에 보이도록 스크롤합니다.
  • 각 article에 aria-labelledby(제목)와 필요하면 aria-describedby(본문 요약)를 줍니다.
  • 전체 개수를 알면 aria-setsize, 모르면 -1을 쓰고, 각 article의 위치를 aria-posinset으로 알립니다.
  • 글을 추가·제거하는 동안 feed에 aria-busy="true"를 두고, 끝나면 false로 돌립니다. 목록 중간에 글을 끼워 넣지 않습니다.

feed와 log의 차이

log는 새 항목이 생기면 자동으로 읽어 주는 라이브 리전이고, feed는 사용자가 스스로 읽어 가며 불러오는 구조입니다. feed는 새 글을 자동으로 읽어 주지 않습니다.

참고

feed는 지원과 사용 사례가 많지 않은 고급 패턴입니다. “더 보기” 버튼으로 다음 글을 불러오는 방식이 대부분의 사용자에게 더 예측 가능합니다.

함께 쓰는 속성

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

키보드 동작

키보드 동작
키동작
Page Down다음 article로 포커스를 옮깁니다.
Page Up이전 article로 포커스를 옮깁니다.
Ctrl + Endfeed 다음의 첫 포커스 가능한 요소로 이동합니다.
Ctrl + Homefeed 앞의 첫 포커스 가능한 요소로 이동합니다.

사용 예

피드 구조

HTML
<div role="feed" aria-label="새 소식" aria-busy="false">
  <article tabindex="0" aria-labelledby="a1-h" aria-posinset="1" aria-setsize="-1">
    <h3 id="a1-h">여름 독서 교실 모집</h3>
    <p>…</p>
  </article>
  <article tabindex="0" aria-labelledby="a2-h" aria-posinset="2" aria-setsize="-1">
    <h3 id="a2-h">휴관일 안내</h3>
    <p>…</p>
  </article>
</div>

글을 불러올 때

JavaScript
feed.setAttribute('aria-busy', 'true');
appendArticles(newItems);   // 목록 끝에만 추가
feed.setAttribute('aria-busy', 'false');

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
피드 안의 글로 이동새 소식, 피드, 여름 독서 교실 모집, 아티클, 1

사용 지침

이렇게 쓰세요

  • article마다 포커스와 이름을 주고 aria-posinset/aria-setsize를 관리합니다.
  • 불러오는 동안 aria-busy="true"를 둡니다.

이렇게 쓰지 마세요

  • article 사이 중간 위치에 새 글을 끼워 넣지 않습니다.
  • feed 자식으로 article 외의 요소를 두지 않습니다.
articleloglist

참고 자료