728x90 300x250 SMALL Front-end/웹접근성8 Figma 디자인 단계 접근성 체크리스트(퍼블리셔/디자이너 협업용) 체크 항목설명기준 또는 툴텍스트 대비텍스트와 배경의 명도 대비가 충분한가?WCAG AA 기준(4.5:1이상)폰트 크기최소 14px 이상인가?기본 텍스트는 16pc 추천UI 크기버튼, 체크박스 등은 최소 44~48px모바일 기준포커스 순서시각적 구조와 논리적 포커스 순서가 일치하는가?디자인 흐름 확인아이콘 설명의미 있는 아이콘에는 텍스트 라벨 또는 aria-label이 존재하는가?예 : 돋보기 아이콘에 "검색"상태 구분색상 외의 방법으로 상태를 구분하고 있는가?예 : 체크 표시, 밑줄 등모션과도한 모션 없는지, prefers-reduced-motion 대응 고려했는지Web: CSS, App: OS설정 Figma 디자인 검토할 때 디자이너가 자체적으로 체크하거나 퍼블리셔가 검수 시 체크 포인트로 사용할 수 .. 2025. 4. 16. 하이브리등 앱 접근성 체크 퍼블리셔? 네이티브? 프론트? 하이브리드 앱에서의 접근성 점검을 누가 어디까지 해야 하느지는 퍼블리셔/ 프론트엔드/네이티브 개발자 간의 협업에 따라 명확히 나눠야 한다.아래는 퍼블리셔 / 네이티브 개발자 각 영역에서 앱 접근성 체크 리스트를 정리해 보았다. 항목퍼블리셔 확인네이티브 개발 확인비고HTML 시맨틱 구조(button, label, aria-* 등)✅❌웹뷰 안에서 웹 구조 직접 제어 가능시각적 대비/명도 (색상 대비)✅❌CSS 기준폰트 크기 대응(rem, em, %, sp)✅❌기본값은 웹에서 설정하고 하이브리드 앱에서는 시스템 설정 반영되려면 네이티브 연동이 필요스크린 리더(TalkBack/VoiceOver)에서 읽히는 라벨✅✅퍼블리셔는 aria-label, alt등 확인 /네이티브는 웹뷰 설정이 적절하지 확인 필요터치 영역.. 2025. 4. 15. 시스템 설정에 따라 애니메이션 제한 하기 iOS, 웹, 안드로이드 감각에 민감한 사용자들은 화면의 과도한 애니메이션, 전환 효과, 번쩍임 등에 불편을 느낄 수 있다.그래서 OS에서 "애니메이션 줄이기" 기능을 제공하고 앱이 이 설정을 따라서 애니메이션을 줄여줘야 한다.iOS 에서는?시스템 설정 : 설정 > 손쉬운 사용 > 동작 > 동작 줄이기이 설정을 켜면, 앱페이지 전환 애니메이션, 파티클 효과 등 불필요한 움직임을 줄요야 한다.Swift 대응 방법 (iOS)if UIAccessibility.isReduceMotionEnabled { // 애니메이션 없는 대체 처리 myView.alpha = 1} else { // 원래 애니메이션 처리 UIView.animate(withDuration: 0.5) { myView.alpha = 1 .. 2025. 4. 14. [앱접근성] UI 요소 순서가 논리적인지 파악하기 스크린리더(VoiceOver, TalkBack)는 화면을 시각적으로 보지 않고, 요소들을 하나씩 읽어주며 탐색한다.그래서 탐색 순서가 논리적이어야 한다. 예시1: 로그인 화면UI 요소(시각 순서)스크린리더 읽기 순서( ❌ 잘못된 예)1. 이메일 입력창1. 로그인 버튼2. 비밀번호 입력창2.이메일 입력창3. 로그인 버튼3. 비밀번호 입력창 UI 시각 순서 대로 이메일 -> 비밀번호 -> 로그인 버튼 순서로 읽혀야 하지만 그렇지 않을 경우 사용자 혼란!예시 2: 카드형 UI리스트[🔍검색창][📰 뉴스 제목1][📷 이미지] [📝 설명][❤️ 좋아요 버튼]스크린리더가 읽을 때도 뉴스제목 -> 이미지 -> 설명 -> 좋아요 버튼 이런 순서로 정보 흐름이 자연스러워야 한다.개발 팁(Android)XML에서 .. 2025. 4. 13. 이전 1 2 다음 728x90 반응형 LIST