[웹 접근성] 웹 접근성 지침(1) 이미지에 대한 적절한 대체 텍스트

✅  1. 이미지에 대한 적절한 대체 텍스트 제공 

- 시각적 정보 습득에 어려움이 있는 사용자는 스크린리더와 같은 보조 기술을 통해 콘텐츠를 이용한다

- 스크린리더가 페이지를 음성으로 설명하기 위해서 어떤 이미지인지를 말해주는 대체 텍스트가 필요하다

 

(1)  alt로 대체 텍스트를 제공 

<img src="banner.png" alt="힘내라_대한민국_재난지원금_신청사이트_바로가기_CLICK_재난지원금_신청이_가능합니다">

- 이미지 요소를 마크업 할 때, 이미지를 텍스트로 설명하는 alternative 속성인 alt를 사용한다

- 이미지에 텍스트가 있는 경우에는 해당 텍스트를 'alt' 에 입력해준다

- 스크린 리더는 alt 의 값을 읽어 사용자에게 이미지를 설명하기 때문에 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공한다

- alt를 사용하지 않으면, 스크린 리더는 src에 있는 파일명을 읽어준다

- alt의 값에 공백이 있는 경우도 src의 파일명을 읽어준다

 

 

(2)  마크업으로 대체 텍스트 제공 

<img src="재난지원금.png" alt="">
<p class="blind">
  힘내라 대한민국 재난지원금 신청사이트 바로가기 CLICK 재난지원금 신청이 가능합니다
</p>

- 대체 텍스트가 긴 경우에는 'alt'를 공란으로 두고, 대체 텍스트를 마크업으로 제공한다

- 만약 이미지 내부의 콘텐츠가 리스트로 되어 있어 ul과 li를 사용해 마크업 하면, 스크린 리더는 목록으로 이해하고 읽어준다

- 스크린리더는 마크업 요소에 따라서 내용을 읽어준다

- 만약 구조적인 마크업이 가능한 경우에는 대체 텍스트를 마크업으로 제공한다

- 마크업으로 대체 텍스트를 제공할 때에는 해당 요소가 보이지않도록 처리해야 한다

- 만약 display:none이나 visibility:hidden을 사용하면 스크린리더는 읽지 않으므로 주의하자 

- alt를 공란으로 두는 경우에도 반드시 alt를 작성한다 

 

 

(3) 데이터 차트나 복잡한 콘텐츠

<img src="재난지원금_신청.png" alt="">
<table class="blind">
  <caption>태어난 년도별 신청 가능한 요일</caption>
  <thead>
    <tr>
      <th>월</th>
      <th>화</th>
      <th>수</th>
      <th>목</th>
      <th>금</th>
      <th>토·일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1·6</td>
      <td>2·7</td>
      <td>3·8</td>
      <td>4·9</td>
      <td>5·0</td>
      <td>모두</td>
    </tr>
  </tbody>
</table>

- 데이터 차트이나 복잡한 콘텐츠에도 사용자가 콘텐츠의 의미를 파악할 수 있도록 대체 텍스트 제공이 필요하다

- 테이블 마크업을 통해 대체 텍스트를 제공한다 

 

 

(4) 의미 있는 이미지 / 의미 없는 이미지 / 배경 이미지 / 이모티콘 이미지  / QR코드 이미지 

<!--의미 있는 이미지-->
<img src="next_btn.png" alt="다음_콘텐츠_이동_버튼">

<!--의미 없는 이미지-->
<img src="test.png" alt="">

<!--배경 이미지-->
<a href="#" style="background-image:url('./img/next_icon.png');">다음</a>

<!--이모티콘 이미지-->
<img src="emoticon_bear_happy.png" alt="행복한_곰돌이_이모티콘">

<!--QR코드 이미지-->
<img src="QRcode.png" alt="https://dev-ku.tistory.com_바로가기_QR코드">

- 의미가 있는 이미지 : 대체 텍스트를 시각적으로 보는 것과 동등하게 제공한다  

- 의미가 없는 이미지 : 단순한 장식이나 시각적 형태를 위해 사용되는 경우 alt를 공란으로 제공한다  

- 배경 이미지 : 의미 있는 이미지가 이미지 요소가 아닌 배경으로 처리된 경우에도 대체 텍스트를 제공한다  

- 이모티콘 이미지 : 이모티콘마다 의미하는 바가 다르므로, 시각적인 의미와 동일하게 대체 택스트를 제공한다

- QR코드 이미지 : QR코드가 가지는 링크 주소를 알 수 있도록 대체 텍스트를 제공한다

 

 

(5) 썸네일 이미지 

<a href="https://dev-ku.tistory.com/category/FrontEnd/웹%20접근성%2C%20웹%20표준">
  <img src="blog_thumb_fe.png" alt="">
  <span>프론트엔드 웹 접근성/웹 표준</span>
</a>

- 썸네일 이미지와 텍스트를 각각 링크로 구현하게 되면, 이미지의 대체 텍스트와 링크 텍스트가 중복이 된다

- 이런 경우에는 스크린리더에서 동일한 내용을 2번 읽어주게 된다

- 이미지와 텍스트를 하나의 링크로 묶어주고, 대체 텍스트가 존재하므로 이미지의 alt는 공란으로 제공한다 

 

 

(6) 캡차 이미지 

<img src="chaphr.png" alt="보안문자">

- 캡차 : 사용자가 실제 사람인지, 컴퓨터 프로그램인지를 구별하기 위한 방법

- 캡차 이미지에 대체 텍스트를 사용하면 스크린리더 사용자에게 정답을 알려주게 된다

- 캡차 이미지에는 대체 텍스트로 '캡차' 또는 '보안 문자'라고 작성하고, 음성으로 확인할 수 있는 청각적 캡차를 제공한다 

 

 

(7) 사용자가 업로드하는 이미지 

- 사용자가 업로드한 이미지의 경우 개발자가 대체 텍스트를 제공할 수 없다 

- 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 툴을 제공하도록 한다

- 사용자가 입력한 내용이 대체 텍스트로 제공되도록 구현한다