웹 콘텐츠 접근성 견고성 - by. UXKM

2025-05-16

요약 설명
kwcag 2.2 원칙을 구현하기 위해 14개의 지침을 따라야 하고, 각 지침의 준수 여부를 확인하기 위해 33개의 검사 항목을 마련해야 합니다.
검사 항목은 구체적인 테스트가 가능한 기준을 제공하여 웹사이트가 원칙 및 지침을 준수하고 있는지 확인하는 데 사용됩니다.
지능정보화기본법 시행규칙 일부개정령(안) 입법예고에 따라 ‘24.9.1부터 심사기준이 변경되며 이에따라 kwcag 2.2 기준으로 체크리스트를 제공합니다.

마크업 오류 방지

요약 설명
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 합니다.
HTML 마크업 언어에서 요소는 열고 닫아야 하며, 중첩 관계 및 속성 선언이 정확해야 합니다. 이를 통해 문서의 구조를 올바르게 유지하고, 브라우저가 페이지를 정확하게 렌더링할 수 있도록 합니다.

HTML5 스펙 문서 : HTML5 Specification

예시

								<!-- 잘못된 예시 1 : <p> 요소가 닫히지 않아 마크업 오류가 발생 -->
								<p>Welcome to our website

								<!-- 올바른 예시 1 : 요소를 열고 닫는 마크업 -->
								<p>Welcome to our website</p>

								<!-- 잘못된 예시 2 :  요소의 중첩이 잘못되어 있는 경우 -->
								<div>
									<p>This is a paragraph.
									<div>This is inside a div.____error__</p>__error____
								____error__</div>__error____

								<!-- 올바른 예시 2 : 요소의 중첩을 올바르게 하여 구조를 유지 -->
								<div>
									<p>This is a paragraph.</p>
									<div>This is inside a div.</div>
								</div>

마크업 오류 방지에 대한 예시는 UXKM의 요소 중첩 페이지에서 자세하게 설명되어 있습니다.
UXKM의 요소 중첩 바로가기

검수 방법

HTML Validator 사용
W3C HTML Validator와 같은 도구를 사용하여 마크업 오류를 자동으로 검수하였는가?
브라우저 개발자 도구 사용
브라우저의 개발자 도구(예: Chrome DevTools)를 사용하여 HTML 구조를 확인하였는가?
수동 검사
HTML 코드를 수동으로 검토하여 태그의 열고 닫음, 중첩 관계, 속성 선언을 확인하였는가?

웹 애플리케이션 접근성 준수

요약 설명
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 합니다.
웹사이트, 도구, 기술이 장애를 가진 사람들도 포함하여 모든 사용자에게 접근 가능하도록 설계되는 것을 의미합니다.

웹 콘텐츠 접근성 지침(WCAG) 개요 : WCAG 2 Overview
WCAG 2.2 Guidelines : WCAG 2.2

잘못된 예시 1

버튼에 대체 텍스트가 없어 스크린 리더 사용자에게 혼란을 줄 수 있습니다.

								<button onclick="submitForm()">Submit</button>

올바른 예시 1

aria-label 속성을 사용하여 스크린 리더 사용자에게 버튼의 용도를 설명합니다.

								<button onclick="submitForm()" aria-label="Submit form">Submit</button>

잘못된 예시 2

버튼의 상태 변화(예: 메뉴 열림/닫힘)에 대한 정보를 제공하지 않은 경우, 사용자는 버튼의 현재 상태를 알기 어려워 사용성에 문제가 생길 수 있습니다.

								<button onclick="submitForm()" aria-label="Submit form">Submit</button>

올바른 예시 1

aria-expanded와 aria-controls 속성을 사용하여 버튼 상태와 관련된 정보를 제공합니다.

								<button onclick="toggleMenu()" aria-expanded="false" aria-controls="menu">Menu</button>
								<nav id="menu" hidden>
									<!-- Menu content -->
								</nav>

								<script>
									function toggleMenu() {
										const button = document.querySelector('button');
										const menu = document.getElementById('menu');
										const expanded = button.getAttribute('aria-expanded') === 'true' || false;

										button.setAttribute('aria-expanded', !expanded);
										menu.hidden = expanded;
									}
								</script>

검수 방법

자동화 도구 사용
접근성 자동화 검사 도구(예: Axe, WAVE)를 사용하여 페이지를 분석하고 문제점을 발견하였는가?
스크린 리더 테스트
NVDA, JAWS와 같은 스크린 리더를 사용하여 웹 애플리케이션이 제대로 읽히는지 확인하였는가?
키보드 네비게이션 테스트
마우스 없이 키보드만으로 웹 애플리케이션을 사용할 수 있는지 확인하였는가?
색 대비 검사
텍스트와 배경 색상의 대비가 충분한지 확인하였는가?
수동 검사
WCAG 지침을 참고하여 수동으로 접근성을 검토하였는가?

마크업 오류 방지

예시

검수 방법

웹 애플리케이션 접근성 준수

잘못된 예시 1

올바른 예시 1

잘못된 예시 2

올바른 예시 1

검수 방법

웹 접근성 요약 보고서 예시