HTML_웹 접근성

SMALL

[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

https://chromewebstore.google.com/detail/kwcag-a11y-inspector/ngcmkfaolkgkjbddhjnhgoekgaamjibo?hl=ko&pli=1

kwcag a11y inspector

kwcag 2.1.3 test

chrome.google.com

(3) 자동 재생 금지

(4) 깜빡임, 번쩍임 사용 제한

...등등

[3] 웹 표준 테스트

(1)W3C Validation

https://validator.w3.org/

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) 웹 접근성 자가진단 서비스

https://accessibility.kr/

Accessibility Korea

웹 접근성 진단 서비스 Web Accessibility Evaluation Service 페이지 진단 검사할 페이지의 URL을 엔터로 구분해서 입력해 주세요. 이 도구의 한계 자바스크립트나 CSS를 이용하여 브라우저에서 동적으로

accessibility.kr

(3) 명도대비 확인사이트