웹접근성에 관해서
미국에서는 90년대 후반 ADA라고 하는 법률에 장애를 가진 이들에 대한 건물의 접근성 등을 규정하기 시작했다. 건물 입구의 경사로 , 색약 혹은 색맹을 위한 신호등이 그러한 것들의 대표적인 예이다. 시간이 지날 수록 많은 사람들이 디지털화 된 세계에서 살아가게 되었고 지금에 와서는 디지털이 아닌 것만으로 삶을 살아가기는 어려운 세상이 되었다 .
이러한 환경 속에서 시각 등의 감각이나 신체가 불편한 사람들에게 보다 나은 접근성을 제공하고자 하는 것이 Web Accesibility에 대한 담론이다. 단순한 선의의 측면에서도 그렇지만, 마치 경사로가 유모차를 끌고가는 사람 등 원래의 타겟 이외의 계층에게도 편하게 쓰일 수 있음을 고려하면 웹의 접근성은 그 주 타겟이 되는 이 뿐만이 아니라 웹 전반의 발달에 도움이 된다고 할 수 있겠다.
개발자의 실용적인 측면에서 보자면, 정말로 많은 회사들이 구인을 할 때 웹 접근성에 대한 지식을 요구하는 경우가 있다. 그러므로 웹개발을 공부한다면 반드시 웹 접근성에 대한 기초를 알고 있어야한다.
https://www.codecademy.com/article/what-is-digital-accessibility
제목 태그
제목태그는 h1부터 h6까지 순차적으로 사용하는 것이 권장된다. 하나를 건너 뛰거나 하는 식으로 작성하면 안된다.
텍스트에 대해서
진짜 텍스트를 쓰는 것이 , 이미지에 들어간 텍스트를 쓰는 것보다 접근성 측면에서 훨씬 권장되는 방법이다. 권장되는 텍스트의 대조는 4.5:1 이다. 이 말은 밝은 색깔의 밝은 정도(luminisence)가 어두운 것에 비하여 4.5배 정도 된다는 소리이다.
아래 링크를 참고하면 대조도를 비교할 수 있다.
https://webaim.org/resources/contrastchecker/
색상
너무 대조가 크면 반대로 눈부심을 유발할 수 있다. 또한 색맹에 관한 이야기를 안할수가 없는데, 대략 남성의 8%, 여성의 0.5%가 색맹을 가지고 있다고 한다. 따라서 색맹인 유저들의 시각적인 경험을 고려하는 것이 접근성 측면에서 매우 중요하다고 할 수 있다.
예를 들어 색맹 중 가장 많은 비중을 차지하고 있는 적녹색맹의 경우 보라색을 볼 때 파란색으로 인지하게 된다. 다른 색맹을 예로 들자면 청황색맹, 전색맹 등이 있다.
이러한 문제를 해결하기 위한 팁으로는 첫 째, 색상환의 대조가 높은 반대편에 위치한 색깔을 활용하라. 둘 째, 한 가지 색을 사용하더라도 다양한 채도를 주어라. 진한 청색과 옅은 청색은 분명 다르게 보일 것이다. 셋 째, 단순히 색상뿐만 아니라 텍스트 등 기타 정보를 같이 주어라. 예를 들어 form을 입력할 때 뜨는 알림을 색상만 존재하게 한다면 의미가 없을 것이고, 텍스트를 같이 주면 색맹이라도 이해할 수 있을 것이다.
색맹을 위한 웹페이지 필터 웹사이트를 참고해보자
Colorblind Web Page Filter Testing Tool & Simulator | Toptal®
either all text foreground/background color pairs remain unchanged (because your markup allows the user's browser preferences to dictate colors) or all text foreground/background colors are transformed to the coverage color (because your markup sets both f
www.toptal.com
위는 대략적인 웹 접근성에 관한 내용이다. 이것을 표준화한 것이 WAI-ARIA라고하는 개념인데 다음의 웹사이트에서 확인 할 수 있다.
이곳으로부터 aria-label 등의 개념이 나오게 된다. MDN 링크를 참고하자.
크롬 스크린 리더기 설치하기
https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en
Screen Reader
A web-powered screen reader
chrome.google.com
위 링크로 들어가 크롬 확장프로그램으로 설치한다.
주요 웹사이트인 페이스북, 구글, 네이버 등에서 웹접근성이 실제로 잘 지켜지고 있는지 직접 테스트 해볼 수 있다. 크롬의 경우 위 확장프로그램을 사용할 수 있고 OSX는 Voice Over라는 프로그램이, 윈도우즈는 NVDA라고 하는 프로그램을 사용할 수 있다.
'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글
| 자바스크립트 Javascript (loop) / for , while, do while 반복문에 대해서 / while과 do while이 차이점. (1) | 2023.02.20 |
|---|---|
| JavaScript HTML form을 활용한 유효화 검사(pattern, 정규표현식 등 ) (1) | 2023.01.12 |
| JavaScript(Form, Input에 관해서) Input 속성 총정리 / name id 쓰는 이유 (1) | 2023.01.12 |
| Javascript(유효화 검사, 정규표현식) (1) | 2023.01.12 |
| 자바스크립트(이벤트란?) (2) | 2023.01.10 |