ARIA 접근성 가이드

역할 · 문서 구조

role="listitem"

list 안의 항목 하나입니다. 반드시 목록 안에 있어야 합니다.

기초HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<li> (<ul>, <ol>, <menu> 안에서)
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
list
필수 하위 요소
없음

설명

listitem은 목록의 항목입니다. 명세상 필수 상위 역할은 list(또는 사용 중단된 directory)이며, 목록 밖에 있으면 의미를 잃습니다.

HTML <li>가 대응합니다. 가상 스크롤처럼 일부 항목만 DOM에 있을 때는 aria-setsize와 aria-posinset으로 전체 개수와 위치를, 중첩 목록의 깊이를 DOM 구조로 나타낼 수 없을 때는 aria-level을 쓸 수 있습니다.

이름은 작성자가 지정할 수 있지만 보통은 쓰지 않습니다. 항목의 내용이 그대로 읽힙니다.

함께 쓰는 속성

지원 속성

aria-levelaria-posinsetaria-setsize

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

사용 예

일부만 렌더링된 긴 목록

HTML
<ul aria-label="검색 결과">
  <li aria-setsize="250" aria-posinset="51">작은 아씨들</li>
  <li aria-setsize="250" aria-posinset="52">작은 것들의 신</li>
</ul>

목록 밖의 listitem (비권장)

비권장HTML
<div>
  <li>작은 아씨들</li>
</div>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
I 키로 다음 항목작은 것들의 신, 250개 중 52번째

사용 지침

이렇게 쓰세요

  • 항목은 <ul>/<ol> 안의 <li>로 만듭니다.

이렇게 쓰지 마세요

  • list 밖에 listitem을 두지 않습니다.
listoptiontreeitem

참고 자료