KWCAG>인식의용이성>대체텍스트>적절한 대체텍스트(한국형 웹 콘텐츠 접근성 지침2.1 중 1.1.1적절한 대체텍스트)

안녕하세요~~

제가 누구라구요????

티까쮸~~~~~~♥

오늘도 여러분이 너무 보고 싶어서ㅜㅜ

못 참고 이렇게 찾아왔습니다~~

너~~~ 무 좋쮸???

 

오늘은 제가 하나하나 설명드리기로 했던

KWCAG2.1 그 첫 번째 시간!!!!!!!

1. 인식의 용이성>1.1 대체 텍스트>1.1.1 적절한 대체 텍스트!!!!

에 대해서 설명드리려구요~~

신나쮸???

그럼 시작하겠습니다.

참고로 앞으로 계속 방문할 사이트는 제가 만든 사이트예요 찾아도 나오지 않는........

카츄네 홈페이지

이미지설명: 카츄네 홈페이지

너무 줄여서 하나도 안 보이죠??

하지만 설명 드릴 때는 조금씩 잘라서 할 테니 보이실 거예요

자!! 그럼 진짜로 시작해 보겠습니다.

 

#적절한 대체 텍스트

엥?? 대체 텍스트가 뭐예요??

여기서 말하는 대체 텍스트는 이미지 설명 정보예요

비장애인 분들은 이미지를 보면 아 이거구나 하시지만

이미지를 보지 못 하는 시각장애인 분들은 스크린리더가 알려주는 정보를 듣고

이미지를 인식하게 됩니다.

그렇다면 적절한 대체 텍스트는 무슨 말인가요??

예를 들어 설명드리자면

턱받이한 요크셔테리어 강아지

이미지설명: 턱받이한 요크셔테리어 강아지

이렇게 이쁜 강아지 사진이 있어요 

비장애인 분들은 이 사진을 딱 보면 아 강아지 사진이구나 하지만

시각장애인 분들은 스크린리더가 '강아지 이미지'라고 출력해야

강아지 이미지라고 인식합니다.

그런데 웹 사이트를 만드는 사람이 대체 텍스트를 넣지 않으면 

파일명을 읽습니다.

저는 강아지 사진 파일명을 설. jpg라고 했는데

대체 텍스트를 넣어주지 않으면 스크린리더는 정말

'설. jpg'라고 읽습니다.

자 코딩을 해보신 분들은 코드로 설명드리면 금방 알 수 있는데요

HTML 문서 파일에서

<img src="설. jpg">

이렇게만 적으시면 '설. jpg'가 됩니다.

그렇다면 적절한 대체 텍스트가 되려면 어떻게 해야 하나요??

제가 만든 사이트를 가지고 와서 설명을 드리겠습니다.

Kachu~빨간하트 로고

이미지설명: Kachu~빨간하트 로고

이 로고는 스크린리더가 

'까츄네로고 헤딩 1 방문한 링크'

라고 읽습니다.

여기서 제가 쓴 코드는

<h1><a href="#"><img src="logo.png" alt="까츄네로고"></a></h1>

이렇게 적었습니다. 

앞에 헤딩 태그와 링크 태그를 제외하고 img태그만 봤을 때

눈에 띄는 것이 있나요??

맞아요 바로 alt="까츄네로고"부분입니다.

대체 텍스트를 넣기 위해서는 바로 alt속성이 필요합니다.

(<h1></h1>은 헤딩태그, <a></a>는 링크테그, <img>는 이미지 삽입 테그 그 안에 href=""는 링크 연결 속성, src=""는 파일 연결 속성, alt=""대체 텍스트 삽입 속성)

 

자 그렇다면 적절한 대체 텍스트를 어떻게 정할까요??

가끔 접근성 문제로 시각장애인 분들께 이렇게 물어보시는 분들이 있습니다.

"제가 설명하는 이미지가 제대로 그려지는지 들어보세요 빨간 바탕에 멈춰있는 사람 무슨 이미지라고 생각이 드나요??"

여러분들은 무슨 이미지인 것 같아요??

신호등에 빨간불을 표현한 것입니다.

사실 그렇게 설명하면 오히려 더 못 알아듣습니다.

그냥 신호등에 빨간불이라고 하면 해결될 문제입니다.

적절한 대체 텍스트는 다른 거 필요 없이 

비장애인 분들이 이미지를 보고 얻는 정보들을

시각장애인들도 똑같이 얻을 수 있게 해 주시면 돼요

만약 쇼핑사이트에서 까쮸네 헷 고구마50개 1박스 50% 반값!!! 할인 선착순 50명을

이미지로 제공 했다면

대체 텍스트로 이미지에 적혀있는 글들을 그대로 전달해주시면 되고

모니터 이미지인데 그 이미지를 보고 어디 모니터 인지 알 수 있다 하면

그대로 설명해주시면 됩니다.

 

대체 텍스트를 주는 것에 대해서 어려워하시는 분들이 많은데

쉽게 생각해서 비장애인 분들이 이미지를 보고 

얻을 수 있는 정보 그대로 적어주시면 됩니다.

 

검색버튼

이미지설명: 검색버튼

만약 위와 같이 검색 링크를 이미지로 잘라서 넣었다면

그 링크의 역할 위 이미지에서는 검색이 되겠죠??

<img src="btn.png" alt="검색">

이렇게 넣어주시면 돼요~

 

#이미지 미인지

음~ 여기서 설명드리는 것이 좋을 것 같아서요

화면상에는 이미지가 있지만 

간혹 스크린리더가 이미지를 인지하지 못하고 넘어가는 경우가 있습니다.

중요한 이미지라면 당연히 문제가 되고

정말 필요 없는 그냥 디자인을 위해 넣은 이미지라면

인지되지 않는 것이 좋겠죠??

그렇다면 img태그를 썼는데 이미지가 인지되지 않는 것 

그 이유는 뭘까요??

어렵지 않습니다. 그 이유는

<img src="설.jpg" alt="">

이렇게 alt속성 값을 빈 값으로 줬기 때문입니다.

 

이렇게 alt값을 적을 때는 항상 신중해야 합니다.

어때요?? 어렵지 않죠??

그래도 오늘 설명한다고 했는데 혹시 궁금하신 점 있으시면 댓글로 물어봐 주세요.

보는 대로 바로 답장드리겠습니다.

오늘 벌써 끝내는 인사 할 시간이네요~

보고 싶어도 꾹 참고 기다려서 더 좋은 정보 가져올게요

 

#한 줄 요약

적절한 대체 텍스트는 비장애인 분들이 이미지를 보고 얻을 수 있는 정보를 그대로 적어 주는 것이다.

alt=""속성은 속성 값을 이미지의 대체 텍스트로 출력하는 속성이다.

alt=""이런 식으로 빈 값을 주면 스크린리더는 이미지를 인지하지 못한다.