웹 접근성: 착한 척하려고 하는 거 아닙니다

보통 접근성(A11y) 얘기하면 "아, 시각장애인용?" 하고 넘겨버립니다. "우리 서비스엔 장애인 유저 없는데?"라고 하면서요. 근데 정말 그럴까요?

이 글을 다 읽으면 접근성이 모든 사용자를 위한 것이고, 결국 더 나은 UX와 더 높은 매출로 이어진다는 걸 알게 됩니다.

상황적 장애 (Situational Disability)

여러분이 한 손에 커피를 들고 버스 손잡이를 잡고 있어요. 그럼 남은 한 손으로만 폰을 써야 하죠? 이게 바로 '일시적 장애' 상태입니다. 운전 중이라 화면을 못 볼 때, 야외라 햇빛 때문에 화면이 잘 안 보일 때. 우리 모두는 하루에도 몇 번씩 장애 상황을 겪습니다. 접근성을 지키면 이런 상황에서도 편하게 쓸 수 있는 서비스가 됩니다. 즉, 모든 유저가 좋아합니다.

장애 유형의 스펙트럼

장애는 이분법이 아닙니다. 스펙트럼입니다:

영구적: 시각 장애, 청각 장애, 운동 기능 장애
일시적: 팔 깁스, 안경 분실, 귀 염증
상황적: 한 손에 짐을 들고 있는 상태, 소음이 심한 환경, 밝은 햇빛 아래

마이크로소프트의 조사에 따르면, 영구적 장애를 가진 인구는 전 세계 약 10억 명이지만, 상황적 장애를 포함하면 거의 모든 사람이 해당됩니다.

개발자가 당장 챙겨야 할 핵심 사항

1. 키보드 접근성

마우스 없이 Tab 키만으로 모든 메뉴를 이동하고 실행할 수 있나요?

체크해야 할 포인트:

포커스 순서: Tab 키로 이동할 때 논리적인 순서로 이동하는가? CSS로 시각적 순서를 바꿨다면 tabindex를 확인하세요.
모달 함정: 모달 팝업이 떴을 때 뒤에 배경으로 포커스가 넘어가면 탈락입니다. 모달이 열려 있는 동안 포커스를 모달 안에 가둬야 합니다(Focus Trap).
포커스 표시: 포커스된 요소가 시각적으로 명확히 구분되어야 합니다. CSS의 outline: none을 전역으로 적용하는 건 금지입니다! :focus-visible을 사용하세요.
건너뛰기 링크: 긴 네비게이션을 반복적으로 Tab으로 이동하지 않도록 "본문으로 건너뛰기" 링크를 제공하세요.

2. 명도 대비

회색 글씨 제발 그만... "세련돼 보인다"고 연한 회색 쓰면, 노안 온 부장님뿐만 아니라 모니터 밝기 낮춘 저도 안 보입니다.

WCAG 2.1 기준:

일반 텍스트: 최소 4.5:1 대비율
큰 텍스트 (18pt 이상): 최소 3:1 대비율
UI 컴포넌트 (버튼, 입력 필드 등): 최소 3:1 대비율

검사 도구:

Chrome DevTools: Elements 패널에서 색상 값을 클릭하면 대비율을 바로 확인할 수 있습니다.
Contrast Checker (webaim.org): 두 색상의 대비율을 계산해줍니다.
Stark (Figma 플러그인): 디자인 단계에서 접근성을 검사합니다.

3. 대체 텍스트(alt)

이미지 엑박 떴을 때 "image01.jpg"라고 뜨면 화나죠? "귀여운 고양이 사진"이라고 적혀있으면 용서가 됩니다. 스크린 리더뿐만 아니라, 네트워크 느린 환경에서도 유용합니다.

alt 텍스트 작성 가이드:

정보성 이미지: 이미지가 전달하는 내용을 설명합니다. "매출 그래프: 전년 대비 30% 상승"
장식용 이미지: alt=""로 비워두세요. 스크린 리더가 무시합니다. 배경 패턴, 구분선 등이 해당됩니다.
기능적 이미지: 이미지의 기능을 설명합니다. 돋보기 아이콘이면 "검색"이라고 적으세요.
텍스트가 포함된 이미지: 이미지 안의 텍스트를 그대로 alt에 작성합니다.

4. ARIA 속성

ARIA(Accessible Rich Internet Applications)는 HTML 요소에 접근성 정보를 추가하는 속성입니다.

핵심 원칙: 네이티브 HTML 요소를 쓸 수 있으면 ARIA를 쓰지 마세요. <button>으로 만들 수 있는 걸 <div role="button">로 만들지 마세요. 네이티브 요소는 키보드 이벤트, 포커스 관리 등을 자동으로 처리합니다.

하지만 ARIA가 필요한 경우:

동적 콘텐츠: aria-live="polite"로 스크린 리더에게 콘텐츠가 변경되었음을 알립니다. 토스트 메시지, 카운트다운 타이머 등에 유용합니다.
커스텀 컴포넌트: 드롭다운 메뉴, 탭 패널, 아코디언 등 네이티브에 없는 위젯을 만들 때 role, aria-expanded, aria-selected 등을 사용합니다.
상태 전달: 로딩 중(aria-busy="true"), 비활성화(aria-disabled="true"), 에러 상태(aria-invalid="true") 등을 전달합니다.

접근성: 장애인만을 위한게 아닙니다