[웹 접근성] 웹 접근성을 위한 올바른 이미지 활용법

요새는 이미지 없는 사이트를 찾아보기 힘들 정도로 이미지는 텍스트 다음으로 많이 사용됩니다.

이렇게 이미지를 많이 사용하는 이유 중 하나를 꼽으라면 편리함 이겠죠.

장문의 글 없이도 많은 양의 정보를 전달할 수 있다는 편리함.

 

그런데 이미지에도 웹 접근성이 적용된다는 거 알고 있나요?

 

이미지에는 대체 텍스트라는 정보를 추가할 수 있는데요, 이 대체 텍스트를 어떻게 작성하는지가 핵심입니다.

이미지의 대체 텍스트는 HTML 이미지 요소에 ‘alt’ 속성을 사용합니다.

alt 속성은 스크린 리더와 같은 보조 프로그램 사용자도 이미지의 정보를 접할 수 있도록 도와주는 역할을 합니다.

 

대체 텍스트를 작성할 때는 최대한 정확하고 간결하게 작성하는 게 중요합니다.

대체 텍스트의 길이는 주로 120~125자 이내로 하는 게 좋습니다.

그 이유는 스크린 리더 사용자 경험(UX) 때문입니다.

 

대체 텍스트가 너무 길면 스크린 리더 사용자가 많은 양의 정보를 이해하고 사용하기 어렵습니다.

그리고 대체 텍스트는 스크린 리더와의 상호작용이 일반 텍스트와는 다릅니다.

일반 텍스트는 문장이나 단어를 왔다 갔다 할 수 있고 멈췄다가 다시 읽을 수도 있습니다.

하지만 대체 텍스트는 일반 텍스트와는 달리 처음부터 끝가지 한 번에 다 읽습니다.

 

그럼 대체 텍스트는 언제 어떻게 작성해야 할까요?

긴 대체 텍스트가 필요하면 어떻게 해야 할까요?

 

몇 가지 사례들을 살펴보면서 알아보겠습니다.

정보 전달용 이미지

어떠한 정보를 전달할 목적으로 사용되는 이미지의 대체 텍스트는 전달하고자 하는 정보를 포함하고 있어야 합니다.

이런 이미지의 대체 텍스트는 주변 내용에 추가 정보를 더하거나 이미지로 새로운 정보를 전달합니다.

전달하고자 하는 정보의 양에 따라서 대체 텍스트를 작성하는 방법도 달라지는데요, 정보의 양이 짧고 심플하다면 그 정보를 그대로 사용하면 됩니다.

만약 전달하려는 정보의 양이 많다면 대체 텍스트를 따로 제공할 수 있습니다.

긴 대체 텍스트를 제공하는 방법 몇 가지를 알아보겠습니다.

이미지 근처에 제공하기

이 방법은 alt에 이미지에 대한 간단한 정보와 나머지 긴 설명의 위치를 포함하여 작성하면 됩니다.

예를 들어서 사용된 이미지가 어떤 설문조사 결과를 보여주는 그래프라고 가정해 봅시다.

이 그래프는 나이대별로 선호하는 예능 프로그램을 조사한 결과를 나타내고 있습니다.

이 정보를 대체 텍스트로 작성하게 되면 alt 속성은 “2022년 나이별 예능 프로그램 선호도 조사. 자세한 내용은 제목 2022년 예능 프로그램 선호도 조사 아래에 설명되어 있습니다.” 으로 하고 그래프의 모든 정보는 “2022년 예능 프로그램 선호도 조사” 제목 아래에 작성하면 됩니다.

그래프 같은 경우는 테이블을 사용해서 설명할 수도 있습니다.

샘플 코드

<!-- 이미지 바로 아래에 긴 설명 작성 -->
<img src="이미지 주소" alt="2022 나이별 예능 프로그램 선호도 조사" />
<p>이미지 정보 설명</p>

<!---------------------------------------------->

<!-- 대체 텍스트에 긴 설명 위치 포함 -->
<img 
src="이미지 주소"
alt="2022 나이별 예능 프로그램 선호도 조사. 
자세한 내용은 제목 2022 예능 프로그램 선호도 조사 아래에 설명되어 있습니다" />
...
<h2>2022 여능 프로그램 선호도 조사</h2>

