이미지 접근성 향상시키기

“접근성 개선” 시리즈로 작성된 2번째 글입니다.

1. 웹 환경에서 이미지 사용량과 접근성

웹 환경에서 이미지 사용량은 점점 더 많아지고 있으며, 많은 웹 사이트들이 이미지를 적극적으로 사용합니다.

The WebAIM Million (상위 백만개 홈페이지의 접근성을 조사한 보고서) 에 따르면 홈페이지당 평균 55.6개의 이미지를 사용한다고 합니다. (작년에 비해 28% 증가)

다만 웹 환경에서 높은 이미지 사용량에 비해 접근성은 잘 고려되어 있지 않았다고 합니다.

21.6% (alt=""는 포함하지 않음)가 대체 텍스트가 지정되어 있지 않음
대체 텍스트가 누락된 이미지 중 43%는 링크 이미지로, 설명이 누락됨
대체 텍스트가 있는 이미지의 14.6%는 의미 없는 텍스트를 사용함

많은 사용량에 비해 접근성 고려는 그렇지 않은 것 같습니다. 그렇다면, 이미지 접근성은 어떻게 높일 수 있을까요?

이번 글에서는 이미지를 사용할 때 접근성을 높일 수 있는 방법에 대해 소개합니다.

2. 대체 텍스트

대체 텍스트란 이미지의 의미와 내용을 설명하는 텍스트입니다. 스크린 리더 등 보조 기술에서도 이미지의 뜻을 읽을 수 있게 하기 위해 사용됩니다.

이미지 태그의 속성에 alt를 지정하여 대체 텍스트를 입력할 수 있습니다. 예를 들어, 행사 배너 이미지에 대체 텍스트를 지정한다고 했을 때 아래 코드처럼 이미지가 전달하고자 하는 내용을 입력할 수 있습니다.


<img src={"banner.png"} alt={"여름 (7/1 ~ 8/31) 할인 50% 이벤트 배너"} />

또한 스크린 리더기에서는 img 태그를 사용하면 대체 텍스트 뒤에 “이미지”를 붙여 읽어주기 때문에, “이미지”는 입력하지 않아야 합니다.


<img src={"banner.png"} alt={"여름 (7/1 ~ 8/31) 할인 50% 이벤트 배너 이미지"} /> ❌
<img src={"banner.png"} alt={"여름 (7/1 ~ 8/31) 할인 50% 이벤트 배너"} /> ✔️

2.1 대체 텍스트를 입력하지 않으면 어떻게 되는가?

Next.js의 Image 컴포넌트에는 alt를 필수로 지정하도록 되어 있는데요, 왜 대체 텍스트를 필수로 지정한걸까요?

nextjs Image Props

스크린리더기 마다 다르겠지만, Mac의 Voice Over에서는 alt가 없는 이미지의 경우, 이미지의 주소를 읽게됩니다.

(윈도우 스크린리더인 NVDA에서는 “누락된 이미지 설명을 확인하려면 컨텍스트 메뉴를 여세요.”라고 나오네요)

Voice Over에서 alt가 없다면 이미지의 주소를 읽어준다

alt가 있는 경우 대체 텍스트를 읽어준다

이미지의 주소를 읽어주면 사용자에게 이미지를 설명할 수도 없고, 더 혼란스럽게 만들게 됩니다. 대체 텍스트를 입력할 수 있는 내용이 있는 이미지라면 위에서 언급했던 것 처럼 alt에 이미지를 설명하는 내용을 같이 입력해주면 됩니다.

3. 장식용 이미지 처리

반면, 단순 장식을 위해 사용하는 이미지라면 혼란을 없애기 위해 아예 스크린리더기가 읽지 않도록 처리해야 하는데요, 이를 구현하는 방법은 크게 3가지가 있습니다.

3.1 대체 텍스트 비워두기 (alt="")

위에서 설명한 대체 텍스트를 비워두는 방법으로, 이미지 태그에서 alt를 빈 값으로 지정하면 됩니다.


<img src={"background_pattern.png"} /> ❌
<img src={"background_pattern.png"} alt={""} /> ✔️

3.2 aria-hidden=“true” 지정하기

aria-hidden은 해당 요소와 하위 요소를 접근성 트리에서 제거하는 속성입니다. 이미지 태그에 aria-hidden="true"을 지정해서 사용할 수 있습니다.


<img src={"background_pattern.png"} aria-hidden="true" />

3.3 role=“presentation” 지정하기

태그의 역할에 장식용임을 명시하는 방법입니다. 태그에 role=“presentation”을 지정해서 사용할 수 있습니다.


<img src={"background_pattern.png"} role="presentation" />

개인적으로는 간단하게 alt=""를 사용하는 편입니다.

4. img 태그를 사용하지 않는 이미지에 대체 텍스트 입력하기

가끔은 img 태그를 사용하지 않고도 이미지를 보여주는 경우가 있습니다.

4.1 background-image를 사용하는 경우

css의 background-image로 이미지를 그리고 있다면, 해당 요소안에 시각적으로 보이지 않는 텍스트를 숨겨주는 방법이 있습니다.

tailwind sr-only

구현은 방식마다 다를 수 있지만, 유틸리티 css인 tailwind에서 제공하는 sr-only 클래스를 살펴보면 크기를 최소한으로 하고 overflow:hidden으로 나머지 영역들은 보이지 않게 처리해서 화면상에서 아예 보이지 않도록 합니다.


<div
  style={{
    backgroundImage: `url('https://images.unsplash.com/...')`,
    backgroundSize: `cover`,
  }}
>
  <span class="sr-only">바다 위로 파도가 해안에 부딪히는 모습</span>
</div>

4.2 svg 를 사용하는 경우

아이콘을 그릴 때 등 svg를 많이 사용하곤 하는데요, svg를 사용하는 경우에는 2가지 방법이 있습니다.

title 태그 사용

svg 내에 title을 넣어 이미지의 의미를 설명하는 방법이 있습니다.


<svg>
  <title id="search-icon-label">검색 아이콘</title>
  <path d="..." />
</svg>

화면상에서 svg를 호버 시 툴팁으로 title의 텍스트를 보여주기 때문에, 스크린리더를 사용하지 않는 사용자에게도 svg의 의미를 전달할 수 있습니다.

aria-label

추후 aria를 설명하는 글에서 후술할 aria-label를 사용하는 방법이 있습니다. svg 뿐 아니라 모든 태그에서 사용 가능한데요, svg에 aria-label에 이미지의 의미를 적어주면 됩니다.


<svg aria-label="검색 아이콘">
  <path d="..." />
</svg>