웹 접근성 진단을 위한 프로그램 및 사이트
웹 접근성 진단을 위한 프로그램 및 사이트를 소개합니다!
1. Colour Contrast Analyser (CCA)
- 텍스트와 그래픽/배경 이미지의 명도 대비를 체크해주는 프로그램
- 스포이드 도구를 사용하여 두 색상의 명암비를 쉽게 결정할 수 있는 TPGi의 무료 색상 대비 검사기 도구
- WCAG (웹 콘텐츠 접근성 지침)
- WCAG 2.0 레벨 AA는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1의 명암비 필요
- WCAG 2.1은 그래픽 및 사용자 인터페이스 구성 요소에 대해 최소 3:1의 명암비 필요
- WCAG 레벨 AAA는 일반 텍스트의 경우 최소 7:1, 큰 텍스트의 경우 4.5:1의 명암비 필요
Colour Contrast Analyser (CCA)
Colour Contrast AnalyserThe Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
developer.paciellogroup.com
2. KWCAG a11y inspector
- 컨트롤의 대각선 길이를 측정해주는 프로그램
- 크롬 웹 스토어에서 설치 가능
- 웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현
kwcag a11y inspector
kwcag 2.1.3 test
chrome.google.com
3. OpenWAX
- 접근성을 자동으로 진단해주는 프로그램
- 크롬 웹 스토어에서 설치 가능
- 자동 진단이 정확하지는 않아 수동 진단 병행 필요
OpenWAX
OpenWAX(Open Web Accessibility eXtension) is a tool that can help diagnose and fix the accessibility problem.
chrome.google.com
HTML 마크업 및 CSS 문법 확인 사이트
1. W3C Validation
- 웹표준을 검사하는 사이트
- 접근성 오류, 특히 마크업 오류 확인 시 많이 사용
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
2. HTML5 마크업 검증
The W3C Markup Validation Service
파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사
validator.kldp.org
Validator.nu (X)HTML5 Validator - Nu Html Checker
This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change Validator.nu (X)HTML5 Validator (Living Validator)
html5.validator.nu
3. CSS 마크업 검증
CSS Validation Service
www.css-validator.org
웹 접근성에 대한 내용 참조 : eduwith 부스트코스
'Web design > Article' 카테고리의 다른 글
| UX 데이터 분석 관련 용어 (0) | 2022.06.17 |
|---|---|
| UX 디자인 프로세스와 리서치 방법 (0) | 2020.11.09 |
| 모바일 사용자 인터페이스 : 터치 제스처 및 영역 (0) | 2020.09.16 |
| UI/UX 용어 : 실무에서 꼭 알아야 할 핵심 용어 가이드 (0) | 2020.09.15 |
| 반응형 레이아웃 그리드 : 머티리얼 디자인 (2) | 2020.09.11 |
