정의 및 사용 방법

role 속성의 img 값은 웹 접근성 측면에서 해당 HTML 요소에 '하나의 이미지로 식별되어야 할 영역'이라는 의미(semantic meaning)의 역할(role)을 부여합니다.

role 속성의 img 값은 image 값과 동의어입니다. 동일하게 작동합니다.

'하나의 이미지로 식별되어야 할 영역'이란 캡션이나 설명 텍스트뿐만 아니라, 함께 보았을 때 하나의 이미지처럼 보이는 하나 이상의 이미지 파일, 코드 조각, 텍스트, 특수문자, 텍스트 이모티콘, 이모지, SVG 이미지, 기타 그래픽 관련 구현 등을 포함할 수 있습니다.

다음과 같은 '하나의 이미지로 식별되어야 할 영역'에 사용하면 스크린 리더 등과 같은 웹 접근성 도구를 사용하는 사람이 해당 영역을 하나의 이미지로 식별할 수 있기 때문에 매우 유용합니다.

  • 여러 이미지 파일을 포함하지만 단일 이미지로 식별해야 하는 콘텐츠 영역
  • 코드 조각이나 텍스트, 특수 문자, 이모지 등을 조합해 사람의 표정과 감정 등을 이미지처럼 사용한 텍스트 이모티콘 영역
  • 이미지 파일 대신 인라인 SVG로 삽입한 이미지 영역
  • <canvas>로 그린 이미지 영역

주의할 점

role="img"로 지정한 요소의 하위 요소는 접근성 API에서 모두 고유한 의미(semantic meaning)에 해당하는 역할이 매핑되지 않습니다. 단, 텍스트 내용은 포함됩니다.

만약 아래의 예제와 같이 실제 마크업이 되어 있다면:

HTML 
<div role="img">
    <h3>Title of my image</h3>
</div>

접근성 API에서는 다음과 같이 매핑됩니다.

HTML 
<div role="img">
    Title of my image
</div>

레이블 지정에 대하여

role 속성의 img 값이 지정된 요소가 스크린 리더 등과 같은 웹 접근성 도구를 사용하는 사람에게 인식이 가능(perceivable)하게 하려면 해당 이미지가 무엇을 나타내는지 반드시 aria-labelledby, aria-label 등과 같은 접근성 이름(accessible name)을 지정해야 합니다.

다음은 '접근성 이름(accessible name)' 용어에 대한 간단한 부연설명입니다.
접근성 이름(accessible name)
웹 접근성 측면에서 요소의 시각적 속성(예: 버튼에 표시된 텍스트)이나 비시각적 속성(예: 그래픽 이미지나 아이콘의 대체 텍스트 )을 통해 스크린 리더 등과 같은 접근성 도구가 식별할 수 있는 해당 요소의 이름입니다.

대부분의 스크린 리더는 role="img"가 설정된 요소를 블랙박스처럼 간주하여 그 안의 개별 요소의 텍스트는 접근하지만 의미(semantic meaning)의 역할(role)에는 접근하지 않습니다. 이러한 레이블(이름)이 해당 요소에 지정되어야만 스크린 리더 등과 같은 웹 접근성 도구를 사용하는 사람이 어떤 이미지인지 정확히 식별할 수 있습니다.

이미지가 순전히 시각적인 표현을 위한 것이라면 role="img"보다는 role="presentation" 또는 role="none" 사용을 고려해 보세요.

기본 예제

다음은 이미지 파일 대신 인라인 SVG로 삽입한 이미지 영역에 '하나의 이미지로 식별되어야 할 영역'이라는 의미(semantic meaning)의 역할(role)을 부여한 예제입니다.

HTML 
<svg viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="체크 아이콘">
    <circle cx="50" cy="50" r="45" fill="blue" />
    <path d="M35 50 L45 60 L65 40" 
        stroke="#FFFFFF" 
        stroke-width="6" 
        stroke-linecap="round" 
        stroke-linejoin="round" 
        fill="none" />
</svg>
실제 적용된 모습

활용 예제

role="img"의 다양한 사용 예제 중 일부를 살펴보겠습니다.

여러 이미지 파일을 하나의 이미지로 표현

여러 이미지 파일을 포함하지만 단일 이미지로 식별해야 하는 콘텐츠 영역에는 role="img"를 사용해서 캡션이나 설명 텍스트를 레이블로 지정하는 것이 좋습니다.

HTML 
<div role="img" aria-label="서울 도심 지도">
    <img src="map-top-left.png" alt="서울 도심 지도 왼쪽 위 영역">
    <img src="map-top-right.png" alt="서울 도심 지도 오른쪽 위 영역">
    <img src="map-bottom-left.png" alt="서울 도심 지도 왼쪽 아래 영역">
    <img src="map-bottom-right.png" alt="서울 도심 지도 오른쪽 아래 영역">
</div>

대부분의 스크린 리더는 role="img"가 설정된 요소를 블랙박스처럼 간주하여 그 안의 개별 요소인 <img>의 역할에는 접근하지 않습니다. 이미지에 대한 포괄적이고 전반적인 이름은 aria-label속성을 통해 제공하고, 개별 <img>의 alt 속성 값은 검색 엔진이나, 일반 사용자를 위한 이미지 로드 실패 시를 대비한 대체 텍스트로만 사용합니다.

텍스트 이모티콘을 하나의 이미지로 표현

텍스트와 특수문자를 조합하여 사람의 표정이나 감정 등을 표현한 텍스트 이모티콘은 시각적으로 그 의미를 쉽게 이해할 수 있지만, 스크린 리더 사용자는 그 의미를 이해하기 어려울 수 있습니다. 이 경우 role="img"를 사용하고 레이블을 추가하여 하나의 이미지로 설명하면 매우 유용합니다.

HTML 
<div role="img" aria-label="웃는 얼굴">^_^</div>

<canvas>로 그린 이미지 영역

<canvas>태그는 자바스크립트로 그리는 비트맵 그래픽 캔버스를 제공합니다. 해당 요소의 그래픽이 이미지를 나타내는 것이라면 role="img"를 사용하고 캡션이나 설명 텍스트를 레이블로 지정할 수 있습니다.

HTML 
<canvas id="example" width="150" height="150" role="img" aria-label="캔버스로 그린 그림"></canvas>

CSS background-image를 사용하는 영역

이미지를 렌더링하는 HTML 요소가 아닌 CSS의 background-image 속성을 사용해 특정 영역을 이미지를 나타내는 것이라면 role="img"를 사용하고 캡션이나 설명 텍스트를 레이블로 지정할 수 있습니다.

HTML 
<div role="img" aria-label="산과 호수가 있는 풍경"></div>
CSS 
div {
    width: 300px;
    height: 200px;
    background-image: url("landscape.jpg");
}

명세서

role 속성의 img 값에 대한 명세서 사양
명세서 사양
role="img" Accessible Rich Internet Applications (WAI-ARIA)
#img
role="image" Accessible Rich Internet Applications (WAI-ARIA)
#image

참고문헌

같이 보기