Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
Sehwan edited this page Apr 5, 2025 · 14 revisions

μ›Ή μ ‘κ·Όμ„±

이 μœ„ν‚€ λ¬Έμ„œλŠ” "KS X OT0003:2022 - ν•œκ΅­ν˜• μ›Ή μ½˜ν…μΈ  μ ‘κ·Όμ„± μ§€μΉ¨ 2.2"λ₯Ό 기반으둜 Daleui λ””μžμΈ μ‹œμŠ€ν…œμ„ μ„€κ³„ν•˜κ³  κ²€ν† ν•  λ•Œ μ‚¬μš©ν•΄μ•Ό ν•˜λŠ” μ ‘κ·Όμ„± μ²΄ν¬λ¦¬μŠ€νŠΈμž…λ‹ˆλ‹€. λͺ¨λ“  UI μ»΄ν¬λ„ŒνŠΈ, μ½˜ν…μΈ , μƒν˜Έμž‘μš© μš”μ†Œκ°€ μž₯애인 및 λΉ„μž₯애인 λͺ¨λ‘μ—κ²Œ λ™λ“±ν•œ 접근성을 μ œκ³΅ν•˜λ„λ‘ 보μž₯ν•˜λŠ” 것을 λͺ©ν‘œλ‘œ ν•©λ‹ˆλ‹€.

1. 인지 κ°€λŠ₯μ„± (Perceivable)

μ‚¬μš©μžκ°€ μ½˜ν…μΈ λ₯Ό 인지할 수 μžˆλ„λ‘ μ‹œκ°, 청각, 촉각 λ“± λ‹€μ–‘ν•œ 감각을 κ³ λ €ν•œ 섀계.

1.1 ν…μŠ€νŠΈ λŒ€μ²΄ 제곡

  • λͺ¨λ“  λΉ„ν…μŠ€νŠΈ μ½˜ν…μΈ (이미지, μ•„μ΄μ½˜ λ“±)에 μ μ ˆν•œ λŒ€μ²΄ ν…μŠ€νŠΈ(alt text)λ₯Ό μ œκ³΅ν–ˆλŠ”κ°€? 1.1.1 Non-text Content (A)
  • λŒ€μ²΄ ν…μŠ€νŠΈλŠ” μ½˜ν…μΈ μ˜ λͺ©μ κ³Ό κΈ°λŠ₯을 λͺ…ν™•νžˆ μ„€λͺ…ν•˜λŠ”κ°€?

1.2 적응 κ°€λŠ₯μ„±

  • μ½˜ν…μΈ κ°€ μ„ ν˜• ꡬ쑰둜 μ œκ³΅λ˜μ–΄ 슀크린 λ¦¬λ”λ‘œ 이해 κ°€λŠ₯ν•˜λ„λ‘ μ„€κ³„λ˜μ—ˆλŠ”κ°€? 1.3.1 Info and Relationships (A)
  • μ‹œκ°μ  μˆœμ„œμ™€ 논리적 μˆœμ„œκ°€ μΌμΉ˜ν•˜λŠ”κ°€? 1.3.2 Meaningful Sequence (A)
  • μž…λ ₯ ν•„λ“œμ— λ ˆμ΄λΈ”μ΄ λͺ…ν™•νžˆ μ—°κ²°λ˜μ–΄ μžˆλŠ”κ°€? 1.3.3 Sensory Characteristics (A)
  • λ°˜μ‘ν˜• λ””μžμΈμ—μ„œ μ½˜ν…μΈ κ°€ 손싀 없이 λͺ¨λ“  λ””λ°”μ΄μŠ€μ—μ„œ ν‘œμ‹œλ˜λŠ”κ°€? 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA)

1.3 ꡬ별 κ°€λŠ₯μ„±

  • ν…μŠ€νŠΈμ™€ λ°°κ²½ κ°„ λͺ…도 λŒ€λΉ„κ°€ μ΅œμ†Œ 4.5:1(A) λ˜λŠ” 3:1(AA) 이상인가? 1.4.3 Contrast (Minimum) (AA)
  • ν…μŠ€νŠΈ 크기λ₯Ό 200%κΉŒμ§€ ν™•λŒ€ν•΄λ„ μ½˜ν…μΈ κ°€ μ†μ‹€λ˜μ§€ μ•ŠλŠ”κ°€? 1.4.4 Resize Text (AA)
  • μ΄λ―Έμ§€λ‘œ 된 ν…μŠ€νŠΈ λŒ€μ‹  μ‹€μ œ ν…μŠ€νŠΈλ₯Ό μ‚¬μš©ν–ˆλŠ”κ°€? 1.4.5 Images of Text (AA)
  • μƒ‰μƒλ§ŒμœΌλ‘œ 정보λ₯Ό μ „λ‹¬ν•˜μ§€ μ•Šμ•˜λŠ”κ°€? 1.4.1 Use of Color (A)

