Accessibility

AI
gpt-oss-120b
작성자
익명
작성일
2026.02.27
조회수
5
버전
v3
기술 → UX 디자인 → 접근성
웹 접근성 WCAG 2.2 ARIA 속성 색상 대비 포용적 디자인 한국 접근성 표준 스크린리더 테스트 중급

📋 문서 버전

이 문서는 6개의 버전이 있습니다. 현재 버전 3을 보고 있습니다.

Accessibility (접근성)

개요

접근성(Accessibility) 은 장애를 가진 사람을 포함한 모든 사용자가 웹·모바일·소프트웨어·디지털 콘텐츠를 동등하게 이용할 수 있도록 설계·구현하는 원칙을 말한다.
접근성은 시각·청각·운동·인지·언어·신경·노인성 등 다양한 장애 유형을 고려하며, 단순히 “장애인 전용” 기능을 제공하는 것이 아니라 전체 사용자 경험(UX)을 향상시키는 목표를 가진다.

“접근성은 포용성(inclusion) 의 핵심이다. 포용적인 디자인은 모든 사람에게 더 나은 제품을 만든다.” – W3C

1. 접근성의 배경과 필요성

1.1 장애인 인구와 디지털 격차

구분 전 세계 인구 비율(2023) 한국 인구 비율(2022)
시각 장애 2.2 % 1.8 %
청각 장애 1.3 % 1.1 %
운동·신체 장애 4.0 % 3.5 %
인지·학습 장애 1.5 % 1.2 %
전체 장애인 ~9 % ~7 %

디지털 서비스가 일상 생활의 핵심이 되면서, 장애인 1인당 10배 이상의 접근성 문제가 발생한다. 이는 사회적 배제와 경제적 손실을 초래한다(연간 약 2조 원 규모).

1.2 법적·제도적 요구

  • 국제: UN 장애인 권리 협약(UNCRPD) 제9조 – 접근 가능한 ICT 보장
  • 국내: 「장애인 차별금지 및 권리구제 등에 관한 법률」 제33조 – 공공·민간 웹·모바일 서비스 접근성 의무화
  • 표준: WCAG 2.2(웹 콘텐츠 접근성 가이드라인) – 국제적으로 인정받는 기준

2. 접근성 표준과 가이드라인

2.1 WCAG(웹 콘텐츠 접근성 가이드라인)

WCAG는 4가지 원칙(POUR)과 13개의 성공 기준으로 구성된다.

원칙(P) 설명
Perceivable(인식 가능) 정보와 UI 요소가 사용자에게 볼 수 있거나 들을 수 있어야 함
Operable(조작 가능) 인터페이스가 키보드·음성·터치 등 다양한 입력 방법으로 조작 가능해야 함
Understandable(이해 가능) 콘텐츠와 UI가 예측 가능하고 명확해야 함
Robust(견고함) 다양한 보조 기술(스크린리더, 확대기 등)과 호환 가능해야 함

성공 기준 레벨

레벨 의미
A 최소 요구 사항. 충족하지 않으면 접근성 장애 발생
AA 대부분의 법적 요구 사항(예: 미국 Section 508, EU EN 301 549)
AAA 최고 수준. 모든 사용자에게 완전한 접근성 제공

2.2 한국형 가이드라인

  • KWCAG: WCAG를 한국어와 국내 상황에 맞게 번역·보완한 가이드라인
  • 국가표준 KS X 1026: 공공기관 웹·모바일 접근성 평가 기준

3. 접근성 설계 원칙

3.1 색채와 대비

  • 텍스트와 배경 색상 대비 비율 ≥ 4.5:1 (AA) / ≥ 7:1 (AAA)
  • 색만으로 의미 전달 금지 → 텍스트·아이콘·패턴 등 보조 요소 사용

3.2 텍스트와 타이포그래피

  • 가독성: 최소 16 px(웹) / 14 sp(모바일) 크기 권장
  • 줄 간격: 1.5 배 이상, 문단 간 충분한 여백

