Blog

axe DevTools#

axe DevTools는
웹 페이지의 접근성 상태를 간단하게 확인할 수 있는 브라우저 확장 프로그램이다.

페이지에서 바로 실행하면,
접근성 관련 문제를 항목별로 알려준다.

간단한 사용 방법#

1. 브라우저 확장 프로그램에서 axe DevTools를 설치하고,
   개발자 도구를 열면 axe DevTools 탭이 추가된다.

2. 탭을 클릭하면 아래 첫 번째 화면이 보인다.
   여기서 Full Page Scan을 클릭하면 현재 페이지 전체를 점검할 수 있다.

3. 스캔이 끝나면 이슈 수와 함께,
   어떤 문제가 있는지에 대한 설명이 표시된다.

4. Highlighted 버튼을 클릭하면,
   해당 이슈가 적용된 요소가 화면에서 바로 표시된다.

이런 경우에 한 번씩 쓴다#

• UI를 만들고 나서 한 번 점검해보고 싶을 때
• 접근성 이슈가 있을 수 있겠다는 생각이 들 때
• 웹사이트나 앱의 접근성을 빠르게 확인하고 싶을 때

접근성 관련 설정이나 마크업이 거의 없는 경우에는
axe DevTools에서 감지되는 이슈가 많지 않을 수도 있다.

전문적인 진단보다는,
놓친 부분이 있는지 확인하는 용도에 가깝다.

유료 플랜#

axe DevTools는 유료 플랜이 있다.
다만 기본적인 접근성 점검은 무료 플랜으로도 충분하다.
이 글에 사용한 기능들도 전부 무료 플랜 기준이다.

바로가기#

• axe DevTools