Will find a way
[잡담] 웹접근성에 대해서 알아보기 본문
들어가기 전
나는 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 속성 등을 반드시 고려할 것.
'Web Basic > CS' 카테고리의 다른 글
2진수와 비트 / 16진수 (0) | 2024.06.11 |
---|---|
웹에 대한 기본 지식 (0) | 2024.04.08 |
비전공자가 컴퓨터와 친해지길 바라며 (1) | 2024.03.16 |