[1] 웹 접근성
(1) 웹 접근성
장애인, 비장애인 이용자, pc 등 장비에 관계없이 이용할수 있는 웹 정보를 구성하는 것
[2] 웹 접근성 적용 방법
(1) alt 적절한 텍스트 명시
title은 참고의 의미로 alt 대신 사용하지 않는다.
<img class="fit-picture" src="/resources/cat.jpg" alt="풀밭에서 고양이가 뛰어노는 모습"/>
<area sshape="rect" coords="10,5,66,19" href="/en/" alt="English">
<input type="image" src="btn_writ.gif" alt="글쓰기" />
<button type="button" title="메뉴 열기" aria-label="메뉴 열기">(2) 콘텐츠 명도 대비
명도대비 4.5 : 1
명도대비 3:1
명도대비 점검 사이트
https://webaim.org/resources/contrastchecker/
WebAIM: Contrast Checker
Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interface Components image/svg+x
webaim.org
https://developer.paciellogroup.com/color-contrast-checker/
Colour Contrast Analyzer - TPGi
TPGi's ADA Color Contrast Checker helps determine the accessibility of the contrast ratio of two colors for WCAG AA and AAA.
www.tpgi.com
kwcag a11y inspector
kwcag 2.1.3 test
chrome.google.com
(3) 자동 재생 금지
(4) 깜빡임, 번쩍임 사용 제한
...등등
[3] 웹 표준 테스트
(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
[4] 웹 접근성 인증 마크
(1) 인증기관
웹와치
한국웹접근성인증평가원
한국웹접근성평가센터
(2) 웹 접근성 자가진단 서비스
Accessibility Korea
웹 접근성 진단 서비스 Web Accessibility Evaluation Service 페이지 진단 검사할 페이지의 URL을 엔터로 구분해서 입력해 주세요. 이 도구의 한계 자바스크립트나 CSS를 이용하여 브라우저에서 동적으로
accessibility.kr
(3) 명도대비 확인사이트
https://webaim.org/resources/contrastchecker/
WebAIM: Contrast Checker
Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interface Components image/svg+x
webaim.org
참고
'🌈 웹 퍼블리싱 > HTML' 카테고리의 다른 글
| HTML_반응형 웹 (58) | 2023.12.20 |
|---|---|
| CSS_웹호환성 + 크로스 브라우징 (12) | 2023.12.20 |
| HTML_웹표준 + 시멘틱 요소 (12) | 2023.12.20 |
| HTML_파비콘 (18) | 2023.12.19 |
| HTML_오픈 그래프 프로토콜_웹페이지 미리보기 (4) | 2023.12.19 |
댓글