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" a>lt="The Funion logo"
'홈' 또는 '기본 페이지'와 같은 더 간단한 텍스트 대안을 제공하고 싶을 수 있지만, 이는 저시력 사용자와 정상 시력 사용자 모두에게 도움이 되지 않습니다.
하지만 페이지에서 마스트헤드 로고를 찾으려는 스크린 리더 사용자를 생각해 보세요. alt 값을 'home'으로 지정하면 더 혼란스러운 환경이 조성됩니다. 또한 스크린 리더 사용자와 마찬가지로 시각 장애가 없는 사용자도 사이트 로고를 클릭하면 어떤 일이 일어나는지 파악하는 데 어려움을 겪습니다.
반면에 이미지를 설명하는 것이 항상 유용한 것은 아닙니다. 예를 들어 '검색' 텍스트가 있는 검색 버튼 내부의 돋보기 이미지를 생각해 보세요. 텍스트가 없는 경우 해당 이미지의 대체 텍스트 값을 'search'로 지정해야 합니다. 하지만 텍스트가 표시되어 있으므로 화면 리더가 '검색'이라는 단어를 선택하여 소리 내어 읽습니다. 따라서 이미지에 동일한 alt 값이 중복됩니다.
하지만 alt 텍스트를 생략하면 이미지 파일 이름이 대신 들릴 수 있으며 이는 무용하고 혼동을 줄 수 있습니다. 이 경우 빈 alt 속성을 사용하면 스크린 리더가 이미지를 완전히 건너뜁니다.
<img src="magnifying-glass.jpg&qu>ot; alt=""
요약하자면 모든 이미지에는 alt 속성이 있어야 하지만 텍스트가 모두 있는 것은 아닙니다. 중요한 이미지에는 이미지의 내용을 간결하게 설명하는 설명 대체 텍스트가 있어야 하며 장식용 이미지에는 빈 대체 속성(alt="")이 있어야 합니다.