웹 접근성(인식의 용이성)

목차

서론

글자 태그에 대해 포스트 하려 했는데,

이 태그들을 왜 쓰는지 설명하려다 보니,

주제를 웹 접근성에 대해 잡는 게 더 낫다고 생각했다.

 

후.. 왜 계속 간단하게 쓸려다가 더 커지는 걸까.

 

웹 접근성이란

웹 접근성이란 웹 사이트 콘텐츠에 접근하려는 장애인 등이 비장애인 등과 동등하게 웹 콘텐츠에 접근하여 자유롭게 이용하도록 웹 사이트 설계자 및 운영자, 웹 콘텐츠 개발자들이 웹 사이트의 구축 · 운영

-2009년 3월 17일 국가표준 기술 가이드라인-

 

쉽게 말해서 신체제한에 불문하고 콘텐츠는 자유롭게 사용할 수 있게 만드는 것이 웹 접근성이다.

 

웹 접근성 향상을 위한 국가표준 기술 가이드라인 | 행정안전부> 정책자료> 참고자료> 참고자료

가이드라인 풀이

그러므로 이 포스트가 가이드라인을 보면서 얘기하는 것은 당연할 것 같다.

일단 다 위의 링크로 들어가 다운로드하였다고 생각하겠다.

 

인식의 용이성

글로 표현할 수 없는 콘텐츠를 제외, 모든 사용자가 콘텐츠를 인지할 수 있도록 제공

의미가 있는 이미지의 경우 alt(대체 텍스트)를 제공,

의미가 없는 이미지는 공백(alt="")으로 제공해야 한다.

 

이미지

<img src="" alt="">

이렇게 이미지 태그가 있을 때,

시각적으로 불편하거나,

데이터 환경이 좋지 않은 사용자를 위하여

이미지 콘텐츠를 보지 못하는 사람들에게

대체 텍스트를 표시하는 것이다.

 

적용방법은 간단하다.

<img src="./sky.jpg" alt="sky img">

출력하고자 하는 이미지를 설명할

텍스트를 alt 속성에 입력하면 된다.

 

시각적으로 불편한 사람은

이것을 음성으로 듣기에,

단어 사이에 _(under bar)를 기입하기보단,

띄어쓰기를 하는 것이 좋을 것 같다.

(sky underbar img라고 듣기엔 좀 불편하다.)

 

이미지 맵

한 이미지에 여러 가지 링크를 걸 때도(image map)

전체적인 이미지의 대체 언어를 넣고,

링크 영역마다 대체 언어를 기입하여야 한다.

<img alt="언어선택" src="languge.gif" usemap="#language">
<map name="language">
<area alt="English" shape="rect" coords="10,5,66,19" href="/en/">
<area alt="Korean" shape="rect" coords="10,17,66,32" href="/ko/">
</map>

버튼 이미지

디자인적으로 심미성을 추가하기 위해,

이미지로 버튼을 하는 경우도 많이 있다.

이런 경우에도 대체 텍스트를 추가하여야 한다.

 

잘못된 사례)

• 무의미한 대체 텍스트
• 의미 파악하기 어려운 텍스트 (ex."이미지")
• 이미지 업데이트 시 대체 텍스트 미수정
• 의미가 없는 이미지에 불필요한 대체 텍스트

다른 건 다 설명하지 않아도 되는 것인데,

의미가 없는 이미지에 불필요한 대체 텍스트란,

콘텐츠를 사용하는데 필요치 않은, 대체적으로 디자인용 이미지에

대체 텍스트를 적용하지 말자는 것이다. ( alt ="outline")등

 

동영상, 음성

자막, 원고 또는 수화를 제공하여야 한다.

요즘 추세에는 youtube에 영상을 올려

자막을 추가하는 추세이다.

 

색상

RGB를 GrayScale로 바꾸었을 때 정보를 인식할 수 있어야 한다.

채도를 빼고 흑백으로 봤을 때도 콘텐츠 이용에 무리가 없어야 한다는 뜻이다.

 

이를 착각하면 안 되는 게

 

이런 이미지가 접근성이 뛰어난 이미지이냐 라고 했을 때

아니다.

이렇게 GrayScale 즉 흑백으로 바꾸었을 때,

콘텐츠를 즐기기가 쉽지가 않다.

즉 접근성이 낮다는 얘기다.

 

이런 것을 고려하여야 한다.

 

이와 같은 것으로

회원가입 필수사항을 다른 색상으로 나타내는 것

 

이 또한, 접근성이 낮은 방법이다.

 

끝

생각보다 양이 많다...

나눠서 다뤄야 할 것 같다.

 

2편 (운용의 용이성) : sirong.tistory.com/42

3편 (이해의 용이성) : sirong.tistory.com/43

보너스 (웹접근성 체크 사이트) : sirong.tistory.com/44