[웹 퍼블리싱 59] 접근성 - 대체 텍스트 잘 쓰기

앞 편에서 시맨틱이 접근성의 뼈대라고 했다. 그 뼈대 위에서 가장 자주 마주치는 실전 과제가 바로 이미지의 대체 텍스트다. 웹은 이미지로 가득하지만, 화면을 보지 못하는 사용자에게 이미지는 그저 빈자리다. 그 빈자리를 말로 채워 주는 것이 대체 텍스트다. 이번 편은 대체 텍스트를 어떻게 잘 쓰는지 실전에서 파고든다.

나는 대체 텍스트를 오랫동안 형식적으로만 채웠다. 이미지라고 적거나, 파일 이름을 그대로 넣는 식이었다. 그러다 화면 낭독기로 내 페이지를 들어보니, 이런 대체 텍스트는 아무 정보도 주지 못하는 잡음이었다. 잘 쓴 대체 텍스트 하나가 이미지를 비로소 의미 있게 만든다는 걸 그때 배웠고, 그 뒤로 대체 텍스트를 진지하게 대하게 됐다.

1. 대체 텍스트가 대신하는 것

대체 텍스트는 이미지 요소 img의 alt 속성에 담는다. 이것은 이미지를 볼 수 없을 때 그 자리를 대신 채우는 텍스트다. 화면 낭독기는 이미지 대신 이 텍스트를 소리로 읽고, 이미지가 깨져 안 뜰 때도 이 텍스트가 화면에 대신 나타난다. 그래서 대체 텍스트는 이미지가 전하려던 뜻을 글로 옮긴 것이라 할 수 있다.

여기서 핵심은 대체라는 말이다. 이미지의 겉모습을 묘사하는 게 아니라, 이미지가 그 자리에서 하던 역할을 대신하는 것이다. 파란 하늘 사진이라도 날씨를 보여주려는 것인지 여행지를 소개하려는 것인지에 따라 옮길 내용이 달라진다. 나는 이 관점을 얻고 나서 대체 텍스트를 겉모습이 아니라 의미의 번역으로 이해하게 됐다.

그래서 좋은 대체 텍스트에는 이미지라는 말이나 사진이라는 말을 굳이 넣지 않는다. 화면 낭독기가 이미 이미지라고 알려주기 때문에, 또 이미지라고 적으면 두 번 말하는 셈이다. 파일 이름을 그대로 넣는 것도 마찬가지로 소용없다. 나는 이런 군더더기를 걷어내고 이미지가 전하는 내용만 남기는 것이 첫 번째 다듬기라는 걸 배웠다.

대체 텍스트는 맥락에 따라 달라진다. 같은 이미지라도 어느 글에 놓이느냐에 따라 옮길 내용이 바뀐다. 그래서 대체 텍스트는 기계가 자동으로 채우기 어렵고 사람의 판단이 필요하다. 나는 이미지를 넣을 때마다 이 이미지가 이 자리에서 무엇을 하려 하는지를 먼저 묻고, 그 답을 대체 텍스트로 옮기는 순서를 지킨다.

대체 텍스트를 챙기면 접근성만 좋아지는 게 아니다. 검색 엔진은 이미지를 이해할 때 대체 텍스트를 근거로 삼고, 이미지 검색 노출도 여기에 기댄다. 이미지가 안 뜰 때 대신 뜨니 안정성에도 보탬이 된다. 나는 하나를 챙겼을 뿐인데 접근성과 검색과 안정성이 함께 좋아지는 걸 겪으며 대체 텍스트의 무게를 실감했다.

정리하면 대체 텍스트는 이미지의 겉모습이 아니라 의미를 글로 옮긴 것이며, 맥락에 따라 달라지고, 군더더기 없이 핵심만 담아야 한다. 나는 이 원리를 바탕으로 이미지를 종류별로 나누어 다룬다. 이미지는 크게 정보 전달, 장식, 기능, 복잡한 이미지로 나뉘고, 종류마다 대체 텍스트를 쓰는 방식이 다르다. 하나씩 살펴보자.

