올바른 대체 텍스트

모든 <img>의 alt 특성에는 항상 유의미한 문자열을 지정해야 한다는 말을 찾아볼 수 있다. 사실일까? 아니다. alt=""는 더할 나위 없이 유효한 구문이다. 되려 강박적으로 모든 이미지에 설명을 제공하려 하는 것이 심각한 방해다. 그럼에도 불구하고 alt 특성이 “문법 상 필수”라고 주장하는 글도 있다. 다양한 린터와 심사 도구에서 alt가 존재하지 않는 이미지를 발견하면 전후 사정을 고려하지 않고 경고하는 탓도 있다고 본다.

그나마 alt가 무엇인지 더 자세히 설명하는 글에서도 보통 “이래서 좋다” 정도로만 언급하고, 작성 방식에 대해서도 두루뭉실하게 “구체적이지만 키워드 스팸을 피하라” 정도로만 언급할 뿐이다. 때문에 아이콘이나 썸네일 등을 살펴보면 잘못된 정보를 넣은 경우가 상당하다.

alt의 정의

alt 특성의 값은 이미지를 처리할 수 없거나 이미지를 비활성화한 사용자에게 제공하는, 이미지와 동등[equivalent]한 콘텐츠입니다.

HTML Living Standard: The img element

스크린 리더 사용자에게, 그리고 이미지를 찾을 수 없는 상황에 제공하는 대체 텍스트라는 점은 대부분이 알고 있다. 중요한 점은 동등한 텍스트를 제공해야 한다는 것이다. 동일한 텍스트로 받아들이기 쉬우나 동등과 동일은 다르다.

HTML Living Standard는 이미지 대체 텍스트 가이드라인에 별도 섹션을 할애하고 있다.

아래에 명시한 상황 외에는 alt 특성이 존재해야 하며 그 값이 비어있지 않아야 합니다. 내용은 이미지를 대체하기에 적합해야 합니다. alt 특성의 세부 요구사항은 이미지가 나타내는 내용에 따라 다르며, 아래에서 설명합니다.

가장 일반적인 규칙은, 페이지의 모든 이미지를 각각의 alt 값으로 완전히 바꿔도 페이지의 의미가 바뀌지 않아야 한다는 것입니다.

따라서, 이미지를 구할 수 없는 상황에서 대신 사용했을 텍스트를 alt의 값으로 제공하면 됩니다.

여기서 추론할 수 있는 것은 alt 특성의 값에 이미지의 설명, 제목, 범례 등이 들어가서는 안된다는 것입니다. alt는 이미지를 대체하기 위함이지, 보충하기 위한 것이 아닙니다. 보충 정보는 title을 사용해 제공할 수 있습니다.

이미지 바로 옆의 텍스트가 이미 제공한 정보를 alt의 값으로 반복해서는 안된다는 점도 추론할 수 있습니다.

HTML Living Standard: The img element

예제

아이콘의 형태를 그대로 묘사하기

체인 아이콘이 뭘까? 뭐 하자는 체인일까? 사실 공유 버튼이다.

체인을 공유의 의미로 많이 사용하므로, 시각적 사용자면서 웹을 어느 정도 사용한 사람이라면 저 버튼이 “공유하기”라는 것을 알아낼 수 있다. 그러나 비 시각적 사용자라면 뭔지도 모를 체인밖에 알 수 없다.

가이드라인은 “모든 이미지를 alt의 값으로 바꿔도 그 의미가 바뀌지 않아야 한다”라고 했다. 직접 바꿔보면 QA에서 버그로 잡을 법한 결과가 나온다.

<button onclick="copyURLToClipboard">체인 아이콘</button>

버튼의 경우 시각적 사용자가 받아들이는 의미와 동일하게, 이미지의 대체 텍스트는 그 동작을 설명해야 한다.

<button onclick="copyURLToClipboard">URL 복사하기</button>

<button onclick="copyURLToClipboard">
  <img src="/icons/share-chain.svg" alt="URL 복사하기" />
</button>

식별자 텍스트를 사용하기

alt="post-thumbnail"은 좀 더 어렵다. 어쨌든 이미지에 대한 설명이니까. 그러나 alt는 설명도 아니고, 클래스 이름같은 식별자는 더더욱 아니다.

