ARIA 접근성 가이드

역할 · 문서 구조

role="list"

여러 항목(listitem)을 담는 목록입니다. 화면낭독기가 항목 개수를 함께 알려 줍니다.

기초HTML 요소 우선

한눈에 보기

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

설명

list는 항목들의 묶음입니다. 화면낭독기는 목록에 들어갈 때 “목록 5개 항목”처럼 개수를 알려 주고, 목록 단위로 건너뛰는 기능(NVDA L, 항목은 I)을 제공합니다. 메뉴 링크, 검색 결과, 카드 묶음처럼 같은 종류가 나열된 콘텐츠를 목록으로 만들면 전체 규모를 짐작하기 쉬워집니다.

HTML과의 관계

<ul>, <ol>, <menu>가 list이고, 그 안의 <li>가 listitem입니다. 순서가 중요하면 <ol>을 씁니다. HTML 목록이 있으므로 role="list"는 거의 필요하지 않습니다.

role="list"를 다시 붙이는 경우

Safari(VoiceOver)는 CSS로 list-style: none을 준 목록을 목록으로 알리지 않는 경우가 있습니다(의도된 동작). 내비게이션처럼 목록 의미가 꼭 필요하면 <ul role="list">로 명시하는 방법이 쓰입니다.

list와 listbox의 차이

list는 읽기용 정적 구조이고, 사용자가 항목을 선택하는 위젯은 listbox입니다. 클릭해서 고르는 목록이라고 listbox를 쓰는 것이 아니라, 선택 상태(aria-selected)와 화살표 키 조작을 제공할 때만 listbox를 씁니다.

주의할 점

  • list의 자식은 listitem이어야 합니다. <ul> 바로 아래에 <div>나 텍스트를 두지 않습니다.
  • 목록 항목이 하나뿐이거나 목록이 아닌 내용을 들여쓰기 위해 <ul>을 쓰지 않습니다.

함께 쓰는 속성

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

사용 예

순서 있는 목록

권장HTML
<ol>
  <li>회원 가입</li>
  <li>도서 검색</li>
  <li>대출 신청</li>
</ol>

div로 만든 목록

HTML
<div role="list" aria-label="추천 도서">
  <div role="listitem">작은 아씨들</div>
  <div role="listitem">어린 왕자</div>
</div>

자식이 listitem이 아님 (비권장)

비권장HTML
<ul>
  <div><li>작은 아씨들</li></div>
  <span>어린 왕자</span>
</ul>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
목록으로 이동목록 3개 항목, 1. 회원 가입
목록 끝을 지남목록 끝

사용 지침

이렇게 쓰세요

  • 나열된 같은 종류의 항목은 <ul>/<ol>로 묶습니다.
  • list의 자식은 listitem만 둡니다.

이렇게 쓰지 마세요

  • 선택 기능이 없는데 listbox를 쓰지 않습니다.
  • 들여쓰기 목적으로 목록 요소를 쓰지 않습니다.
listitemlistboxfeednavigation

이 역할을 쓰는 패턴

브레드크럼(현재 위치)

참고 자료