1. 개요
Alternative text이미지, 동영상 등 멀티미디어 콘텐츠나 자료를 설명 또는 기술(describe)하는 텍스트 형태의 대응 정보를 말한다.
2. 목적
- 접근성 향상: 시각이나 인지에 어려움이 있는 사용자가 스크린 리더를 통해 내용을 들을 수 있도록 한다.
- 로딩 실패 대비: 네트워크 문제로 이미지 로딩에 실패했을 때 대체 텍스트가 대신 표시된다. 웹 페이지를 오프라인으로 저장할 경우, 용량이 큰 이미지 대신 가벼운 대체 텍스트가 활용된다.
- 검색 엔진 최적화: 검색 엔진이 이미지의 의미를 파악하여 해당 웹페이지가 검색 결과에 더 잘 노출되도록 한다. 많은 SEO 도구는 대체 텍스트가 지정되지 않은 이미지를 경고하며, 이로 인해 검색 순위가 하락할 수 있다.
OCR이 아무리 발전해도, 텍스트보다 이미지 처리에 더 많은 연산이 필요하며 인공지능 환각 문제도 완전히 해결되지 않았으므로 대체 텍스트의 중요성은 여전히 유효하다. 반대로, 텍스트 기반 인공지능은 대체 텍스트를 적극적으로 활용한다.
3. 방법
대체 텍스트는 크게 두 가지 방법으로 추가할 수 있다.<img>태그에는alt속성을 지정한다.- 이미지 주변에 설명 텍스트를 배치한다.
나무위키에서는 기본적으로 파일의 이름이
alt 속성으로 자동 설정된다. 설명이 긴 경우에는 방법 2로 추가해줄 수 있다.대체 텍스트의 내용은 그 이미지가 수행하는 역할을 고려하여 정하면 된다. 간단한 방법은 지금 화면을 보지 못하는 사람에게 그 이미지를 설명하듯이 내용을 작성하는 것이다. 그러므로 같은 이미지라도 페이지에서 역할이 달라진다면 대체 텍스트의 소재와 길이가 크게 달라질 수 있다. 이미지가 단순히 장식 목적이라면 대체 텍스트를 빈 문자열로 설정하는 것이 적절하다.[1]
4. 관련 사이트
- W3C - alt 의사결정나무: 질문을 따라가면 대체 텍스트를 어떻게 추가할지 결정해준다.
[1] 더 좋은 방법은 장식 목적 이미지를 CSS로 분리하는 것이지만, 그렇게 분리할 수 없는 이미지가 있는 것이 현실이다.