이전에 웹표준에 대해서 포스팅하였습니다.
이번엔 웹접근성(web accessibility)에 대한 정의를 한번 알아보겠습니다.
제법 규모가 있는 사이트들은 일년에 몇회 이상 웹 접근성 컨설팅 업체를 통해서 검사를 받습니다.
W3C의 정의에 의하면 웹 표준성은 접근성, 사생활 보호, 보안, 국제화의 측면을 고려해야 합니다.
이 중에 접근성을 흔히 '웹접근성'이라고 하고 웹 표준성과 함께 많이 언급되는 개념입니다.
웹접근성은 장애 여부에 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미합니다.
예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 그렇지 않은 사람과 같은 방식으로는 웹페이지를 이용할 수 없습니다.
그래서 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치해서 인터넷을 이용합니다.
스크린 리더는 모니터에 비춰지는 내용을 인식해서 음성, 점자로 출력해주는 역할을 합니다.
화면에 '메뉴'라는 텍스트가 있으면 이를 인식해서 '메뉴'라는 음성이 나오는 방식이라고 합니다.
시각장애인은 이를 이용해 눈으로 보는 대신 소리로 들으면서 웹페이지에 담긴 정보를 이해할 수 있습니다.
하지만 스크린 리더는 소프트웨어에 불과하므로 스스로 웹페이지의 내용을 분석해서 이건 무슨 내용이고 저건 무슨 내용이다라는 걸 이해할 수 없습니다.
특히 이미지의 경우가 그렇습니다. '메뉴'라고 텍스트로 집어 넣지 않고 메뉴라고 그려진 이미지를 사용하면 비 시각 장애인의 눈에는 똑같이 메뉴라고 보이지만 소프트웨어 입장에서는 그저 이미지일 뿐입니다.
그 이미지 안에 그려진 내용을 인식하는 것은 불가능합니다.
그래서 되도록 이면 이미지를 사용하지 말고 소스 코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이 이미지가 어떤 내용인지 설명을 추가해야 합니다.
<button>메뉴</button>
<img src="images/button.jpg" alt="메뉴 버튼" />
위와 같이 메뉴 버튼을 두 가지 방식으로 구현할 수 있습니다.
윗줄은 <button> 태그를 이용해서 구현하는 방식이고 아래 줄은 버튼 모양의 이미지를 쓰는 방식입니다.
둘 중 어느 방식을 쓰던 버튼의 기능은 그대로 구현할 수 있습니다. 하지만 되도록이면 윗줄의 방식을 쓰는것이 권장됩니다.
이미 <button> 태그를 쓰고 있기 때문에 스크린 리더가 메뉴라는 텍스트가 담긴 '버튼'이라는 것을 사용자에게 올바르게 전달할 수 있기 때문입니다.
하지만 부득이하게 이미지를 쓴다면 특히 버튼 특유의 회색 그라데이션을 견딜 수 없다면 alt라는 속성을 추가한 뒤 이 이미지가 무슨 이미지인지 설명하는 텍스트를 추가해주어야 합니다.
이렇게 할 경우 비 시각 장애인의 눈에는 alt 속성에 쓰여진 '메뉴 버튼'이라는 텍스트는 볼 수 없습니다.
하지만 스크린 리더는 이를 '메뉴 버튼'이라는 이미지로 인식해 사용자에게 정보를 전달하게 됩니다.
이처럼 장애가 있는 경우에도 웹페이지를 원활하게 이용할 수 있도록 지켜야 하는 사항을 웹접근성이라고 합니다.
위키피디아에 등제된 웹접근성에서 고려해야 할 사항입니다.
시각: 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
운동성: 파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태
청각: 청각 장애
발작: 깜박이는 효과나 시각적인 스트로보스코프를 통해 일어나는 뇌전증성 발작
인지: 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애 (난독증, 난산증 등)
자세한 웹접근성 지침에 관한 정보들이 있습니다.
네이버에서 '널리'라는 프로젝트의 일환으로 네이버 사옥 그린팩토리 2층에 '웹접근성 체험 부스'를 오픈했습니다.
이 곳에 방문하면 누구나 무료로 실제 장애가 있는 경우 어떤 식으로 인터넷을 이용하는지 직접 체험해 볼 수 있다고 합니다.
웹접근성 연구소 아래에 사이트에 가입하고 들어가서, 코딩한 페이지가 접근성에 맞는지 문의할 수도 있더군요.
웹사이트는 모두가 사용할 수 있어야 합니다.
별거 아닌거같아 보였는데 웹사이트를 만들려면 여러가지 고려해야 할 사항들이 많네요.
출처 : 나무위키, 위키피디아
'IT이야기 > 입코딩' 카테고리의 다른 글
풀스택개발자(full-stack-developer)란 무엇일까요? (0) | 2017.05.19 |
---|---|
반응형 웹 디자인이 무엇일까요? (0) | 2017.05.18 |
웹표준에 대해 알아보겠습니다. (0) | 2017.05.16 |
cms가 무엇일까요? (0) | 2017.05.12 |
호스팅이라는 용어에 대해서 알아보겠습니다. (0) | 2017.05.08 |