웹 접근성 기초 — 모든 사람을 위한 웹사이트 구축

전 세계적으로 10억 명 이상의 사람들이 어떤 형태의 장애를 가지고 살아가고 있습니다. 이는 전 세계 인구의 약 15%에 해당합니다. 시각 장애가 있는 사람, 청각 장애가 있는 사람, 운동 기능에 제한이 있는 사람, 인지적 차이가 있는 사람, 그리고 팔이 부러지거나 편두통 같은 일시적인 상태에 있는 사람이 포함됩니다.

이러한 현실을 고려하지 않고 웹사이트를 만들면, 단순히 불편을 초래하는 것이 아닙니다. 다른 사람들이 당연하게 사용하는 정보, 서비스, 기회에서 사람들을 차단하는 것입니다. 접근성은 기능이 아닙니다. 접근성은 책임입니다.

웹 접근성이란

웹 접근성이란 장애가 있는 사람이 웹사이트를 인식하고, 이해하고, 탐색하고, 상호작용할 수 있도록 웹사이트를 설계하고 개발하는 것을 의미합니다. 또한 웹에 기여할 수 있다는 것을 의미합니다.

이것은 스크린 리더에만 관한 것이 아닙니다. 접근성은 다음 영역을 포함합니다:

• 시각적: 실명, 저시력, 색각 이상
• 청각적: 청각 장애, 난청
• 운동 기능: 미세 운동 조절 제한, 떨림, 마비
• 인지적: 난독증, ADHD, 기억 장애, 학습 장애
• 일시적 및 상황적: 손목 골절, 화면에 비치는 강한 햇빛, 시끄러운 환경, 느린 인터넷

핵심 통찰은 접근 가능한 디자인은 모든 사람에게 도움이 된다는 것입니다. 자막은 시끄러운 곳에서 도움이 됩니다. 높은 대비는 밝은 빛 아래에서 도움이 됩니다. 키보드 내비게이션은 파워 유저에게 도움이 됩니다. 명확한 글쓰기는 비원어민에게 도움이 됩니다. 접근성은 특별한 모드가 아닙니다 — 좋은 디자인 그 자체입니다.

WCAG 표준

**Web Content Accessibility Guidelines(WCAG)**는 W3C가 발행한 웹 접근성의 국제 표준입니다. 현재 버전은 WCAG 2.2이며, POUR라는 약자로 알려진 4가지 원칙을 기반으로 합니다:

인식의 용이성(Perceivable)

정보는 모든 사용자가 인식할 수 있는 방식으로 제시되어야 합니다.

• 텍스트 대체: 모든 이미지에는 내용을 설명하는 alt 속성이 필요합니다. 장식용 이미지는 alt=""를 사용합니다.
• 자막 및 대본: 동영상 콘텐츠에는 자막이, 오디오 콘텐츠에는 대본이 필요합니다.
• 적응 가능한 구조: 스타일을 제거해도 콘텐츠가 의미를 가져야 합니다. 시각적 스타일링만이 아닌 시맨틱 HTML(<h1>, <nav>, <main>, <article>)을 사용하세요.
• 구별 가능한 콘텐츠: 충분한 색상 대비, 크기 조절 가능한 텍스트, 색상만으로 정보를 전달하지 않기.

운용의 용이성(Operable)

사용자가 인터페이스를 조작할 수 있어야 합니다.

• 키보드 접근 가능: 모든 대화형 요소가 키보드만으로 접근하고 사용할 수 있어야 합니다. 마우스 트랩을 만들지 마세요.
• 충분한 시간: 콘텐츠에 시간 제한이 있는 경우 사용자가 이를 연장하거나 비활성화할 수 있어야 합니다.
• 발작 방지: 초당 3회 이상 깜빡이는 콘텐츠를 피하세요.
• 탐색 가능: 명확한 페이지 제목, 논리적인 제목 구조, 건너뛰기 내비게이션 링크, 눈에 보이는 포커스 표시기.

이해의 용이성(Understandable)

콘텐츠와 인터페이스는 이해할 수 있어야 합니다.

• 읽기 쉬운 텍스트: 페이지 언어를 지정하세요(lang 속성). 가능한 한 명확하고 간단한 언어를 사용하세요.
• 예측 가능한 동작: 내비게이션은 일관되어야 합니다. 페이지가 예기치 않게 컨텍스트를 변경하면 안 됩니다.
• 입력 지원: 양식 필드에 명확한 레이블을 붙이세요. 무엇이 잘못되었고 어떻게 고칠 수 있는지 설명하는 유용한 오류 메시지를 제공하세요.

견고성(Robust)

콘텐츠는 현재 및 미래의 기술과 호환될 수 있을 만큼 견고해야 합니다.

• 유효한 HTML: 보조 기술이 안정적으로 해석할 수 있는 적절한 시맨틱 마크업.
• 이름, 역할, 값: 사용자 정의 구성 요소는 접근성 API에 목적을 공개해야 합니다(필요시 ARIA 사용).

적합성 수준

WCAG는 3가지 수준을 정의합니다:

전 세계 대부분의 법률이 레벨 AA 준수를 요구합니다. 이것이 목표로 삼아야 할 수준입니다.

일반적인 장벽과 해결 방법

이미지의 alt 텍스트 누락

문제: 스크린 리더 사용자는 "이미지"라고만 듣거나 아무것도 듣지 못합니다.

해결: 모든 정보성 이미지에 설명적인 alt 텍스트를 추가하세요. 장식용 이미지에는 alt=""를 사용하여 스크린 리더가 건너뛰게 하세요.

