ARIA 접근성 가이드

역할 · 문서 구조

role="img"

하나의 이미지로 인식해야 하는 요소입니다. SVG, 아이콘 글꼴, 이모지 묶음 등에 쓰며 이름이 필수입니다.

기초HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<img alt="…"> (비어 있지 않은 alt 또는 alt 없음)
이름 정하는 방법
작성자 (author)
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

img는 하나의 이미지를 이루는 요소 묶음입니다. 여러 그래픽 조각(SVG 도형, 여러 이미지 파일, 문자로 그린 그림)이 모여 하나의 그림처럼 보일 때, 보조기술에 “이것은 이미지 하나”라고 알리고 대체 텍스트를 붙입니다.

HTML과의 관계

<img>는 기본적으로 img 역할이며 alt가 이름이 됩니다. alt=""(빈 값)이면 장식 이미지로 보아 presentation이 됩니다. 따라서 일반 이미지는 <img alt="…">만으로 충분합니다. role="img"가 필요한 대표적 경우는 다음과 같습니다.

  • 인라인 <svg>: 브라우저마다 svg를 다르게 노출하므로 <svg role="img" aria-label="…">로 확실히 합니다. <title> 요소를 이름으로 쓸 수도 있지만 aria-labelledby로 연결하는 편이 지원이 안정적입니다.
  • 여러 요소로 만든 그림: 별점(★★★★☆), 이모지 조합, CSS로 그린 아이콘 등.
  • 아이콘 글꼴: <i class="icon-…">에 의미가 있으면 role="img"와 aria-label을 줍니다(장식이면 aria-hidden="true").

이름이 필수, 자식은 무시됨

img 역할에는 aria-label이나 aria-labelledby로 반드시 이름을 줘야 합니다(콘텐츠에서 이름을 가져오지 않습니다). 또 img는 자식이 표현용(children presentational)이어서, 안에 있는 텍스트·요소는 보조기술에 따로 노출되지 않습니다. 그러니 img 안에 링크나 버튼 같은 조작 요소를 넣으면 안 됩니다.

장식 이미지

의미 없는 장식이라면 role="img"를 쓰지 말고 <img alt="">, SVG라면 aria-hidden="true"로 숨깁니다.

테스터 관점

의미 있는 SVG·아이콘이 “그래픽”으로 읽히고 이름이 있는지, 이름 없는 role="img"(“그래픽”만 들림)나 장식 이미지에 불필요한 이름이 있지 않은지 확인합니다. 브라우저 개발자 도구 접근성 탭에서 계산된 이름을 볼 수 있습니다.

함께 쓰는 속성

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

사용 예

의미 있는 인라인 SVG

권장HTML
<svg role="img" aria-labelledby="logo-t" viewBox="0 0 100 40">
  <title id="logo-t">한빛도서관</title>
  …
</svg>

문자로 만든 별점

권장HTML
<span role="img" aria-label="별점 5점 만점에 4점">★★★★☆</span>

이름 없는 img와 장식 svg 노출 (비권장)

비권장HTML
<div role="img" class="icon-cart"></div>
<svg><path d="…"/></svg>

첫 줄은 “그래픽”으로만 들리고, 둘째 줄의 장식 SVG는 aria-hidden="true"로 숨기는 것이 맞습니다.

직접 해 보기

체크박스를 바꿔 가며 별점 요소가 화면낭독기에서 어떻게 들리는지 비교해 보세요.

★★★★☆

예상 안내:

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
이미지로 이동별점 5점 만점에 4점, 그래픽
이름 없는 role="img"그래픽

사용 지침

이렇게 쓰세요

  • 일반 이미지는 <img alt="…">를 씁니다.
  • 의미 있는 SVG·아이콘·문자 그림에는 role="img"와 이름을 함께 줍니다.
  • 장식 그래픽은 alt=""나 aria-hidden="true"로 숨깁니다.

이렇게 쓰지 마세요

  • 이름 없는 role="img"를 만들지 않습니다.
  • img 역할 안에 링크·버튼 등 조작 요소를 넣지 않습니다(자식이 노출되지 않음).
  • 이름에 “이미지”, “그림” 같은 말을 덧붙이지 않습니다.
figurepresentationnonemath

참고 자료