이미지 아래에 링크 걸기

이 방법은 말 그대로 이미지 바로 아래에 이미지의 텍스트 설명이 있는 페이지로 가는 링크를 제공하는 방법입니다.

걸어놓은 링크가 꼭 페이지로 갈 필요는 없습니다. 워드 파일이나 텍스트 파일을 사용할 수도 있습니다.

다만 사용하려는 파일의 내용은 오직 텍스트여야 합니다.

이미지의 정보를 글로 설명하는 파일에 이미지를 사용하는 건 말이 안 되죠.

샘플 코드

<!-- 다른 페이지로 가기 -->
<img src="이미지 주소" alt="2022 나이별 예능 프로그램 선호도 조사" />
<a href="2022-예능-프로-조사.html">2022 나이별 예능 프로그램 선호도 설문조사 결과</a>

<!-- or -->

<figure>
  <img alt="2022 나이별 예능 프로그램 선호도 조사" src="이미지 주소"/>
  <figcaption>
    <a href="2022-예능-프로-조사.html">2022 나이별 예능 프로그램 선호도 설문조사 결과</a>	
  </figcaption>
</figure>

<!-- 파일 사용 -->
<img src="이미지 주소" alt="2022 나이별 예능 프로그램 선호도 조사" />
<a href="2022-예능-프로-조사.docx">2022 나이별 예능 프로그램 선호도 설문조사 결과</a>

<!-- or -->

<figure>
  <img alt="2022 나이별 예능 프로그램 선호도 조사" src="이미지 주소"/>
  <figcaption>
    <a href="2022-예능-프로-조사.docx">2022 나이별 예능 프로그램 선호도 설문조사 결과</a>	
  </figcaption>
</figure>

장식용 이미지

장식용 이미지는 디자인 용도로 사용되기 때문에 보조 프로그램/장치 사용자에게는 필요 없는 이미지입니다.

이런 이미지는 간단하게 alt 속성을 비워두면 됩니다.

여기서 중요한 건 alt 속성을 안 쓰는 게 아니라 비워둔다는 겁니다.

alt 속성을 비워두면 보조 프로그램/장치 가 장식용으로 이해하고 자동으로 무시하게 됩니다.

샘플 코드

<img src="이미지 주소" alt="" />

기능성 이미지

기능성 이미지는 말 그대로 어떠한 기능을 나타내는 이미지입니다.

예를 들면 검색 버튼에 사용하는 돋보기 이미지, 이메일 주소 레이블에 사용되는 이메일 아이콘, 등등.

로고도 기능성 이미지라고 할 수 있습니다.

기능성 이미지의 대체 텍스트는 그 기능을 설명합니다.

즉, 이미지에 대한 정보가 아니라 기능에 대한 정보를 대체 텍스트로 사용하는 겁니다.

샘플 코드

<!-- 검색 버튼 -->
<button>
  <img src="search.jpg" alt="검색" />
</button>

<!-- 레이블 이미지 -->
<p>
  <img src="email.jpg" alt="이메일" />
  email@email.com
</p>

<!-- 로고 -->
<a href="/">
  <img src="logo.jpg" alt="티스토리 홈" />
</a>

<!-- 문서 형식 -->
<a href="word.docx">
  워드 파일
  <img src="word.jpg" alt="워드 파일" />
</a>
<a href="powerpoint.pptx">
  파워포인트 파일
  <img src="powerpoint.jpg" alt="파워포인트 파일" />
</a>
<a href="ebook.pdf">
  PDF 파일
  <img src="pdf.jpg" alt="PDF 파일" />
</a>

 

이렇게 사례별로 이미지의 대체 텍스트 작성하는 법을 간단하게 알아봤습니다.

위에서 다룬 사례들이 모든 사례에 적용된다고 할 수는 없지만, 이 사례들을 통해서 이미지의 대체 텍스트 작성법을 좀 더 잘 이해했기를 바랍니다.