<!-- Good -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Decorative -->
<img src="divider.svg" alt="" />

불충분한 색상 대비

문제: 저시력이나 색각 이상이 있는 사람이 텍스트를 읽을 수 없습니다.

해결: 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트(18px 이상 또는 14px 굵은 글씨)의 경우 3:1의 대비 비율을 확보하세요. 대비 검사 도구를 사용하여 색상 조합을 확인하세요.

양식 레이블 누락

문제: 스크린 리더 사용자가 양식 필드의 목적을 알 수 없습니다.

해결: 모든 입력 필드에 for 속성으로 연결된 보이는 <label> 요소가 필요합니다.

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />

<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />

키보드 내비게이션 없음

문제: 마우스를 사용할 수 없는 사용자가 막힙니다.

해결: 기본적으로 키보드 접근이 가능한 네이티브 HTML 요소(<button>, <a>, <select>)를 사용하세요. 사용자 정의 구성 요소를 만들 때는 포커스 가능하고 키보드 이벤트에 응답하도록 하세요. 대안을 제공하지 않고 포커스 윤곽선을 제거하지 마세요.

페이지 구조 누락

문제: 스크린 리더 사용자가 효율적으로 탐색할 수 없습니다.

해결: 시맨틱 HTML을 사용하세요. 페이지당 하나의 <h1>, 논리적인 제목 계층(수준 건너뛰기 없음), 랜드마크(<nav>, <main>, <footer>).

미디어 자동 재생

문제: 예상치 못한 오디오가 스크린 리더 사용자를 방해합니다. 자동 재생 동영상은 발작을 유발하거나 불안을 줄 수 있습니다.

해결: 오디오를 자동 재생하지 마세요. 동영상이 자동 재생되는 경우 기본적으로 오디오를 끄고 일시 정지 컨트롤을 제공하세요.

색상만으로는 부족합니다

정보를 전달하는 유일한 수단으로 색상에 의존하지 마세요. 다음을 고려하세요:

• 오류를 나타내는 빨간 테두리가 있는 양식 필드에는 오류 아이콘이나 텍스트 메시지도 필요합니다
• 색상이 있는 선으로 된 차트에는 패턴, 레이블 또는 범례도 필요합니다
• 본문 중의 링크에는 색상 변경만이 아닌 밑줄이나 다른 시각적 단서가 필요합니다

**남성의 약 8%, 여성의 약 0.5%**가 어떤 형태의 색각 이상을 가지고 있습니다. 이를 고려한 디자인은 특수한 경우가 아닙니다 — 기본적인 포용성입니다.

접근성 테스트

자동화 테스트

자동화 도구는 접근성 문제의 약 30~40%를 감지합니다. 좋은 첫 번째 단계이지만 완전한 솔루션은 아닙니다.

• axe DevTools(브라우저 확장 프로그램) — 페이지를 스캔하고 WCAG 위반을 보고
• Lighthouse(Chrome DevTools 내장) — 접근성 감사 포함
• WAVE(웹 기반 도구) — 문제를 보여주는 시각적 오버레이

수동 테스트

많은 접근성 문제에는 사람의 판단이 필요합니다:

• 키보드 테스트: 마우스를 분리하고 Tab, Enter, Escape, 화살표 키로 전체 사이트를 탐색하세요. 모든 곳에 도달할 수 있나요? 포커스 순서가 논리적인가요?
• 스크린 리더 테스트: VoiceOver(Mac), NVDA(Windows, 무료), TalkBack(Android)을 사용해 보세요. 소리 내어 읽었을 때 콘텐츠가 이해되나요?
• 확대 테스트: 브라우저를 200%로 확대하세요. 레이아웃이 여전히 작동하나요? 콘텐츠가 잘리거나 겹치지 않나요?
• 모션 줄이기: OS 설정에서 "동작 줄이기"를 활성화하세요. 애니메이션이 이 설정을 존중하나요?

사용자 테스트

가장 가치 있는 피드백은 일상 생활에서 실제로 보조 기술을 사용하는 사람들에게서 옵니다. 예산이 허용한다면 장애가 있는 사용자를 테스트 과정에 포함시키세요.

접근성은 체크박스가 아닌 스펙트럼입니다

접근성은 결승선이 있는 일회성 프로젝트가 아닙니다. 지속적인 실천입니다. 웹사이트는 변하고, 콘텐츠가 추가되며, 업데이트할 때마다 새로운 장벽이 나타날 수 있습니다.

목표는 완벽이 아닙니다. 목표는 지속적인 개선과 여러분이 만든 것을 사용하는 사람들에 대한 진정한 관심입니다. 가장 영향력 있는 변경(색상 대비, alt 텍스트, 키보드 내비게이션, 양식 레이블)부터 시작하여 거기서부터 쌓아 올리세요.

여러분이 제거하는 모든 장벽은 누군가에게 열리는 문입니다.

빠른 점검 목록

• 모든 이미지에 의미 있는 alt 텍스트가 있음(장식용은 alt="")
• 색상 대비가 WCAG AA를 충족(텍스트 4.5:1, 큰 텍스트 3:1)
• 모든 양식 필드에 보이는 레이블이 있음
• 사이트 전체가 키보드로 탐색 가능
• 제목이 논리적 계층을 따름
• 포커스 표시기가 보임
• 페이지 언어가 설정됨(<html>의 lang 속성)
• 색상만으로 정보를 전달하지 않음
• 동영상에 자막이 있음
• 애니메이션이 prefers-reduced-motion을 존중함