Alt Text에 뭐 써야 하나요?

Alt 텍스트가 뭔가요?

부끄럽지만, 필자는 과거에 정보 취약계층의 사용자 경험을 전혀 고려하지 못했던 시기가 있었다. 누구나 동등하게 인터넷을 이용하고 정보에 접근할 수 있어야 한다는 웹 접근성의 개념조차 알지 못했던 때이다. 스크린 리더기가 시각장애인들의 서비스 이용을 어떻게 돕는지, 심지어 스크린 리더기가 어떤 형태인지조차 몰랐다.

대체 텍스트(alt text)는 웹사이트의 이미지에 추가되는 간단한 설명으로 시각 장애가 있는 사람들이 스크린 리더기를 통해 시각적 콘텐츠를 이해할 수 있도록 돕는 역할을 한다.

크랩에서 3년 전 업로드 한 하기 영상은 대체텍스트가 시각장애인들에게 얼마나 중요한 역할을 하는지 보여준다.

대체 텍스트 없이 이미지파일만 덕지덕지? 시각장애인은 하나도 읽을 수 없다｜크랩(링크) 참조

대체 텍스트 없이 이미지파일만 덕지덕지? 시각장애인은 하나도 읽을 수 없다｜크랩(링크) 참조

그래서 잘 작성된 대체 텍스트는 웹 접근성과 사용성을 보장하는 데 필수적이며 대체 텍스트를 잘 활용하기 위해서는 이미지의 맥락과 그 목적을 함께 고려하는 것이 매우 중요하다.

작년 말, 닐슨 노먼그룹에서 발행한 기사, Alt Text: What to Write 에서 대체텍스트를 잘 작성하는 방법에 대해 상세하게 소개한다.

좋은 대체텍스트 작성, 어떻게 작성해야 할까?

이미지가 작업 수행이나 페이지 내용을 이해하는 데 필수적일 때 대체 텍스트가 필요하다.
하기 권장 사항은 이미지 유형과 관계없이 모든 대체 텍스트에 적용되는 개념이다.

1.짧게 유지하자

• 대체 텍스트는 약 150자 정도를 넘지 않도록 작성해야 한다.

• 스크린 리더기는 대체 텍스트를 읽는 도중에 일시 정지하거나 중간에서 재개할 수 없기 때문에 사용자는 작업에 도움이 되지 않을 것 같은 대체 텍스트는 건너뛰는 경우가 많기 때문이다.

2.‘이미지’ 또는 ‘사진’이라는 단어를 포함하지 말자

• 화면 읽기 도구는 HTML 태그를 통해 이미지를 인식한다. 그래서 이미지, 사진이라는 단어는 포함하지 않아도 되나 설명이 필요한 특정 유형의 이미지, 예를 들어 인포그래픽, 차트, 일러스트 등은 해당 이미지에 대한 설명을 명시하는 것이 좋다.

3.대체 텍스트에 마침표로 꼭 찍자

• 마침표는 화면 읽기 도구가 대체 텍스트를 읽은 후 잠시 멈추게 한다. 만약 마침표가 없다면 듣는 입장에서 굉장히 혼란스러울 것이다.

4. 두괄식으로 쓰자

• 사용자가 대체 텍스트의 나머지 부분을 들을 가치가 있는지 빠르게 판단할 수 있도록 한다.

5. alt 속성(alt=””)을 항상 포함하자

• 빈 상태로 두더라도 alt 속성을 추가해야 한다. 그렇지 않으면 스크린 리더기가 이미지 파일 이름을 읽어버리는 상황이 발생한다. 위에 공유한 크랩 영상에서도 스크린 리더기가 파일이름을 읽어버려 시각장애인들이 제대로 정보를 취득하지 못하는 상황이 발생했다.

6.같은 이미지를 재사용할 때도 항상 대체 텍스트를 다시 분석하자

• 이미지가 놓인 맥락에 따라 적합한 대체 텍스트를 작성해야 한다.

7.정체성을 언급하는 것은 관련이 있을 때만 하자

• 이미지에 포함된 사람들의 인종, 민족, 성별, 종교, 또는 문화적 정체성이 이미지 포함 이유와 관련이 없다면 이를 언급하지 않는 것이 좋다.

대체 텍스트 결정 트리

대체 텍스트 결정트리를 활용하면 상황에 맞는 대체 텍스트를 사용하는데 도움이 된다.
닐슨 노먼 그룹에서 제시하는 대체 텍스트 결정트리는 다음과 같다.

1. 이미지가 수행하는 작업과 연관된 정보를 담고 있는가? ‘예’라면 그 이미지가 기능적 역할(버튼이나 링크 등)을 하고 있는지 확인하라 ‘아니오’ 라면 대체 텍스트를 따로 작성하지 않고 비워둔다.

2. 1번 질문에서 ‘예’를 선택했다면 이미지가 기능적인 내용을 설명하는가? 라는 질문에 답해야 한다. ’예’라면 대체 텍스트에 기능과 관련된 정보를 기재하면 된다. ‘아니요’라면 3번 질문으로 넘어가자

3. 2번 질문에서 ‘아니오’를 선택했다면 3번 질문을 보자. 이미지의 중요 메시지를 150자 내로 설명 가능한가? ‘예’라면 심플한 정보성 이미지이므로 이미지의 메시지를 대체 텍스트로 작성하자 ’아니오’라면 복잡한 정보성 이미지이므로 주변 페이지의 텍스트를 수정하거나 긴 디스크립션을 작성하자.

결론

닐슨 노먼 그룹에서 제시한 대체 텍스트를 적절하게 작성하는 법에 대해서 간략하게 알아보았다. 원문은 훨씬 내용이 방대하고 예시도 있으니 참고하면 좋다. 기사를 읽으며 든 한 가지 생각은, 시각장애인 사용자의 입장에서 생각하고 작성 하라는 것이다. 그들의 사용자 경험이 부정적이지 않도록 해야한다. 그래서 항상 대체 텍스트가 HTML 코드에서 제대로 작동하는지 사전에 테스트해야 한다.

접근성 문제를 브라우저에서 직접 테스트할 수 있는 온라인 도구도 많이 있다. 닐슨 노먼 그룹은 유타 주립대학 장애 연구, 정책 및 실천 연구소에서 제공하는 브라우저 익스텐션을 예로 들며 이러한 접근성 문제를 확인하는 데 유용하다고 말한다. 게시 전에 저시력자 또는 시각 장애인 사용자가 사이트를 테스트하고 발생한 문제를 공유하도록 하는 것이 가장 이상적이다.