웹접근성 참 어려운 문제입니다.
웹접근성, Web Content Accessibility
웹접근성 가이드라인은 Web Content Accessibility Guidelines (WCAG) 라고 합니다.
Common accessibility considerations :
Visual disabilities (e.g. blindness, color blindness)
Mobility disabilities (e.g. muscle control, arthritis, functional movement disorders)
Auditory disabilities (e.g. hearing loss, auditory processing disorder)
Seizure risk (those with photosensitive epilepsy)
Cognitive and learning disabilities (e.g. dyslexia, processing disorders, impaired memory)
위에 언급된것처럼 시각적, 청각적, 신체적 장애, 발작위험, 인지장애 등의 문제로
홈페이지 내용에 접근이 어려운 부분을 고려하여 홈페이지 제작을 하도록 하는게 웹접근성 홈페이지 제작입니다.
그리고 그에 따른 가이드라인을 제시한것이 Web Content Accessibility Guidelines (WCAG) 입니다.
가이드라인은 세가지 단계로 제안됩니다.
Level A : Minimum level
Requirements include:
Keyboard-only content access
Clearly labeled forms with instructions so users know what the forms require
Content compatibility with assistive technologies
Providing clear information or instructions in additional ways to using just shape, size, or color
키보드를 이용해서 콘텐츠 접근 ( 탭바를 이용해서 메뉴를 이동하는 )을 하고,
이미지나 비디오등에 Text alternatives 적용
Level AA : the mid-range conformance level
Requirements include:
Text and background must have the proper color contrast (a minimum of 4.5 to 1)
Content organization must have a clear heading structure and follow a logical order (e.g., H1, H2, H3)
Navigation elements must be consistent throughout every webpage
Level AAA : the highest level
Requirements include:
A minimum of 7 to 1 contrast ratio for text and backgrounds
Sign language translation for pre-recorded video content
Expanded audio descriptions for pre-recorded video content
텍스트 색상대비 부분 같은 경우 아래 글자예가 4.5:1 의 색상비를 갖고 있습니다
Blue (#000063) on gray (#808080)
글자색이 잘 안보여서 읽기가 어렵다.
그래서 위에 웹접근성 Level AA에서 글자 색상 대비가 4.5:1 를 넘어야 한다는겁니다.
아래는 색상 대비가 약 17:1 정도입니다. 위 텍스트와 확연히 차이가 납니다.
훨씬 보기 좋은 선명한 글자
모든 콘텐츠를 탭으로 이동할 수 있게 하고, 메뉴등에 label을 전부 달고,
모든 이미지등에 alt 텍스트 (텍스트 대체요소) 를 추가하고, 콘텐츠를 heading structure 에 맞춰서 구성하고
글자, 배경색등에 색상 대비를 다 맞추고 가독성을 높히고 웹접근성 홈페이지를 만드는건 어려운게 아닌데,
상당히 큰 비용이 발생합니다.
해야된다 생각은 하는데 실천하기 어려운 부분입니다.
참고)
WCAG 홈페이지 https://www.wcag.com/
WebAIM https://webaim.org/
웹접근성 체크 사이트 https://wave.webaim.org/
Color contrast check https://accessibleweb.com/color-contrast-checker/