[잡담] 웹접근성에 대해서 알아보기

들어가기 전

나는 2개의 국비지원 과정을 이수하였다. 첫 번째는 웹퍼블리셔 프론트엔드 과정 두 번째가 풀스택 과정이다.

그래서 이게 지금 말할 웹 접근성이랑 무슨 상관이 있을까? 직접적인 관련은 없지만 내가 이 글을 쓰게 된 이유이기 때문에 언급해봤다.

 

국비교육을 이수하면서 개발을 배우고 싶은 사람으로서는 풀스택 과정이 훨씬 좋았지만 웹접근성을 놓고 봤을 때는 첫번째 국비 과정에서 더 많이 언급을 했고 알려주려고 했어서 기억이 남는다. 2번째 과정을 들으면서 웹접근성에 대해서 내 기억이 조금 흐려지기도 했어서 다시 상기 시키고 싶었다.

 

단순한 정보글이 아닌 내가 왜 이 글을 포스팅했으며 목적까지도 적고 싶기 때문이다. 내가 만들고 싶은 웹이나 앱은 모든 사람들이 동일한 서비스를 이용할 수 있었으면 좋겠다. 그래서 쓰는 글이다.

 

이제 웹접근성이 뭔지 어떻게 지킬 수 있는지 알아보자

 

1. 웹접근성 (Web Accessibillity)란?

장애가 있든 없든, 나이와 능력에 상관없이 모든 사람이 웹사이트에 접근하고 이용할 수 있도록 만드는 것

(시각장애, 청각장애, 지체장애, 인지장애를 겪는 사용자, 비장애인 사용자 모두 컨텐츠에 사용할 수 있어야 한다는 원칙)

 

2. 웹접근성의 중요성

법적 책임

- 한국 미국, 유럽 등은 웹 접근성 준수를 법으로 강제하고 있음. (안 하면 소송 가능성도 있음)

 

사용자 수 확대

- 더 많은 사람들이 사이트나 서비스를 사용할 수 있음 (시장 확대)

 

SEO 향상

- 검색 엔진은 접근성이 좋은 사이트를 선호 (검색 순위에 유리)

* SEO :  웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.

 

사회적 책임

- 차별 없는 정보 접근 기회를 보장하는 사회적 가치

 

3. 웹접근성 기본 원칙 (WCAG 2.1 기준)

W3C(World Wide Web consotium)가 만든 가이드라인에 따르면,

웹접근성은 4가지 원칙으로 설명이 된다.

 

POUR 원칙

원칙	의미
Perceivable (지각 가능)	사용자가 콘텐츠를 볼 수 있고, 들을 수 있어야 함
Operable (조작 가능)	키보드로 조작할 수 있어야 함 (마우스로만은 불가능)
Undestandable (이해 가능)	사용자가 기능과 정보를 이해할 수 있어야 함
Robust (견고성)	다양한 기술(스크린 리더, 보조기기)에서도 정상 작동해야 함

 

4. 웹접근성 기술 요소 (실무에서 신경 써야하는 부분이니 잘 알아보자)

1) 대체 텍스트 (alt 속성)

> 이미지에는 항상 alt 텍스트를 제공해야한다.

<img src="/logo.png" alt="회사 로고" />

 

- 이미지 의미를 설명

- 장식용 이미지는 alt=""로 비워 놓음

 

2) 키보드 네비게이션 지원

> 마우스 없이도 (Tab 키)로도 모든 기능 (버튼, 링크, 입력창 등)에 접근할 수 있어야 함

<button>로그인</button> <!-- 키보드로 접근 가능해야 함 -->

tabindex 활용 가능 (tabindex="0"은 기본순서)

 

3. 명확한 폼 라벨 (label)

<label for="email">이메일</label>
<input id="email" type="email" />

시각장애인이 어떤 입력창인지 알 수 있게 해줌

 

4. 명확한 버튼/링크 이름

> 막연한 텍스트 대신 정확한 링크나 버튼의 목적을 설명해야 함

<a href="/contact">문의하기 페이지로 이동</a>

 

5. 색상 대비 충분히 주기

- 텍스트와 배경 새상의 명도를 대비 충분히 줘야 함.

(흐릿하거나, 밝은 배경에 밝은 글자 금지 / ex: 연노랑 배경 + 연한 회색 텍스트)

 

6. 동적 콘텐츠(모달, 드롭다운 등) 접근성 신경쓰기

- 모달창 띄울 떄 포커스로 모달 이동시킴

- 모달을 닫으면 포커스를 다시 원래 있던 곳으로 돌려야 함.

- Drop down메뉴는 키보드로 열고닫을 수 있어야 함.

 

7. ARIA 속성 활용

- 스크린 리더가 더 정확히 읽을 수 있을 수 있게 도와주는 역할

- aria-label, arai-hidden, arai-expanded 같은 속성 사용

<button aria-expanded="false" aria-controls="menu">
  메뉴 열기
</button>

 

요약

웹접근성은 누구나 웹을 동일하게 이용할 수 있게 만드는 기술,

실무에서 alt, 키보드 네비게이션, 라벨, 대비, ARIA 속성 등을 반드시 고려할 것.