사이트 접근성 (대체 텍스트 올바르게 제공하기- 1편)

오류유형1. 이미지 요소의 alt 속성 제공 #

웹사이트에 이미지를 표현하고 싶을 때 여러 가지 방법을 이용할 수 있습니다. 그 중 가장 기본적이며, 흔하게 사용되는 방법이 img, input type=”image”와 같은 HTML 이미지 요소(element)의 사용일 것입니다.
alt 속성(attribute)은 이러한 이미지 요소를 대체할 수 있는 텍스트(alternative text), 즉, 설명을 제공하는 역할을 합니다. 스크린 리더는 alt 속성값으로 제공된 텍스트를 해석해서 음성으로 출력해 줍니다. 이번 편에서는 이미지 콘텐츠의 대체 텍스트를 제공하는 방법 중 하나인 alt 속성과 관련된 웹 접근성 오류에 대해 알아보겠습니다.

alt 속성을 선언하지 않은 경우 #

만약 alt 속성 자체를 생략해 버린다면 어떻게 될까요? alt 속성을 생략하는 것은 이미지가 중요한 콘텐츠이지만 이를 설명하는 텍스트를 사용할 수 없는 상태를 의미합니다. 어찌 되었든 의미가 있는 콘텐츠이기 때문에 대부분의 스크린 리더는 이미지 요소에 대한 해석을 건너뛰지 않습니다. 하지만 이미지 요소에서 사용할 수 있는 텍스트 설명이 없으므로, 대신 경로 정보(src)를 음성으로 출력하게 됩니다.

Do Not

img src=”/wp-content/uploads/2020/01/BIGDEOlogo_200.png”

스크린 리더 음성
“빅디오로고 이백 피앤지 이미지”

Do

img src=”/wp-content/uploads/2020/01/BIGDEOlogo_200.png” “alt=”빅디오로고””

스크린 리더 음성
“빅디오로고 이미지”

일반적으로 우리는 웹사이트가 제공하는 정보를 이해하기 위해 콘텐츠를 볼 때, 이미지 요소의 경로 정보를 필요로 하지는 않습니다. 오히려 경로 텍스트가 화면 그대로 노출되어 있다면 알고싶은 중요한 콘텐츠에 집중하기 어렵기 때문입니다. 이는 스크린 리더 사용자에게도 마찬가지 입니다. 중간 중간에 의미 없는 긴 알파벳을 반복적으로 듣게 된다면 이미지 콘텐츠의 의미를 이해할 수 없을 뿐더러 콘텐츠 탐색에 방해를 받게 됩니다. 그러므로 웹 페이지에 이미지 요소를 제공 할 때, alt 속성을 선언하는 것을 잊지 말아야 합니다.

alt 속성을 선언하였으나 대체 텍스트를 입력하지 않은 경우 #

alt 속성을 선언하였더라도 텍스트 설명이 없다면 사용자들은 결국 이미지의 의미를 이해할 수 없습니다. 텍스트 설명을 생략하는 것은 이미지라는 콘텐츠가 가지고 있는 정보를 알 수 없는 것과는 다른 문제를 만들어 냅니다. 위의 예시에서 alt 속성을 선언하고 빈값(“”)을 제공하는 것은 이미지가 핵심적인 요소가 아님을 의미하기 때문에 스크린 리더는이미지 요소를 해석하지 않습니다. 결국 스크린 리더 사용자들은 내용 중에 이미지 콘텐츠가 있다는 것조차 알 수 없게 됩니다.

alt 속성을 선언하지 않은 경우 #

만약 alt 속성 자체를 생략해 버린다면 어떻게 될까요? alt 속성을 생략하는 것은 이미지가 중요한 콘텐츠이지만 이를 설명하는 텍스트를 사용할 수 없는 상태를 의미합니다. 어찌 되었든 의미가 있는 콘텐츠이기 때문에 대부분의 스크린 리더는 이미지 요소에 대한 해석을 건너뛰지 않습니다. 하지만 이미지 요소에서 사용할 수 있는 텍스트 설명이 없으므로, 대신 경로 정보(src)를 음성으로 출력하게 됩니다.

Do Not

img src=”/wp-content/uploads/2020/11/alt-text.png” alt=””

Do

img src=”/wp-content/uploads/2020/11/alt-text.png” “alt=”날짜를 체크하여 여행갈 곳을 선정한 후, 여행을 간다.””

