ARIA 접근성 가이드

역할 · 문서 구조

role="generic"

스스로는 아무 의미가 없는 이름 없는 컨테이너입니다. <div>, <span>의 암묵적 역할이며 작성자가 직접 쓰지 않습니다.

심화HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<div>, <span> 등 (<b>, <i>, <u>, <small>, 이름 없는 <section> 포함)
이름 정하는 방법
금지 (prohibited)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

generic은 WAI-ARIA 1.2에서 추가된 역할로, HTML의 <div>·<span>처럼 의미 없는 요소를 브라우저가 접근성 트리에 표현하기 위한 것입니다. 명세는 작성자가 콘텐츠에 이 역할을 쓰지 말라고 정하고 있습니다.

none/presentation과의 차이

none/presentation은 요소의 의미를 지워 접근성 트리에서 아예 빼는 반면, generic 요소는 트리에 남아 위치·크기 정보와 aria-live 같은 일부 속성을 제공할 수 있습니다. 그래서 <div aria-live="polite">가 라이브 리전으로 동작합니다.

이름 금지

generic에는 aria-label, aria-labelledby, aria-roledescription을 쓸 수 없습니다. 그래서 의미 없는 <div aria-label="…">, <span aria-label="…">은 화면낭독기가 읽지 않는 경우가 많습니다. 이름이 필요한 묶음이라면 group이나 region처럼 이름을 가질 수 있는 역할을 씁니다.

테스터 관점

<div aria-label>, <span aria-label>로 정보를 전달하는 코드를 찾으면 이름이 무시될 수 있다고 지적합니다. 아이콘이라면 role="img"를 함께 주거나 숨긴 텍스트를 씁니다.

함께 쓰는 속성

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

사용 예

div에 aria-label만 (비권장)

비권장HTML
<div aria-label="필수 항목">*</div>

generic은 이름이 금지되어 있어 “필수 항목”이 읽히지 않을 수 있습니다.

대신 이렇게

권장HTML
<span aria-hidden="true">*</span><span class="sr-only">필수 항목</span>
<!-- 또는 의미 있는 역할 -->
<span role="img" aria-label="필수 항목">*</span>

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
div 안 텍스트 읽기(역할 안내 없이 내용만 읽음)

사용 지침

이렇게 쓰세요

  • 의미 없는 컨테이너는 그냥 <div>/<span>으로 둡니다.
  • 이름이 필요하면 group, region, img 등 이름을 허용하는 역할을 씁니다.

이렇게 쓰지 마세요

  • role="generic"을 직접 쓰지 않습니다.
  • 의미 없는 요소에 aria-label로 정보를 담지 않습니다.
nonepresentationgroupregion

참고 자료