axe DevTools 사용법 가이드 (크롬 확장 프로그램 기준)

axe DevTools는 디지털 접근성 검사 도구로, 크롬 개발자 도구(DevTools)에 통합되어 웹사이트의 접근성 문제를 자동으로 탐지할 수 있습니다.

HTML 구조나 WAI-ARIA 속성, 색 대비, 버튼 레이블 등 다양한 웹접근성 기준을 검사해줍니다.
 

1. 설치 방법

1. 크롬 웹스토어에서 "axe DevTools" 검색
2. "axe DevTools – Web Accessibility Testing" 확장 프로그램 설치
    

2. 사용 방법

① 검사 대상 웹사이트 열기

웹접근성을 검사할 웹페이지를 크롬 브라우저로 엽니다.

② 개발자 도구 열기

• F12 키 또는 Ctrl + Shift + I
• 또는 마우스 우클릭 → “검사”

③ axe 탭 실행

1. DevTools(검사창) 상단 메뉴에서 “axe DevTools” 탭 클릭
   • 안 보일 경우 >> 클릭해서 확장 탭에서 찾기
2. 탭 안에서 “Full Page Scan” 버튼 클릭

④ 접근성 검사 결과 확인

• 결과는 아래 3가지로 분류되어 나옵니다:
  • Violations: 접근성 오류 (가장 중요)
  • Needs review: 수동 확인 필요
  • Best practices: 권장사항

⑤ 상세 내용 확인 및 해결 방법 보기

각 항목을 클릭하면 다음 정보를 확인할 수 있습니다:

• 문제가 발생한 HTML 요소
• 문제 설명
• WCAG 기준
• 해결 방법 (How to fix)