블로그 포스트 글의 마크업이 크게 다르지는 않으니, 대략 다음과 같은 예제를 생각할 수 있다.

<article>
  <img alt="post-thumbnail" />
  <h1>올바른 대체 텍스트</h1>
</article>

체인 아이콘과 마찬가지로 이미지의 자리에 텍스트를 대신 넣어보자.

<article>
  <span>post-thumbnail</span>
  </h1>올바른 대체 텍스트</h1>
</article>

마찬가지로 버그로 간주해야 할 상황이지만, 이번엔 한국어조차 아니다. “post-thumbnail”이라는 텍스트는 아무 의미도 더하지 않는 불필요한 소음에 불과하다. 애초에 별다른 의미도 없으니 한국어로 바꾼다고 해결할 수도 없다.

사실 제목이 별도로 존재하는 상황이라면, 썸네일 이미지는 처음부터 별 의미를 가지기 힘든 장식적인 존재다. 의미 없는 이미지에는 alt에 빈 문자열을 지정하면 된다.

<article>
  </h1>올바른 대체 텍스트</h1>
</article>

<article>
  <img alt="">
  </h1>올바른 대체 텍스트</h1>
</article>

중복된 정보 제공

썸네일의 alt에 식별자가 아니고 포스트 제목을 넣는 경우도 많다. 앞선 두 개의 예제보다는 용도에 맞게 사용한 것이나, 텍스트로 대체해보면 이상한 것은 마찬가지다.

<article>
  <span>2021년 광교 맛집 랭킹</span>
  <h1>2021년 광교 맛집 랭킹</h1>
</article>

이렇게, 이미지가 설명하는 것을 주변에서 알아낼 수 있는 경우에는 alt를 오히려 비워줘야 한다.

alt를 복잡하게 생각하지 않아도 된다. 우선 그 자리에 이미지 대신 넣어도 말이 되는 텍스트를 생각해보면 된다.

설명할 수 없는 이미지

마지막으로 alt를 아예 생략해야 하는 경우도 있다.

alt 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이지만 텍스트로 표현할 수 없음을 의미합니다.

MDN: <img>

사용자가 이미지를 추가할 때 적합한 설명을 제공하지 않은 경우 클라이언트는 아무런 설명도 제공할 수 없다. 생략 가능한지, 불가능한지조차 알 수 없다. 이럴 때 한정적으로 alt를 아예 생략할 수 있다. 단, HTML Living Standard에서는 적어도 이해에 지장은 없도록 <figure> 요소나 title 특성으로 설명을 추가하도록 요구한다.

<img title="CAPTCHA" /> <a>이미지를 사용하실 수 없나요? <button>오디오로 인증</button>하세요.</a>

alt가 이미지의 제목이 아님을 다시 떠올려보자. “CAPTCHA”는 이미지의 제목이지만 그 내용은 무작위 생성된 문자열이다. alt는 이미지의 내용을 담아야 하지만, 기계 막자고 붙이는 질문의 정답을 평문으로 클라이언트에 넣을 수는 없는 법이므로 alt를 생략하는 것이 옳은 경우 중 하나다.

alt 특성의 실용성에 대해서는 직접 VoiceOver를 켜보거나, 이미지 네트워크 요청을 막아보기 전까지는 알기 힘들다. 대부분의 접근성 기능이 그렇다. 그러니 alt에 대한 자료가 적은 것과, 그로 인해 개선의 여지를 가진 곳이 많아지는 것도 어쩔 수는 없다고 생각한다. 그나마도 <img> alt를 검색해보면 꽤나 많은 수의 글은 SEO에 치중한 자료인데, alt의 주 용도가 이미지 검색 등록의 수단으로 알려져 있다는 것을 시사하고 있는 것이라고 생각한다.

그러나 alt는 검색 엔진 보라고 존재하는 특성이 아니다. 검색 엔진도 이미지 처리가 불가능한 사용자의 범주에 들어있을 뿐이다. 필요하면 대체 텍스트가 길어져도 되고 비어있어도 되고 없어도 된다.