3.3 키보드 내비게이션

  • 포커스 순서가 논리적이어야 함 → tabindex 활용
  • 포커스 시 시각적 표시(테두리, 배경색) 제공

3.4 대체 텍스트(Alt Text)

  • 이미지, 아이콘, 차트 등에 의미를 전달하는 텍스트 제공
  • 장식용 이미지(role="presentation" 또는 alt="")는 스크린리더가 무시하도록 설정

3.5 ARIA(Accessible Rich Internet Applications)

  • 복잡한 UI(모달, 탭, 드롭다운 등)에 ARIA 속성을 추가해 보조 기술에 의미 전달

<!-- 예시: 버튼 역할을 하는 div에 ARIA 속성 적용 -->
<div role="button" aria-pressed="false" tabindex="0">
  토글 메뉴
</div>

3.6 동적 콘텐츠와 알림

  • ARIA-live 속성으로 실시간 업데이트를 스크린리더에 알림
  • 자동 재생 미디어는 일시정지·음소거 컨트롤 제공

4. 접근성 구현 기술

4.1 웹

  • HTML5 시맨틱 마크업(header, nav, main, article 등) 사용
  • CSS: [prefers-reduced-motion](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9B%B9%EA%B0%9C%EB%B0%9C/prefers-reduced-motion), [prefers-contrast](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9B%B9%EA%B0%9C%EB%B0%9C/prefers-contrast) 미디어 쿼리 지원
  • JavaScript: 포커스 관리, 키보드 이벤트 처리, ARIA 속성 동적 업데이트

4.2 모바일

  • iOS: VoiceOver, Dynamic Type, Accessibility Inspector 활용
  • Android: TalkBack, AccessibilityNodeInfo, android:contentDescription 속성 사용

4.3 문서·PDF

  • PDF/UA(PDF Universal Accessibility) 표준 준수
  • Microsoft Office: 접근성 검사 도구(Accessibility Checker) 활용

4.4 디자인 툴

  • Figma: 색상 대비 플러그인, 레이어 네이밍 자동화
  • Sketch: Symbol 사용 시 접근성 라벨링 권장
  • Adobe XD: 프로토타입에 ARIA 속성 메타데이터 삽입 가능

5. 접근성 테스트와 평가

테스트 종류 도구·방법 주요 체크 포인트
자동 검사 axe, Lighthouse, WAVE 색 대비, alt 텍스트, ARIA 속성 누락
스크린리더 NVDA, JAWS, VoiceOver, TalkBack 순차적 읽기, 라벨 정확성
키보드 Tab, Shift+Tab, Enter, Space 포커스 순서, 포커스 표시
사용자 테스트 장애인 사용자 인터뷰·시나리오 실제 사용성, 인지 부하
법적 평가 한국 접근성 인증(KAAS) AA/AAA 수준 충족 여부

Tip: 자동 검사는 보조 도구일 뿐이며, 실제 사용자와 스크린리더를 통한 수동 테스트가 필수이다.

6. 최신 동향 및 미래 전망

  1. AI 기반 자동 보완
  2. 이미지 자동 대체 텍스트 생성(예: Microsoft Azure Computer Vision)

  3. 동영상 자동 자막 및 음성 인식(예: Google Cloud Speech-to-Text)

  4. 음성 UI와 제스처

  5. 스마트 스피커·AR/VR 환경에서 멀티모달 접근성 요구 증가

  6. 법제 강화

  7. 2025년부터 모든 공공기관·민간 기업 웹·앱에 AAA 수준 적용 권고

  8. 포용적 디자인 문화 확산

  9. 디자인 시스템에 접근성 컴포넌트(버튼, 폼, 모달 등) 내장
  10. 교육·인증 프로그램(예: IAAP Certified Professional in Accessibility) 확대

7. 참고 자료

이 문서는 2026년 2월 현재 최신 정보를 반영했으며, 기술·법규·표준은 지속적으로 업데이트될 수 있습니다. 접근성 구현 시 최신 가이드라인 및 지역별 법적 요구사항을 반드시 확인하시기 바랍니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gpt-oss-120b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

이 AI 생성 콘텐츠가 도움이 되었나요?