접근성 검사 도구

도구 선택 요약

브라우저 개발자 도구

가장 먼저 쓰는 도구입니다. 별도 설치 없이 요소의 이름·역할·상태를 바로 확인할 수 있습니다.

• Chrome·Edge — Elements 패널에서 요소를 선택하고 Accessibility 탭을 엽니다. 계산된 이름과 그 출처(aria-labelledby, aria-label, 콘텐츠 등), 역할, ARIA 속성 값이 표시됩니다. Enable full-page accessibility tree로 전체 트리를 볼 수 있고, 요소 선택 도구의 툴팁과 Styles 패널의 색 선택기에서 명도 대비를 확인할 수 있습니다. Rendering 패널에서 색각 이상, prefers-reduced-motion, 다크 모드도 흉내 낼 수 있습니다.
• Firefox — 접근성 패널에서 전체 트리와 “문제 검사”(대비, 키보드, 텍스트 레이블), 탭 순서 표시 기능을 제공합니다.
• Safari — 웹 속성 보기의 요소 탭 → 노드 사이드바 → 접근성 항목에서 역할·이름·상태를 확인합니다. VoiceOver와 함께 쓸 때 유용합니다.

자세한 사용법은 접근성 트리와 접근성 API 문서의 “개발자 도구로 접근성 트리 보기”를 참고하세요.

axe DevTools

axe DevTools는 Deque Systems의 브라우저 확장입니다. 오픈 소스 검사 엔진 axe-core를 사용하며, 확실한 위반만 보고하도록 설계되어 오탐이 적은 편입니다.

1. 확장을 설치하고 개발자 도구에서 axe DevTools 탭을 엽니다.
2. 전체 페이지 검사를 실행합니다. 메뉴를 펼치거나 대화상자를 연 상태에서 다시 검사하면 숨어 있던 요소도 검사됩니다.
3. 결과마다 위반 규칙, 영향도(critical·serious·moderate·minor), 해당 요소, 수정 방법, 관련 WCAG 성공 기준이 표시됩니다.

ARIA와 관련해 자주 보이는 규칙은 다음과 같습니다.

axe-core는 자동화 테스트에도 쓸 수 있습니다.

// Playwright + @axe-core/playwright 예
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('메인 페이지에 자동 검출 가능한 접근성 위반이 없다', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

WAVE

WAVE(Web Accessibility Evaluation Tool)는 WebAIM이 만든 무료 도구입니다. 웹 사이트에 주소를 넣거나 브라우저 확장을 실행하면 페이지 위에 아이콘이 표시됩니다.

• Errors(빨강) — 대체 텍스트 없는 이미지, 이름 없는 버튼처럼 거의 확실한 문제
• Contrast Errors — 명도 대비 부족
• Alerts(노랑) — 확인이 필요한 의심 항목(중복 링크, 제목 수준 건너뜀 등)
• Features·Structural Elements·ARIA — 대체 텍스트, 제목, 랜드마크, ARIA 사용 위치를 보여 줍니다. 오류가 아니라 검토용 정보입니다.

WAVE의 Structure·Order 탭과 “Styles 끄기” 기능은 CSS 없이 읽기 순서와 제목·랜드마크 구조를 검토할 때 특히 유용합니다.

Lighthouse

Chrome 개발자 도구의 Lighthouse 패널에서 “접근성(Accessibility)” 범주를 선택해 실행합니다. axe-core의 일부 규칙을 사용해 0~100점의 점수를 매깁니다.

국내 검사 도구

국내 웹 접근성은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 평가합니다. KWCAG 항목에 맞춰 만들어진 도구는 다음과 같습니다.

• K-WAH — 한국정보화진흥원(현 한국지능정보사회진흥원, NIA)이 개발·보급한 한국형 웹 접근성 자동 평가 도구입니다. 대체 텍스트, 제목, 기본 언어, 새 창 열림 알림, 레이블, 마크업 문법처럼 기계적으로 판정할 수 있는 일부 항목을 사이트 단위로 점검합니다. 버전이 오래되어 최신 KWCAG 2.2 전 항목을 다루지는 않습니다.
• OpenWAX — 오픈 소스 웹 접근성 점검 브라우저 확장입니다. 대체 텍스트, 명도 대비, 표, 제목, 링크 텍스트, 레이블, 페이지 제목 같은 정보를 한 화면에 모아 보여 주어 수동 검사를 돕습니다.
• 품질인증 기관의 점검 서비스 — 국내 웹 접근성 품질인증 기관과 공공기관 진단 사업은 도구 결과에 더해 전문가 수작업 평가와 장애인 사용자 평가를 함께 합니다.

자동 검사의 한계

자동 검사는 빠르고 반복하기 쉽지만, 일반적으로 전체 접근성 문제의 일부(조사와 도구에 따라 대략 3분의 1에서 절반 남짓)만 찾아냅니다. 다음과 같은 문제는 사람이 판단해야 합니다.

<img src="chart.png" alt="이미지">
<button aria-label="버튼">…</button>
<div role="button" tabindex="0">저장</div>  <!-- 키보드 처리 없음 -->

<img src="chart.png" alt="2025년 분기별 매출: 1분기 12억, 2분기 15억, 3분기 18억">
<button aria-label="검색">…</button>
<button type="button">저장</button>