728x90 300x250 SMALL 웹접근성11 웹접근성을 고려한 아코디언 코드 - 1 웹접근성을 고려한 아코디언 코드 html Personal Information Name*: Email*: Phone: Extension: Country: City/Province: .. 2025. 7. 12. 웹접근성 진단문서 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. 이전 1 2 3 다음 728x90 반응형 LIST