Alt 속성을 사용하여 이미지에 대한 대체 텍스트 제공
이미지는 대부분의 웹페이지에서 중요한 구성요소로, 시력이 약한 사용자에게 특히 불편함이 있습니다. 페이지에서 이미지가 수행하는 역할을 고려하여 대체 텍스트 유형을 파악해야 합니다. 이 이미지를 보세요.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
연구에 따르면 고양이 10마리 중 9마리가 잠을 자면서 조용히 주인을 판단한다
이 페이지에는 고양이의 잘 알려진 판단 행동을 설명하는 고양이 사진이 있습니다. 스크린 리더는 이미지의 리터럴 이름인 "/160204193356-01-cat-500.jpg"를 사용하여 이미지를 음성으로 알려줍니다. 정확하지만 별로 유용하지 않습니다.
alt 속성을 사용하여 이 이미지에 대한 유용한 텍스트 대안을 제공할 수 있습니다(예: '매혹적인 듯 우주를 바라보는 고양이').
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
그러면 스크린 리더가 이미지에 관한 간결한 설명(검은색 VoiceOver 막대에 표시됨)을 읽어주고 사용자는 기사로 이어서 갈지 선택할 수 있습니다.
alt에 대한 몇 가지 의견:
alt를 사용하면 이미지를 로드할 수 없거나, 웹 크롤링 봇이 이미지에 액세스하거나, 스크린 리더에서 이미지를 발견했을 때와 같이 이미지를 사용할 수 없을 때 사용할 간단한 문자열을 지정할 수 있습니다.alt는 이미지를 사용할 수 없는 경우에만 사용된다는 점에서title또는 다른 유형의 자막과 다릅니다.
유용한 대체 텍스트를 작성하는 것은 약간의 기술입니다. 사용 가능한 텍스트 대안이 될 수 있는 문자열은 동일한 컨텍스트에서 이미지와 동일한 개념을 전달해야 합니다.
위에 표시된 것과 같은 페이지의 마스트헤드에 링크된 로고 이미지를 생각해 보세요. 이미지를 'Funion 로고'라고 할 수 있을 만큼 정확하게 설명할 수 있습니다.
<img class="logo" src="logo.jpg" alt="The Funion logo">
'홈'이나 '기본 페이지'와 같이 더 간단한 대체 텍스트로 제공하고 싶은 유혹이 들 수 있지만, 이는 시력이 낮은 사용자와 시력이 정상인 사용자 모두에게 불리하게 작용합니다.
하지만 페이지에서 마스트헤드 로고를 찾고자 하는 스크린 리더 사용자가 있다고 가정해 보겠습니다. 이때 대체 값을 '홈'으로 설정하면 오히려 더 혼란스러울 수 있습니다. 시력이 정상인 사용자도 스크린 리더 사용자와 마찬가지로 사이트 로고를 클릭할 때 어떤 문제가 발생하는지 파악해야 합니다.
반면에 이미지를 설명하는 것이 항상 유용한 것은 아닙니다. 예를 들어 'Search'라는 텍스트가 있는 검색 버튼 내부에 있는 돋보기 이미지를 생각해 보세요. 텍스트가 없으면 이미지에 'search'라는 Alt 값을 사용할 것입니다. 하지만 표시되는 텍스트가 있으므로 스크린 리더가 'search'라는 단어를 선택하여 소리 내 읽습니다. 따라서 이미지의 동일한 alt 값이 중복됩니다.
그러나 alt 텍스트를 생략하면 이미지 파일 이름을 대신 듣게 되어 쓸모없고 혼란스러울 수 있습니다. 이 경우 빈 alt 속성을 사용하면 됩니다. 그러면 스크린 리더가 이미지를 완전히 건너뜁니다.
<img src="magnifying-glass.jpg" alt="">
요약하면 모든 이미지에 alt 속성이 있어야 하지만 모든 이미지에 텍스트가 있어야 하는 것은 아닙니다. 중요한 이미지에는 이미지를 간결하게 설명하는 설명 대체 텍스트가 있어야 하며 장식용 이미지에는 대체 속성(alt="")이 비어 있어야 합니다.