2. 운영 κ°€λŠ₯μ„± (Operable)

μ‚¬μš©μžκ°€ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‰½κ²Œ μ‘°μž‘ν•  수 μžˆλ„λ‘ 섀계.

2.1 ν‚€λ³΄λ“œ μ ‘κ·Όμ„±

  • λͺ¨λ“  κΈ°λŠ₯이 ν‚€λ³΄λ“œλ‘œλ§Œ μ‘°μž‘ κ°€λŠ₯ν•˜λ„λ‘ μ„€κ³„λ˜μ—ˆλŠ”κ°€? 2.1.1 Keyboard (A)
  • ν‚€λ³΄λ“œ ν¬μ»€μŠ€κ°€ κ°‡νžˆλŠ” 상황(Keyboard Trap)이 μ—†λŠ”κ°€? 2.1.2 No Keyboard Trap (A)
  • ν‚€λ³΄λ“œ 단좕킀가 μ‚¬μš©μž λ§žμΆ€ν˜•μœΌλ‘œ μ‘°μ • κ°€λŠ₯ν•˜κ±°λ‚˜ λΉ„ν™œμ„±ν™” κ°€λŠ₯ν•˜λ„λ‘ ν–ˆλŠ”κ°€? 2.1.4 Character Key Shortcuts (A)

2.2 μΆ©λΆ„ν•œ μ‹œκ°„ 제곡

  • μ‹œκ°„ μ œν•œμ΄ μžˆλŠ” μ½˜ν…μΈ μ— λŒ€ν•΄ μ‚¬μš©μžμ—κ²Œ μΆ©λΆ„ν•œ μ‹œκ°„μ„ μ œκ³΅ν–ˆλŠ”κ°€? 2.2.1 Timing Adjustable (A)
  • μ›€μ§μ΄λŠ” μ½˜ν…μΈ λ₯Ό μΌμ‹œ μ •μ§€, 쀑지, 숨길 수 μžˆλŠ” μˆ˜λ‹¨μ„ μ œκ³΅ν–ˆλŠ”κ°€? 2.2.2 Pause, Stop, Hide (A)
  • 쀑단(Interruptions)이 λ°œμƒν•˜μ§€ μ•Šλ„λ‘ ν–ˆκ±°λ‚˜, μ‚¬μš©μž λ™μ˜ 없이 μ€‘λ‹¨λ˜μ§€ μ•ŠλŠ”κ°€? 2.2.4 Interruptions (AAA) (WCAG 2.2)
  • νƒ€μž„μ•„μ›ƒμœΌλ‘œ 데이터 손싀이 λ°œμƒν•˜μ§€ μ•Šλ„λ‘ κ²½κ³ λ₯Ό μ œκ³΅ν–ˆλŠ”κ°€? 2.2.6 Timeouts (AAA) (WCAG 2.2)

2.3 λ°œμž‘ 유발 λ°©μ§€

  • 1μ΄ˆμ— 3회 이상 κΉœλΉ‘μ΄λŠ” μ½˜ν…μΈ κ°€ μ—†κ±°λ‚˜, μž„κ³„κ°’ μ΄ν•˜λ‘œ μ œν•œν–ˆλŠ”κ°€? 2.3.1 Three Flashes or Below Threshold (A)
  • μƒν˜Έμž‘μš©μœΌλ‘œ λ°œμƒν•˜λŠ” μ• λ‹ˆλ©”μ΄μ…˜μ„ μ‚¬μš©μžκ°€ λΉ„ν™œμ„±ν™”ν•  수 μžˆλŠ”κ°€? 2.3.3 Animation from Interactions (AAA) (WCAG 2.2)

