[웹접근성] 대체텍스트 (인식의 용이성 Perceivable)

 

웹접근성 - 대체텍스트

 

🔎 대체텍스트 : 시각장애인 등에게 웹상의 정보를 전달하기 위한 과정으로, 작성자가 대체 텍스트를 삽입시키면 스크린 리더기를 통해 청각적으로 정보를 전달 할 수 있게 해준다. 

• 대체 텍스트를 삽입하면 사용자는 음성지원 서비스를 통해 음성으로 정보를 전달 받을 수 있다. 
• 텍스트가 아닌 콘텐츠에는 의미나 용도를 이해할 수 있도록 대체 텍스트를 삽입해야한다. 

 

 

1. 적절한 대체 텍스트 제공

📌 alt 속성 (alternative) : <img>, <input type="image">, <area> 등에서 사용

<img src="image.jpg" alt="이미지에 대한 설명">

 

• 이미지 태그의 대체 텍스트가 너무 긴 경우에는 alt 값을 빈 값으로 제공하고, 마크업으로 대체 텍스트를 제공하기도 한다.

 

📌 의미 있는 이미지

• 대체 텍스트를 시각적으로 보는것 처럼 동일하게 제공해야한다.

 

📌 의미 없는 이미지

• 이미지태그에 alt속성을 아예 제공하지 않으면 스크린리더기는 src에 있는 파일명을 낭독한다.
• alt값을 제공하면서 띄어쓰기만 있는 경우도 파일명을 낭독하다.
• 단순히 장식등 꾸밈 요소로 이미지가 삽입 된 경우에는 파일명을 읽지 않게 빈 alt값을 제공해야한다.

 

📌 이모티콘 이미지

• 이모티콘마다 다양한 의미를 담고 있기 때문에 시각적으로 보이는 모습 그대로를 텍스트로 표현하는 것이 좋다. ex) 커다란 하트를 들고 있는 호랑이

 

📌 QR코드 이미지 

• 비장애인들은 QR을 이미지로 찍어서 링크를 연결 할 수 있지만, 시각적으로 알 수 없는 사용자를 위해서는링크 주소를 알 수 있도록 대체 텍스트를 제공해야한다.

<a href="http://www.naver.com">
  <img src="qr-code.png" alt="http://www.naver.com 바로가기 QR코드">
</a>

 

 

📌 캡차 이미지

• 캡차란 ? 사용자가 실제 사람인지 컴퓨터 프로그램인지 구별하기 위해 사용되는 방법
• 캡차 이미지에 대체 텍스트를 사용하면 스크린 리더기를 사용하는 사람들에게는 답을 알려주는 꼴이 되어버리므로, 캡차 이미지에 대한 대체 텍스트는 '캡차' 또는 '보안 문자' 라고 제공하고 따로 음성으로 인식할 수 있도록 청각적 캡차를 함께 제공해야한다.

<img src="image.jpg" alt="캡차">

 

 

📌 사용자가 업로드하는 이미지

• 사용자가 직접 대체텍스트를 입력 할 수 있도록 툴을 함께 제공한다. (ex. 네이버 블로그 등)

 

 

---

 

 

 

2. IR 기법 마크업으로 대체 텍스트를 제공

🔎 이미지의 대체 텍스트를 제공하기 위한 CSS 기법.

• 예) IR Phark Method, WA IR, SCreen out 등

 

📌 IR Phark Method  의미있는 이미지에 대체텍스트 제공

• background css로 설정된 요소, 하위 요소에 텍스트 제공 ( ex. 로그인 버튼에 텍스트가 아닌 아이콘일 경우)

.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}

 

 

 

📌 WA IR

• 의미있는 이미지에 대체 텍스트 제공
• 이미지가 없는 상태일 때, 대체 텍스트가 필요할 때 사용

.ir_wa{display:block;overflow:hidden;position:relative;z-index:-1;width:100%;height:100%;}

 

 

📌 Screen Out

• 이미지를 위한 대체 텍스트가 아닌, 접근성을 위한 숨김 텍스트를 제공

.hide {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip: rect(1px,1px, 1px, 1px);
  clip-path: inset(50%);
 }

 

 

---

 

🔎 주의 

• display:none 또는 visibility: hidden을 사용하면 화면낭동기가 정보를 인식하지 못한다.
• 영역을 자를 때, css에서는 clip속성보다는 overflow 속성을 쓰는 것이 최신화된 버전
• (단, 웹접근성 대체텍스트를 숨김 처리 할때 유의미하게 사용됨) 

 

 

 

웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.

(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)