728x90 300x250 SMALL 앱접근성6 Figma 디자인 단계 접근성 체크리스트(퍼블리셔/디자이너 협업용) 체크 항목설명기준 또는 툴텍스트 대비텍스트와 배경의 명도 대비가 충분한가?WCAG AA 기준(4.5:1이상)폰트 크기최소 14px 이상인가?기본 텍스트는 16pc 추천UI 크기버튼, 체크박스 등은 최소 44~48px모바일 기준포커스 순서시각적 구조와 논리적 포커스 순서가 일치하는가?디자인 흐름 확인아이콘 설명의미 있는 아이콘에는 텍스트 라벨 또는 aria-label이 존재하는가?예 : 돋보기 아이콘에 "검색"상태 구분색상 외의 방법으로 상태를 구분하고 있는가?예 : 체크 표시, 밑줄 등모션과도한 모션 없는지, prefers-reduced-motion 대응 고려했는지Web: CSS, App: OS설정 Figma 디자인 검토할 때 디자이너가 자체적으로 체크하거나 퍼블리셔가 검수 시 체크 포인트로 사용할 수 .. 2025. 4. 16. 시스템 설정에 따라 애니메이션 제한 하기 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. 웹접근성 체크, 명도 대비 비율 계산 이렇게 확인하세요! 웹접근성 명도대비 체크 도구 주소https://webaim.org/resources/contrastchecker/ Resources > Contrast Checker This tool requires Javascript. Contrast Ratio permalink Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interfa" data-og-host="webaim.org" data-og-source-url="https://webaim.org/resources/contrastchecker/" data-og-url="https://.. 2025. 4. 12. 이전 1 2 다음 728x90 반응형 LIST