alt속을 선언하고 텍스트 값을 제공함으로써, 이제 우리는 이미지 콘텐츠의 의미를 사용자들에게 전달할 수 있게 되었습니다. 하지만 사용자가 대체 텍스트를 통해 정보의 도움이 필요 없는 일반적인 사용자들이 이해할 수 있는 것과 동등한 수준의 정보를 제공받기 위해서는 좀 더 노력이 필요합니다. 대체 텍스트를 통해 유용한 정보가 전달될 수 있도록 다음 사례들을 통해 대체 텍스트의 내용을 적절하게 제공하는 방법에 대해 알아보도록 하겠습니다.

대체 텍스트 내용을 불충분하게 제공한 경우 #

대체 텍스트는 글자 그대로 이미지 요소를 대체할 수 있는 텍스트여야 합니다. 일반 사용자가 시각적으로 이미지 콘텐츠를 봤을 때 할 수 있는 내용과 동등한 수준의 구체적인 설명이 제공되지 않는다면 대체 텍스트가 있어도 스크린 리더 사용자들은 여전히 콘텐츠에 접근하는 데 제약이 있습니다.

Example. 이미지로 저장한 텍스트

이미지 출처 : https://brunch.co.kr/@snclab/2

Do Not

img src=”/wp-content/uploads/2020/11/alt-text.png” alt=”오늘 하루, 모든 ebook 25% 할인””

Do

img src=”/wp-content/uploads/2020/11/alt-text.png” “alt=”오늘 하루, 모든 ebook 25% 할인. 문학전집 시리즈 및 신간 도서는 할인에서 제외됩니다.””

Do Not코드의 alt속성값에서는 할인 제외 품목에 대한 정보가 빠져 있습니다. 물론 위 예시 이미지에서는 전달하려는 정보의 핵심은 도서 할인에 관한 것이지만, 할인에서 제외되는 품목이 있다는 것을 아는 사용자와 그렇지 않은 사용자는 같은 웹사이트라도 매우 다른 방식으로 책을 탐색하게 될 것입니다.

대체 텍스트의 오타로 인해 정보전달에 문제가 생긴 경우 #

대체 텍스트는 오타 없이 정확한 내용으로 제공해야 합니다. 문장과 단어 군데 군데 포함된 오타는 스크린 리더 음성에 의존하여 청각적으로 정보를 처리하는 사용자들의 이해를 방해합니다. 더군다나 오타가 발생한 부분이 콘텐츠에서 핵심이 되는 내용이라면 스크린 리더 사용자는 정보를 완전히 다르게 이해할 수 밖에 없습니다.

Example. 이미지 텍스트를 통해 중요한 정보를 전달하는 이미지

이미지 출처 : https://brunch.co.kr/@snclab/2

Do Not

img src=”/wp-content/uploads/2020/11/alt-text.png” alt=”봄맞이 걷기 행사 참여자 모집, 모집기간 2019년 4월 2일부터 4월 21일. 행사 내용 올바른 걷기자세 안내, 함께 걷기. 접수방법 홈페이지를 통한 온라인 접수 (썬착순). 신청하러가기””

Do

img src=”/wp-content/uploads/2020/11/alt-text.png” “alt=”봄맞이 걷기 행사 참여자 모집, 모집기간 2019년 4월 1일부터 4월 22일. 행사 내용 올바른 걷기자세 안내, 함께 걷기. 접수방법 홈페이지를 통한 온라인 접수 (썬착순). 신청하러가기””

Do Not 코드를 유심히 살펴보면, 참여자 모집 시작일이 2일로 잘못 표기된 것을 알 수 있습니다. ‘고작 오타 하나일 뿐인데.’ 하고 생각할지도 모르겠지만, 단순해 보이는 이 오타 하나로 인해 스크린 리더 사용자들은 하루의 신청 기회를 놓치게 되고 결국 행사에 참여 하지 못하게 될 지도 모릅니다. 그러므로 이미지의 대체 텍스트를 제공할 때 오타가 발생하지 않도록 주의하고, 특히 위 사례와 같이 대체 텍스트에 중요한 정보가 포함되는 경우에는 작업을 완료하기 전에 한번 더 점검하는 것이 좋습니다.

접근성 텍스트 작성 참고 #

– 미디어 업로드 시 대체 텍스트 필수 입력 / 장식용 이미지의 경우 빈 공란 처리
– a 링크의 경우 # 형태인 빈 링크로 두면 안됨.