2. 정보를 전하는 이미지

첫 번째는 정보를 전하는 이미지다. 제품 사진, 인물 사진, 안내 도표처럼 그 안에 사용자가 알아야 할 내용이 담긴 이미지다. 이런 이미지의 대체 텍스트에는 그 정보를 글로 옮긴다. 제품 사진이라면 어떤 제품인지, 안내 도표라면 무엇을 안내하는지를 담는다. 나는 이 종류가 대체 텍스트를 가장 신경 써야 하는 경우라고 본다.

정보 이미지의 대체 텍스트는 간결하면서도 핵심을 담아야 한다. 사진 속 장면을 소설처럼 길게 묘사할 필요는 없다. 이 이미지가 이 맥락에서 전하려는 요점을 한두 문장으로 옮기면 충분하다. 너무 길면 낭독기 사용자가 지치고, 너무 짧으면 정보가 빠진다. 나는 이 균형을 잡는 것이 정보 이미지 대체 텍스트의 관건이라는 걸 배웠다.

무엇을 담고 무엇을 뺄지는 맥락이 정한다. 인물 사진이 소개 글에 쓰이면 그 사람의 이름이, 표정을 말하는 글에 쓰이면 그 표정이 요점이 된다. 같은 사진도 자리에 따라 옮길 내용이 달라지는 것이다. 나는 대체 텍스트를 쓸 때 이 이미지가 없다면 독자가 무엇을 놓칠까를 상상하고, 그 놓칠 내용을 채워 넣는다.

본문 글과 이미지가 같은 정보를 담을 때는 조심해야 한다. 제품 이름이 사진 옆 글에도 적혀 있는데 대체 텍스트에 같은 이름을 또 넣으면, 낭독기가 같은 말을 두 번 읽는다. 이럴 때는 겹치지 않는 정보만 담거나 이미지를 장식으로 처리한다. 나는 이 중복을 피하는 것도 정보 이미지 다루기의 일부라는 걸 알게 됐다.

배경 이미지에는 정보를 담지 않는 것이 원칙이다. 스타일로 넣은 배경 이미지는 화면 낭독기에 아예 노출되지 않는다. 그래서 사용자가 꼭 알아야 할 정보라면 스타일 배경이 아니라 이미지 요소로 넣고 대체 텍스트를 달아야 한다. 나는 중요한 이미지를 배경으로 처리했다가 낭독기 사용자에게 정보가 통째로 사라진 실수를 하고 이 원칙을 새겼다.

정리하면 정보 이미지는 그 안의 내용을 간결하게 옮기되, 맥락이 요점을 정하고, 본문과의 중복을 피하며, 중요한 정보는 배경이 아니라 이미지 요소로 넣는다. 나는 이 종류를 대체 텍스트의 본령으로 여긴다. 그러나 모든 이미지가 정보를 담는 것은 아니다. 다음은 정반대로 아무 정보도 담지 않는 장식 이미지다.

3. 장식 이미지는 비운다

모든 이미지에 설명이 필요한 것은 아니다. 구분선, 배경 무늬, 분위기용 그림처럼 아무 정보도 전하지 않는 순수 장식 이미지가 있다. 이런 이미지에 대체 텍스트를 달면 낭독기가 쓸데없는 설명을 읽어 오히려 방해가 된다. 장식 이미지의 정답은 대체 텍스트를 비우는 것이다. 나는 이 사실을 몰라 한동안 낭독기 흐름을 어지럽혔다.

여기서 중요한 구분이 있다. 대체 텍스트를 비우는 것과 아예 없애는 것은 전혀 다르다. 값을 비운 빈 대체 텍스트 alt=""는 낭독기에게 이 이미지를 건너뛰라는 신호다. 반면 alt 속성 자체가 없으면 낭독기는 참고할 것이 없어 파일 이름을 대신 읽어버린다. 장식 이미지는 속성을 두되 값만 비우는 것이 정답이다.

