[UX/UI] 웹 접근성 (Web Accessibility)

웹 접근성이란?

 

웹 접근성(Web Accessibility) 은 모든 사용자가 웹 사이트를 이해하고 사용할 수 있도록 하는 개념으로

다양한 사용자 그룹에게 동등한 기회를 제공하는 것을 목표로 합니다.

(장애를 가진 사용자, 고령자, 기술적으로 어려움을 겪는 사람, 다양한 기기를 사용하는 사람 등을 포함).

웹 접근성을 증진시키기 위한 주요 원칙은 다음과 같습니다.

 

1. 인식의 용이성 (Perceivable)

모든 사용자가 정보를 쉽게 인식할 수 있어야 하며, 텍스트, 이미지, 동영상 등의 콘텐츠는

모든 사용자에게 인식 가능하도록 제공되어야 합니다.

 

적절한 대체 텍스트 제공 : 텍스트 이외의 콘텐츠는 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
자막 제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.

색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
명확한 지시사항 제공 : 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
텍스트 콘텐츠의 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
자동 재생 금지 : 자동으로 소리가 재생되지 않아야 한다. (autoplay 시, mute 필수)
콘텐츠 간의 구분 : 이웃한 콘텐츠는 구별될 수 있어야 한다.

(1) 테두리를 이용하여 구분함
(2) 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분함
(3) 서로 다른 무늬를 이용하여 구분함
(4) 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분함
(5) 줄 간격 및 글자 간격을 조절하여 구분함
(6) 기타 콘텐츠를 시각적으로 구분할 수 있는 방법 등

line-height

line-height(줄 높이)의 황금 비율은 1.618의 비율이며, 텍스트의 가독성 향상.

일반적으로 1.4 ~1.7 많이 사용.

---

2. 운용의 용이성(Operable)

모든 사용자가 웹 사이트를 쉽게 조작하고 탐색할 수 있어야 합니다.

키보드, 마우스, 음성 명령 등 다양한 입력 방식을 지원하며, 예측 가능하고 일관적이어야 함.

 

키보드 사용 보장 :  모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
누르기 동작 지원 : 터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일웹)
초점 이동 : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
조작 가능 : 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
응답시간 조절 : 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
깜빡임과 번쩍임 사용 제한 : 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
반복 영역 건너뛰기 : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
적절한 링크 텍스트 : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

---

 

 

3. 이해의 용이성(Understandable)

 웹 콘텐츠의 사용 방법은 명확하고 이해하기 쉬워야 하며, 사용자가 현재 위치를 이해하고,

오류 발생 시 도움을 받을 수 있어야 합니다.

 

기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다.
사용자 요구에 따른 실행 :  사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.

 외부의 링크는 새 창이지만, 내부 사이트 내 이동은 새 창 X 
콘텐츠의 선형화 : 콘텐츠는 논리적인 순서로 제공해야 한다. (메뉴와 서브메뉴가 위계에 맞게 위치)
표의 구성 : 표는 이해하기 쉽게 구성해야 한다.
레이블 제공 : 사용자 입력에는 대응하는 레이블을 제공해야 한다.
오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

 

 

 

 

 

웹 접근성은 검색 측면에서도 웹 사이트에서 중요한 부분을 차지하기 떄문에,

시멘틱 태그 준수 및 각 요소의 원칙에 맞게 웹 접근성을 지켜서 코딩 해야합니다.

 

 

네이버 웹 접근성 :  https://accessibility.naver.com/accessibility

네이버 접근성 페이지 : 접근성 가이드

웹 접근성 검사 도구 : https://wave.webaim.org/

WAVE Web Accessibility Evaluation Tools