728x90 300x250 SMALL 웹접근성10 웹접근성 진단문서 1. 웹접근성 진단 문서란?웹 사이트가 장애인이나 고령자도 사용할 수 있는 구조로 되어 있는지 점검하고, 웹접근성 지침(KWCAG 2.1 기준)에 부함하지 않는 부분을 찾아내고 기록하는 문서 2. 진단 문서의 목적웹 사이트가 웹접근성 기준을 얼마나 잘 준수하고 있는지 평가하기 위해이후 개선 방향을 세우기 위해나중에 실제 인증 심사나 외부 감사에 앞서 사전 점검하는 역할도 있음프로젝트 진행 중 근거 자료 및 커뮤니케이션 문서로도활용 3. 진단 문서에 들어가는 주요 내용 (보통 엑셀이나 문서 양식으로 작성)No페이지/기능지침 항목진단 결과문제 설명1메인 페이지1.1 대체 텍스트 제공미준수로고 이미지에 alt값 없음2게시판 목록2.1 키보드 사용 가능준수tab 이동 순서 적절3팝업창3.2 명확한 지시 제공미.. 2025. 6. 7. 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. 웹접근성 체크, 명도 대비 비율 계산 이렇게 확인하세요! 웹접근성 명도대비 체크 도구 주소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 3 다음 728x90 반응형 LIST