정보 이미지와 장식 이미지를 가르는 기준은 간단하다. 이 이미지가 사라지면 사용자가 놓치는 정보가 있는가를 물으면 된다. 사라졌을 때 빠지는 정보가 있으면 정보 이미지이니 대체 텍스트를 달고, 사라져도 아무것도 안 빠지면 장식이니 비운다. 나는 이 질문 하나로 대부분의 이미지를 판단하며, 애매할 때는 사용자 입장에서 다시 묻는다.

장식이라는 판단이 이미지가 하찮다는 뜻은 아니다. 분위기를 살리는 이미지는 눈으로 보는 사람에게 분명한 가치가 있다. 다만 그 가치가 글로 옮길 정보가 아닐 뿐이다. 낭독기 사용자에게는 그 이미지를 조용히 건너뛰는 것이 더 나은 경험이다. 나는 장식 이미지를 비우는 것을 무시가 아니라 배려로 이해하게 됐다.

안 넣는 것도 배려라는 사실은 접근성의 중요한 교훈이다. 나는 처음에 모든 이미지에 열심히 설명을 달수록 좋은 줄 알았다. 그러나 구분선까지 설명을 달았다가 낭독기가 의미 없는 말을 줄줄 읽는 걸 듣고 생각을 고쳤다. 필요한 곳에 설명을, 장식에는 침묵을 두는 것이 매끄러운 경험을 만든다는 걸 그때 깨달았다.

정리하면 장식 이미지는 대체 텍스트를 비우되 속성 자체는 남겨 낭독기가 건너뛰게 하고, 정보 유무는 이미지가 사라졌을 때를 상상해 판단한다. 나는 안 넣는 것도 하나의 선택임을 늘 기억한다. 이제 정보도 장식도 아닌, 링크나 버튼 안에 들어가 동작을 대신하는 기능 이미지를 살펴보자.

4. 기능을 하는 이미지

세 번째는 기능 이미지다. 링크나 버튼 안에 들어가 그 자체가 동작을 상징하는 이미지다. 돋보기 아이콘으로 검색을, 집 모양 아이콘으로 홈 이동을 나타내는 식이다. 이런 이미지의 대체 텍스트는 이미지의 겉모습이 아니라 그 동작을 서술해야 한다. 나는 이 차이를 놓쳐 여러 번 어색한 대체 텍스트를 만든 적이 있다.

예를 들어 집 모양 아이콘이 홈으로 가는 링크라면, 대체 텍스트는 집이 아니라 홈으로여야 한다. 사용자가 알아야 할 것은 이 그림이 집처럼 생겼다는 사실이 아니라 이걸 누르면 홈으로 간다는 사실이기 때문이다. 나는 기능 이미지의 대체 텍스트를 쓸 때 이걸 누르면 무슨 일이 일어나는지를 기준으로 삼는다.

텍스트 없이 아이콘만 있는 버튼은 특히 주의해야 한다. 눈으로 보는 사람은 아이콘 모양으로 기능을 짐작하지만, 낭독기 사용자에게는 이름이 없으면 이름표 없는 버튼일 뿐이다. 이럴 때는 아이콘 이미지의 대체 텍스트나 버튼에 붙이는 접근성 이름으로 무슨 버튼인지 반드시 알려야 한다. 나는 아이콘 버튼을 만들 때마다 이름을 챙긴다.

아이콘을 스타일이나 장식용 기호로 넣었다면 반대로 접근성에서 숨겨야 한다. 버튼에 이미 글자 이름이 있고 아이콘은 그저 곁들인 장식이라면, 아이콘까지 읽으면 중복이 된다. 이럴 때는 아이콘을 보조기기에서 숨기고 글자 이름만 읽히게 한다. 나는 아이콘이 기능인지 장식인지에 따라 알리거나 숨기는 처리를 나눠서 한다.

