TIL: iOS vs HTML 접근성(Accessibility) 비교 🌈

1. iOS (Swift) 접근성 📱

private func setupAccessibility() {
    cancelButton.accessibilityLabel = "주문 취소하기"
    paymentButton.accessibilityLabel = "결제 진행하기"
    totalQuantityLabel.accessibilityLabel = "총 주문 수량"
    totalAmountLabel.accessibilityLabel = "총 결제 금액"
}

2. HTML 접근성 💻

<!-- 버튼에 aria-label 추가 -->
<button aria-label="주문 취소하기">취소</button>
<button aria-label="결제 진행하기">결제</button>

<!-- 이미지에 대체 텍스트 추가 -->
<img src="product.jpg" alt="빨간색 티셔츠">

<!-- 역할 정의 -->
<div role="alert">결제가 완료되었습니다!</div>

<!-- 숨겨진 설명 추가 -->
<span class="visually-hidden">총 주문 수량:</span>
<span>3개</span>

3. 주요 차이점 🔍

구현 방식 ⚙️

• iOS: accessibilityLabel 프로퍼티 사용
• HTML: aria-label, alt, role 등 다양한 속성 사용

스크린리더 🔊

• iOS: VoiceOver가 기본 제공
• HTML: 다양한 스크린리더(NVDA, VoiceOver, JAWS 등) 지원

표준화 📋

• iOS: Apple의 가이드라인 따름
• HTML: WCAG(웹 콘텐츠 접근성 지침) 표준 따름

4. 공통점 🤝

1. 시각장애인을 위한 텍스트 설명 제공 👀
2. 키보드 네비게이션 지원 ⌨️
3. 명확한 레이블링의 중요성 🏷️
4. 사용자 경험 향상 목적 ✨

5. 테스트 방법 🧪

iOS 📱

1. 설정 → 접근성 → VoiceOver 활성화
2. 앱 실행 후 제스처로 테스트

HTML 🌐

1. 스크린리더 설치 (예: NVDA)
2. 웹페이지에서 탭 키와 방향키로 이동하며 테스트
3. Chrome의 Lighthouse로 접근성 점수 확인

6. 모범 사례 ⭐

• 의미 있는 레이블 사용 📝
• 충분한 색상 대비 🎨
• 키보드 접근성 보장 ⌨️
• 동적 콘텐츠 업데이트 시 알림 제공 🔔

7. 결론 🎯

두 플랫폼 모두 접근성이 매우 중요하며, 각자의 방식으로 구현하지만 목적은 동일합니다. 모든 사용자가 콘텐츠에 접근할 수 있도록 하는 것이 핵심입니다! 💝

8. 참고할 만한 자료 📚

• Apple Accessibility Guidelines 🍎
• WCAG Guidelines 🌐
• MDN Accessibility Guide 📖

#iOS #HTML #Accessibility #WebDevelopment #SwiftUI #ARIA 🏷️