# Accessibility-First Design — 디자인 스타일 가이드

## 기본 정보
- **ID**: accessibility-first
- **카테고리**: ui-pattern
- **연도**: 2010s

## 설명
모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.

## 핵심 원칙
- 포용성
- 접근성
- 평등

## 주요 특징
- 충분한 색상 대비
- 키보드 내비게이션
- 스크린 리더 지원
- ARIA 레이블
- 대체 텍스트

## 컬러 시스템 가이드
접근성이 최우선인 색상 시스템. 색상 선택보다 대비 비율이 우선

### 색상 역할
- 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 indicator 제거 금지
- contrast 4.5:1 미달 텍스트 사용 금지
- 자동 재생 동영상/애니메이션 금지

## 반드시 포함해야 하는 것
- focus visible — 키보드 포커스 항상 보임
- skip navigation 링크
- ARIA label 모든 인터랙티브 요소
- prefers-reduced-motion 지원

## 모션 가이드
prefers-reduced-motion: reduce 지원 필수. 기본적으로 모션 최소화. 필요 시 사용자 설정으로 활성화.

## 사용 사례
- 공공 서비스 웹사이트
- 의료 정보 플랫폼
- 교육 서비스
- 금융·행정 서비스

## 추천 프로젝트 유형
- 공공 서비스
- 의료·교육 플랫폼
- 금융·행정 서비스
- 글로벌 서비스

## 장점
- 장애인 포함 모든 사용자가 이용 가능
- SEO에도 긍정적 효과
- 법적 요구사항(ADA·WCAG) 충족
- 시니어 사용자 경험도 개선

## 단점·한계
- 초기 설계 및 검증 비용
- 모든 접근성 요구를 100% 충족하기 어려움
- 시각적으로 평범해질 수 있음

## 관련 스타일
- [carbon-design](https://ui.buildersgate.com/styles/carbon-design)
- [progressive-disclosure](https://ui.buildersgate.com/styles/progressive-disclosure)
- [micro-interactions](https://ui.buildersgate.com/styles/micro-interactions)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #1D4ED8
- secondary: #1E40AF
- accent: #F59E0B
- background: #FFFFFF
- surface: #F9FAFB
- text: #111827
- textSecondary: #374151
- border: #D1D5DB

### 헤더
- background: #1D4ED8
- textColor: #FFFFFF
- accentColor: #F59E0B

### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

### 스페이싱
- unit: 8px
- scale: 1.2

### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.12)
- md: 0 4px 12px rgba(0,0,0,0.15)
- lg: 0 8px 24px rgba(0,0,0,0.18)
- xl: 0 16px 40px rgba(0,0,0,0.22)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 2px
- style: solid
- color: #D1D5DB

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease

### 애니메이션
- duration: 200ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=outlined / hoverEffect=border
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=accessibility-first
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=accessibility-first&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Accessibility-First Design

모든 사용자가 접근 가능한 포용적 디자인을 우선합니다.

연도

2010s

#8B5CF6

핵심 원칙

1

포용성

2

접근성

3

평등

주요 특징

  • 충분한 색상 대비
  • 키보드 내비게이션
  • 스크린 리더 지원
  • ARIA 레이블
  • 대체 텍스트

장단점

장점

  • +장애인 포함 모든 사용자가 이용 가능
  • +SEO에도 긍정적 효과
  • +법적 요구사항(ADA·WCAG) 충족
  • +시니어 사용자 경험도 개선

단점 / 한계

  • −초기 설계 및 검증 비용
  • −모든 접근성 요구를 100% 충족하기 어려움
  • −시각적으로 평범해질 수 있음

적합한 사용처

사용 사례

  • 공공 서비스 웹사이트
  • 의료 정보 플랫폼
  • 교육 서비스
  • 금융·행정 서비스

이런 프로젝트에 추천

공공 서비스의료·교육 플랫폼금융·행정 서비스글로벌 서비스

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 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

명확하고 접근 가능한 오류 메시지

올바른 이메일 형식입니다

Skip Navigation Links

본문으로 바로 이동하는 링크

본문으로 바로가기

본문 시작

"본문으로 바로가기" 링크에 Tab 키로 포커스하면 보입니다. 이를 통해 키보드 사용자가 반복적인 네비게이션을 건너뛸 수 있습니다.

Don't Rely on Color Alone

색상 외에도 다른 시각적 단서 제공

❌ 색상에만 의존

성공
실패

✓ 아이콘과 함께 사용

성공
실패

관련 스타일 탐색

Carbon Design System

IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다.

Progressive Disclosure

복잡한 정보를 단계적으로 노출하여 인지 부하를 줄입니다.

Micro-interactions

작은 애니메이션과 피드백으로 사용자 경험을 향상시킵니다.