기능 이미지에서 가장 흔한 실수는 모양을 그대로 옮기는 것이다. 돋보기 아이콘에 돋보기라고 적으면 사용자는 그것이 검색 버튼인지 알 수 없다. 모양이 아니라 목적을 적어야 한다. 나는 이 원칙을 지키면서 아이콘만 있는 화면에서도 낭독기 사용자가 길을 잃지 않게 만들 수 있었다. 목적을 옮기는 것이 기능 이미지의 핵심이다.

정리하면 기능 이미지는 모양이 아니라 동작을 서술하고, 텍스트 없는 아이콘 버튼에는 반드시 이름을 주며, 장식으로 곁들인 아이콘은 접근성에서 숨긴다. 나는 이 종류를 다룰 때 항상 누르면 무슨 일이 일어나는지를 떠올린다. 마지막으로, 한 문장으로 다 담기 어려운 복잡한 이미지를 어떻게 여는지 살펴보자.

5. 복잡한 이미지를 여는 법

자세한 그래프나 도표, 여러 정보가 얽힌 그림은 짧은 대체 텍스트 하나로 다 담기 어렵다. 이럴 때는 요점을 대체 텍스트에 담고, 자세한 내용은 본문이나 별도 설명으로 제공하는 이중 구조를 쓴다. 짧은 요약으로 전체를 알리고, 긴 설명으로 상세를 여는 것이다. 나는 복잡한 이미지일수록 이 이중 구조가 필요하다는 걸 배웠다.

그래프가 대표적이다. 그래프의 대체 텍스트에는 곡선의 모양을 묘사하기보다 그래프가 말하는 결론을 담는 것이 낫다. 매출이 꾸준히 늘었다는 결론이 곡선이 우상향한다는 묘사보다 훨씬 유용하다. 그리고 정확한 수치가 필요하면 그래프 아래에 표로 함께 제공한다. 나는 시각 정보를 글과 표로도 접근할 수 있게 여는 것을 원칙으로 삼는다.

이미지와 그 설명을 하나로 묶는 요소도 있다. 그림과 캡션을 함께 담는 figure와 그 안에서 설명을 담는 figcaption이다. 이 구조로 이미지와 설명을 의미적으로 연결하면, 낭독기 사용자에게 이 설명이 이 그림의 것임을 또렷이 전할 수 있다. 나는 자료 이미지를 넣을 때 이 묶음 구조를 즐겨 쓴다.

여기서 캡션과 대체 텍스트의 역할을 나누는 것이 요령이다. 캡션은 모두에게 보이는 설명이고, 대체 텍스트는 이미지를 못 볼 때 대신 읽히는 설명이다. 둘에 같은 내용을 넣으면 중복이 된다. 나는 캡션에는 모두에게 보여줄 출처나 부가 설명을, 대체 텍스트에는 이미지 자체의 의미를 담아 역할을 나눈다.

긴 설명을 이미지에 연결하는 별도 속성 aria-describedby도 있다. 이 속성으로 이미지에 자세한 설명이 담긴 요소를 연결하면, 낭독기가 짧은 대체 텍스트를 읽은 뒤 이어서 긴 설명을 읽어 준다. 요점과 상세를 나누어 전할 수 있는 것이다. 나는 복잡한 도표에 이 방식을 써서 상세 정보까지 소리로 접근하게 만들곤 한다.

정리하면 복잡한 이미지는 요점을 대체 텍스트에, 상세를 본문이나 표에 담고, 그림과 설명을 묶는 구조와 긴 설명을 연결하는 속성으로 여러 통로를 연다. 나는 이미지를 보는 사람, 못 보는 사람, 안 뜨는 사람 모두가 같은 정보에 닿게 하려 한다. 대체 텍스트를 잘 쓰는 습관 위에서, 다음 편에서는 마우스 없이 쓰는 키보드 내비게이션을 다룬다.