728x90 300x250 SMALL Front-end/웹접근성4 웹접근성 체크, 명도 대비 비율 계산 이렇게 확인하세요! 웹접근성 명도대비 체크 도구 주소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. 모바일 앱 접근성 체크리스트 (2025 기준) 항목체크사항참고사항폰트 크기 대응시스템 설정의 글자 크기 변경 시 앱 내 텍스트도 함께 커지나요?sp단위(Android), Dynamic Type(iOS)사용명도 대비텍스트 vs 배경 색상 대비가 WCAG기준 이상인가요?일반 텍스트 4.5:1 이상, 큰 텍스트 3.0:1 이상스크린 리더 대응VoiceOver / TalkBack 사용 시 UI 요소가 정확하게 읽히나요?버튼, 이미지에 라벨 부여 필수포커스 순서스크린리더 포커스 이동이 논리적 순서로 되어 있나요?시각 흐름에 맞게 이동해야 함버튼/터치 크기버튼/터치 가능한 영역이 최소 48X48dp 이상인가요?실제 누르기 쉬운지 확인자막/대체 텍스트이미지, 동여상에 적절한 대체 텍스트나 자막이 있나요?contentDescription, accessibility.. 2025. 4. 11. 모바일 앱 접근성이란? 모바일 앱 접근성은 장애가 있는 사용자도 앱의 기능을 원활히 사용할 수 있도로 설계하는 것을 말한다.이는 시각, 청각, 지체장애 등을 가진 사용자들이 앱을 사용하는 데 불편함이 없도록 UI/UX를 개선하고 기술적으로 지원하는 작업을 포함한다.접근성은 단순한 배려를 넘어, 모든 사용자를 위한 보편적 디자인을 실현하는 중요한 요소이다.특히 국내외 법적 기준 및 가이드라인(WCAG, ADA 등)에 따라 접근성 확보가 요구되기도 한다. 모바일 앱 접근성의 주요 요소1. 스크린 리더 지원시각장애인을 위한 기능으로, 화면의 텍스트와 버튼 등을 음성으로 읽어주는 기능Android는 TalkBack, iOS는 VoiceOver를 제공한다.2. 명확한 시각적 대비텍스트와 배경 사이의 대비가 낮으면 시력이 낮은 사용자.. 2025. 4. 10. 웹접근성을 높이는 ARIA 속성 완벽 가이드 1. ARIA란 무엇인가?ARIA는 웹접근성을 개선하기 위한 HTML속성으로, 스크린 리더 같은 보조기기가 웹페이지를 더 쉽게 이해하도록 돕는 역할을 합니다.예를 들어, 버튼이 태그로 만들어져 있을 경우, 보조기기는 이를 버튼으로 인식하지 못하지만, role="button"을 추가하면 버튼으로 인식할 수 있다.클릭하세요 2. ARIA 속성의 주요 역할ARIA 속성은 크게 역할(Role), 속성(Properties), 상태(States)로 나뉜다.속성설명예제aria-label직접 라벨을 지정Xaria-labelledby다른 요소를 참조하여 라벨 지정aria-describedby보조 설명을 추가role요소의 역할을 명확하게 지정버튼aria-live실시간 업데이트되는 콘텐츠 설정업데이트됨aria-hidd.. 2025. 4. 6. 이전 1 다음 728x90 반응형 LIST