2.4 탐색 κ°€λŠ₯μ„±

  • 반볡 μ½˜ν…μΈ λ₯Ό κ±΄λ„ˆλ›Έ 수 μžˆλŠ” "Skip Navigation" 링크λ₯Ό μ œκ³΅ν–ˆλŠ”κ°€? 2.4.1 Bypass Blocks (A)
  • νŽ˜μ΄μ§€ 제λͺ©μ΄ κ³ μœ ν•˜κ³  μ„€λͺ…적인가? 2.4.2 Page Titled (A)
  • 포컀슀 μˆœμ„œκ°€ 논리적이고 직관적인가? 2.4.3 Focus Order (A)
  • 링크의 λͺ©μ μ΄ λ¬Έλ§₯μ—μ„œ λͺ…ν™•ν•œκ°€? 2.4.4 Link Purpose (In Context) (A)
  • 닀쀑 탐색 방법(μ‚¬μ΄νŠΈλ§΅, 검색 λ“±)을 μ œκ³΅ν–ˆλŠ”κ°€? 2.4.5 Multiple Ways (AA)
  • 제λͺ©κ³Ό λ ˆμ΄λΈ”μ΄ λͺ…ν™•ν•˜κ³  일관적인가? 2.4.6 Headings and Labels (AA)
  • ν¬μ»€μŠ€κ°€ μ‹œκ°μ μœΌλ‘œ λ³΄μ΄λŠ”κ°€? 2.4.7 Focus Visible (AA)

2.5 μž…λ ₯ 방식

  • λ³΅μž‘ν•œ 제슀처 λŒ€μ‹  단일 포인터 λ™μž‘μœΌλ‘œ λŒ€μ²΄ κ°€λŠ₯ν•˜λ„λ‘ ν–ˆλŠ”κ°€? 2.5.1 Pointer Gestures (A)
  • 포인터 μž…λ ₯이 μ‹€μˆ˜λ‘œ μ‹€ν–‰λ˜μ§€ μ•Šλ„λ‘ μ·¨μ†Œ κ°€λŠ₯성을 μ œκ³΅ν–ˆλŠ”κ°€? 2.5.2 Pointer Cancellation (A)
  • λ ˆμ΄λΈ”κ³Ό ν”„λ‘œκ·Έλž˜λ°μ  이름이 μΌμΉ˜ν•˜λŠ”κ°€? 2.5.3 Label in Name (A)
  • λͺ¨μ…˜ 기반 μž…λ ₯(예: 흔듀기)이 ν•„μˆ˜κ°€ μ•„λ‹Œ 선택 사항인가? 2.5.4 Motion Actuation (A)

3. 이해 κ°€λŠ₯μ„± (Understandable)

μ‚¬μš©μžκ°€ μ½˜ν…μΈ μ™€ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‰½κ²Œ 이해할 수 μžˆλ„λ‘ 섀계.

3.1 가독성

  • νŽ˜μ΄μ§€μ˜ κΈ°λ³Έ μ–Έμ–΄κ°€ λͺ…μ‹œλ˜μ–΄ μžˆλŠ”κ°€? 3.1.1 Language of Page (A)
  • νŠΉμ • λΆ€λΆ„μ˜ μ–Έμ–΄κ°€ 변경될 경우 이λ₯Ό λͺ…μ‹œν–ˆλŠ”κ°€? 3.1.2 Language of Parts (AA)

3.2 예츑 κ°€λŠ₯μ„±

  • 포컀슀 μ‹œ 예기치 μ•Šμ€ λ³€ν™”κ°€ λ°œμƒν•˜μ§€ μ•ŠλŠ”κ°€? 3.2.1 On Focus (A)
  • μž…λ ₯ μ‹œ λ¬Έλ§₯이 예기치 μ•Šκ²Œ λ³€κ²½λ˜μ§€ μ•ŠλŠ”κ°€? 3.2.2 On Input (A)
  • λ‚΄λΉ„κ²Œμ΄μ…˜μ΄ λͺ¨λ“  νŽ˜μ΄μ§€μ—μ„œ 일관적인가? 3.2.3 Consistent Navigation (AA)
  • λ™μΌν•œ κΈ°λŠ₯의 μš”μ†Œκ°€ μΌκ΄€λ˜κ²Œ μ‹λ³„λ˜λŠ”κ°€? 3.2.4 Consistent Identification (AA)

