본문 시작
"본문으로 바로가기" 링크에 Tab 키로 포커스하면 보입니다. 이를 통해 키보드 사용자가 반복적인 네비게이션을 건너뛸 수 있습니다.
Accessibility-First Design
모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.
- YEAR
- 2010s
#8B5CF6
취급 표시
- 둥근 모서리
- 굵은 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
High Contrast Design
충분한 색상 대비로 가독성 향상
❌ 낮은 대비
이 텍스트는 배경과 대비가 낮아 읽기 어렵습니다.
✓ 높은 대비
이 텍스트는 배경과 대비가 높아 읽기 쉽습니다.
Keyboard Navigation
키보드만으로 모든 기능 접근 가능
Tab 키를 눌러 포커스를 이동해보세요
ARIA Labels & Semantic HTML
스크린 리더를 위한 적절한 레이블
유효한 이메일 주소를 입력하세요
Clear Focus Indicators
명확한 포커스 표시
❌ 불명확한 포커스
✓ 명확한 포커스
Readable Text Size
읽기 편한 텍스트 크기
너무 작음 (10px) - 가독성 낮음
이 텍스트는 읽기 어려울 수 있습니다.
✓ 적절함 (14px-16px)
이 텍스트는 대부분의 사용자가 편하게 읽을 수 있습니다.
더 큼 (18px+) - 가독성 매우 좋음
이 텍스트는 모든 사용자가 쉽게 읽을 수 있습니다.
Alternative Text
이미지에 대한 대체 텍스트 제공
❌ Alt 텍스트 없음
스크린 리더가 내용을 알 수 없음
✓ Alt 텍스트 있음
스크린 리더가 "푸른 하늘의 그라데이션 이미지"라고 읽음
Accessible Error Messages
명확하고 접근 가능한 오류 메시지
사용자명은 최소 3자 이상이어야 합니다
올바른 이메일 형식입니다
Skip Navigation Links
본문으로 바로 이동하는 링크
Don't Rely on Color Alone
색상 외에도 다른 시각적 단서 제공
❌ 색상에만 의존
성공
실패
✓ 아이콘과 함께 사용
성공
실패
이웃 스타일
어디에 쓰나
사용 사례
- 공공 서비스 웹사이트
- 의료 정보 플랫폼
- 교육 서비스
- 금융·행정 서비스
이런 프로젝트에 맞습니다
- 공공 서비스
- 의료·교육 플랫폼
- 금융·행정 서비스
- 글로벌 서비스
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 포용성
- 접근성
- 평등
주요 특징
- 충분한 색상 대비
- 키보드 내비게이션
- 스크린 리더 지원
- ARIA 레이블
- 대체 텍스트
장점과 한계
장점
- 장애인 포함 모든 사용자가 이용 가능
- SEO에도 긍정적 효과
- 법적 요구사항(ADA·WCAG) 충족
- 시니어 사용자 경험도 개선
한계
- 초기 설계 및 검증 비용
- 모든 접근성 요구를 100% 충족하기 어려움
- 시각적으로 평범해질 수 있음
컬러 시스템
접근성이 최우선인 색상 시스템. 색상 선택보다 대비 비율이 우선
색의 역할
- primary: WCAG AAA (7:1) 이상 대비 확보한 색
- background: 텍스트와 최대 대비
- focus-ring: 포커스 표시 — 배경 대비 3:1 이상 필수
- error/warning/success: 색만이 아닌 아이콘+텍스트 병행
제약
- 색상 혼자 정보 전달 금지 — 반드시 텍스트/아이콘 병행
- WCAG AAA (7:1) 텍스트 대비 목표
- 색맹 사용자 고려 팔레트 선택
다크모드 — 라이트/다크 모두 AAA 대비 충족
명도 대비 — WCAG AAA (7:1) — 접근성이 핵심 가치
타이포그래피
최고 가독성 폰트. 획 굵기 일정하고 자간 적절한 폰트
글꼴은 최대 1종 · 스케일 비율 1.25 이상
- 최소 16px body — 작은 글자 금지
- line-height 1.5 이상
- 자간(letter-spacing) 너무 좁거나 넓지 않게 — 기본값 기준
설계 제약
반드시 포함
- focus visible — 키보드 포커스 항상 보임
- skip navigation 링크
- ARIA label 모든 인터랙티브 요소
- prefers-reduced-motion 지원
하지 말 것
- 색상만으로 상태/오류 전달 금지
- focus indicator 제거 금지
- contrast 4.5:1 미달 텍스트 사용 금지
- 자동 재생 동영상/애니메이션 금지
모션 — prefers-reduced-motion: reduce 지원 필수. 기본적으로 모션 최소화. 필요 시 사용자 설정으로 활성화.
자주 묻는 질문
Accessibility-First Design이란 무엇인가요?
모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.
Accessibility-First Design의 핵심 디자인 원칙은 무엇인가요?
Accessibility-First Design의 핵심 원칙은 포용성, 접근성, 평등입니다.
Accessibility-First Design은 어떤 프로젝트에 적합한가요?
Accessibility-First Design은 공공 서비스 웹사이트, 의료 정보 플랫폼, 교육 서비스, 금융·행정 서비스, 공공 서비스, 의료·교육 플랫폼, 금융·행정 서비스, 글로벌 서비스 등의 프로젝트에 적합합니다.
Accessibility-First Design의 장단점은 무엇인가요?
장점으로는 장애인 포함 모든 사용자가 이용 가능, SEO에도 긍정적 효과, 법적 요구사항(ADA·WCAG) 충족, 시니어 사용자 경험도 개선이 있습니다. 단점으로는 초기 설계 및 검증 비용, 모든 접근성 요구를 100% 충족하기 어려움, 시각적으로 평범해질 수 있음이 있습니다.
Accessibility-First Design에서 색상은 어떻게 사용하나요?
접근성이 최우선인 색상 시스템. 색상 선택보다 대비 비율이 우선 색상 역할은 primary: WCAG AAA (7:1) 이상 대비 확보한 색, background: 텍스트와 최대 대비, focus-ring: 포커스 표시 — 배경 대비 3:1 이상 필수입니다. 주의사항: 색상 혼자 정보 전달 금지 — 반드시 텍스트/아이콘 병행, WCAG AAA (7:1) 텍스트 대비 목표.
Accessibility-First Design에 어울리는 폰트 스타일은 무엇인가요?
Accessibility-First Design에는 최고 가독성 폰트. 획 굵기 일정하고 자간 적절한 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: 최소 16px body — 작은 글자 금지, line-height 1.5 이상.
Accessibility-First Design 디자인에서 하면 안 되는 것은 무엇인가요?
Accessibility-First Design에서 피해야 할 것: 색상만으로 상태/오류 전달 금지, focus indicator 제거 금지, contrast 4.5:1 미달 텍스트 사용 금지, 자동 재생 동영상/애니메이션 금지.