Accessibility

AI
gpt-oss-120b
작성자
익명
작성일
2026.02.24
조회수
7
버전
v2
기술 → UX 디자인 → 접근성
접근성 원칙 WCAG 2.2 ARIA 속성 시멘틱 HTML 키보드 내비게이션 색 대비 기준 정보통신접근성법 포용적 디자인 고대비 모드 사용자 테스트

📋 문서 버전

이 문서는 2개의 버전이 있습니다. 현재 최신 버전을 보고 있습니다.

Accessibility (접근성)

개요

접근성(Accessibility)은 장애가 있거나 다양한 환경·기기에서 웹·앱·디지털 콘텐츠를 이용하는 모든 사용자가 동등하게 정보에 접근하고 기능을 활용할 수 있도록 설계·구현하는 원칙을 말한다.
UX 디자인에서 접근성은 포용적 디자인(Inclusive Design)의 핵심 요소이며, WCAG(Web Content Accessibility Guidelines)와 같은 국제 표준, 그리고 각국의 법·규제에 의해 구체적인 요구사항이 정의되어 있다.

“접근성은 장애인만을 위한 것이 아니라, 모든 사용자의 경험을 향상시킨다.” – W3C

1. 접근성의 주요 원칙

원칙 설명 적용 예시
인식 가능 (Perceivable) 사용자가 정보를 시각·청각·촉각 등으로 인식할 수 있어야 함 이미지에 대체 텍스트(alt) 제공, 영상에 자막·오디오 설명
운용 가능 (Operable) 인터페이스를 키보드·음성·터치 등 다양한 입력 방식으로 조작 가능 키보드 포커스 순서 관리, 클릭 영역 최소 44×44 dp
이해 가능 (Understandable) 콘텐츠와 인터페이스가 예측 가능하고 학습하기 쉬워야 함 명확한 라벨링, 오류 메시지와 해결 방법 제공
견고함 (Robust) 다양한 보조 기술(스크린리더·확대기 등)과 호환 가능 HTML5 시멘틱 마크업 사용, ARIA 속성 적절히 적용

2. 국제 표준 및 법적 규제

2.1 WCAG 2.2

WCAG는 4가지 원칙을 기반으로 A, AA, AAA 세 단계(Level)로 구분된 성공 기준(Success Criteria)을 제공한다.

레벨 요구사항 예시 적용 난이도
A 색 대비 최소 4.5:1, 이미지에 alt 텍스트 기본
AA 텍스트 확대 시 레이아웃 붕괴 방지, 키보드 내비게이션 중간
AAA 복잡한 데이터 표에 요약 제공, 동영상에 완전한 오디오 설명 고급

2.2 주요 국가·지역 법령

국가/지역 법령명 적용 범위 주요 요구사항
미국 ADA(Americans with Disabilities Act) 공공·민간 웹사이트 WCAG AA 수준 준수 권고
유럽연합 EN 301 549 공공기관·디지털 제품 WCAG 2.1 AA 기준 명시
한국 정보통신접근성법 공공기관·민간 서비스 WCAG 2.0 AA 수준 준수 의무

3. 접근성 구현 방법

3.1 시멘틱 마크업

HTML5 시멘틱 요소(header, nav, main, section, article, footer)를 사용하면 스크린리더가 구조를 파악하기 쉬워진다.

<main>
  <h1>제품 소개</h1>
  <section aria-labelledby="features">
    <h2 id="features">주요 기능</h2>
    <ul>
      <li>음성 인식</li>
      <li>다크 모드 지원</li>
    </ul>
  </section>
</main>

3.2 ARIA (Accessible Rich Internet Applications)

ARIA 속성은 동적 UI(모달, 탭, 드롭다운 등)의 의미를 보조 기술에 전달한다.

ARIA 속성 용도 예시
role="dialog" 모달 창 정의 <div role="dialog" aria-modal="true">
aria-label 시각적 라벨이 없는 요소에 텍스트 라벨 제공 <button aria-label="검색">🔍</button>
aria-live 동적으로 업데이트되는 영역 알림 <div aria-live="polite">새 알림</div>

3.3 색 대비와 텍스트 크기

  • 색 대비: 텍스트와 배경 색 대비 비율을 4.5:1 이상(AAA는 7:1) 유지한다.
  • 텍스트 크기: 기본 폰트는 최소 16 px, 확대 시 레이아웃이 깨지지 않도록 rem 단위 사용.

3.4 키보드 내비게이션

  • 모든 인터랙션 요소(button, a, input)는 Tab 키로 순차 접근 가능해야 한다.
  • 포커스 스타일(outline)을 명시적으로 제공하여 현재 위치를 시각적으로 표시한다.

:focus {
  outline: 3px solid #ff9800;
  outline-offset: 2px;
}

4. 접근성 테스트와 검증

테스트 단계 도구/방법 설명
자동 검사 Axe, Lighthouse, WAVE 페이지 로드 시 WCAG 위반 항목을 자동으로 식별
스크린리더 검증 NVDA(Windows), VoiceOver(macOS/iOS) 실제 사용자 흐름을 재현하여 라벨·순서 확인
키보드 테스트 Tab, Shift+Tab, Enter, Space 키보드만으로 모든 기능 수행 가능 여부 확인
사용자 테스트 장애인·노년층·다양한 환경 사용자 실제 사용자의 피드백을 통해 미비점 파악

팁: 자동 검사만으로는 30~40% 정도의 문제만 발견되므로, 수동 검증과 사용자 테스트를 반드시 병행한다.

5. 접근성 적용 사례

기업/서비스 적용 내용 효과
Microsoft Office 365에 고대비 모드, 화면 판독기 최적화 장애인 사용자 만족도 25% 상승
Kakao 카카오톡 채팅방에 이미지 대체 텍스트 자동 생성 시각 장애인 이용률 15% 증가
서울시청 공공 포털에 WCAG AA 수준 적용, 키보드 전용 네비게이션 법적 소송 감소, 접근성 인증 획득

6. 접근성 향상을 위한 권장 실천 가이드

  1. 프로젝트 초기 단계부터 접근성 목표 설정
  2. 디자인 시안에 색 대비, 폰트 크기, 포커스 순서 검토 포함.
  3. 디자이너와 개발자 간 협업 프로세스 구축
  4. 디자인 시스템에 접근성 컴포넌트(버튼, 폼, 모달) 정의.
  5. CI/CD 파이프라인에 자동 접근성 검사 도구 통합
  6. PR 단계에서 Axe 혹은 Lighthouse 레포트 자동 생성.
  7. 정기적인 접근성 교육 및 워크숍 진행
  8. 최신 WCAG 업데이트와 보조 기술 사용법 공유.
  9. 사용자 피드백 루프 운영
  10. 장애인 커뮤니티와 협업하여 지속적인 개선 포인트 도출.

참고 자료

본 문서는 2026년 2월 현재 최신 접근성 표준과 실무 적용 사례를 기반으로 작성되었습니다.

AI 생성 콘텐츠 안내

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

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

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