3.3 μž…λ ₯ 도움

  • 였λ₯˜κ°€ λ°œμƒν•˜λ©΄ 이λ₯Ό λͺ…ν™•νžˆ 식별할 수 μžˆλŠ” λ©”μ‹œμ§€λ₯Ό μ œκ³΅ν–ˆλŠ”κ°€? 3.3.1 Error Identification (A)
  • μž…λ ₯ ν•„λ“œμ— λ ˆμ΄λΈ” λ˜λŠ” μ§€μ‹œλ¬Έμ„ μ œκ³΅ν–ˆλŠ”κ°€? 3.3.2 Labels or Instructions (A)
  • 였λ₯˜ λ°œμƒ μ‹œ μˆ˜μ • μ œμ•ˆμ„ μ œκ³΅ν–ˆλŠ”κ°€? 3.3.3 Error Suggestion (AA)
  • 법적/금육/데이터 κ΄€λ ¨ 였λ₯˜λ₯Ό λ°©μ§€ν•  μˆ˜λ‹¨(확인 단계 λ“±)을 μ œκ³΅ν–ˆλŠ”κ°€? 3.3.4 Error Prevention (Legal, Financial, Data) (AA)

4. 견고성 (Robust)

λ‹€μ–‘ν•œ 기술과 보쑰 λ„κ΅¬μ—μ„œ μ•ˆμ •μ μœΌλ‘œ μž‘λ™ν•˜λ„λ‘ 섀계.

4.1 ν˜Έν™˜μ„±

  • HTML/CSSκ°€ νŒŒμ‹± 였λ₯˜ 없이 μ˜¬λ°”λ₯΄κ²Œ μž‘μ„±λ˜μ—ˆλŠ”κ°€? 4.1.1 Parsing (A)
  • λͺ¨λ“  μš”μ†Œμ— 이름(Name), μ—­ν• (Role), κ°’(Value)이 ν”„λ‘œκ·Έλž˜λ°μ μœΌλ‘œ μ œκ³΅λ˜μ—ˆλŠ”κ°€? 4.1.2 Name, Role, Value (A)
  • μƒνƒœ λ©”μ‹œμ§€κ°€ 보쑰 기술둜 μ „λ‹¬λ˜λ„λ‘ μ„€κ³„λ˜μ—ˆλŠ”κ°€? 4.1.3 Status Messages (AA)

5. ν•œκ΅­ν˜• νŠΉν™” μš”κ΅¬μ‚¬ν•­

KS X OT0003:2022μ—μ„œ κ°•μ‘°λœ ν•œκ΅­ νŠΉν™” μš”κ΅¬μ‚¬ν•­μ„ 반영.

  • 반볡 μž…λ ₯ 정보 μ΅œμ†Œν™”: μ‚¬μš©μžκ°€ 반볡적으둜 μž…λ ₯ν•΄μ•Ό ν•˜λŠ” 정보λ₯Ό μ€„μ˜€λŠ”κ°€? (7.3.4)
  • 점근 κ°€λŠ₯ν•œ 인증: 인증 κ³Όμ •μ—μ„œ 보쑰 기술 μ‚¬μš©μžκ°€ μ ‘κ·Ό κ°€λŠ₯ν•˜λ„λ‘ μ„€κ³„ν–ˆλŠ”κ°€? (7.3.3)
  • κ΅­λ‚΄ 법적 μ€€μˆ˜: γ€Œμž₯애인 μ°¨λ³„κΈˆμ§€λ²•γ€ 및 γ€Œκ΅­κ°€μ •λ³΄ν™”κΈ°λ³Έλ²•γ€μ— λ”°λ₯Έ 의무 사항을 λ°˜μ˜ν–ˆλŠ”κ°€?
  • λͺ¨λ°”일 ν™˜κ²½ κ³ λ €: PC뿐만 μ•„λ‹ˆλΌ λͺ¨λ°”일 κΈ°κΈ°μ—μ„œμ˜ 접근성을 κ²€ν† ν–ˆλŠ”κ°€? (1 적용 λ²”μœ„)

μ‚¬μš© 방법

  • 각 μ»΄ν¬λ„ŒνŠΈ(λ²„νŠΌ, μž…λ ₯ ν•„λ“œ, λ‚΄λΉ„κ²Œμ΄μ…˜ λ“±)λ₯Ό 섀계할 λ•Œ 이 체크리슀트λ₯Ό μ°Έκ³ 
  • 체크리슀트 ν•­λͺ©μ„ ν•˜λ‚˜μ”© κ²€ν† ν•˜λ©° "예/μ•„λ‹ˆμ˜€"둜 ν™•μΈν•˜κ³ , λ―Έμ€€μˆ˜ ν•­λͺ©μ€ κ°œμ„  κ³„νš 수립
  • 개발 및 QA λ‹¨κ³„μ—μ„œ 슀크린 리더(NVDA, VoiceOver λ“±)와 ν‚€λ³΄λ“œ ν…ŒμŠ€νŠΈ 병행

참고 자료

Clone this wiki locally

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /