Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
axe-core는 웹사이트 및 HTML 기반 UI의 접근성 테스트를 위한 엔진입니다. WCAG 2.0, 2.1, 2.2 등 다양한 레벨의 규칙을 포함하며, 일반적인 기능 테스트와 함께 접근성을 자동화할 수 있게 합니다. 이 도구를 사용하면 평균적으로 WCAG 문제의 57%를 자동으로 찾아낼 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 개발 자료 GitHub · 505f08fd의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기License
Version
NPM downloads
Commits
GitHub contributors
Join our Slack chat
Package Quality
Axe는 웹사이트 및 기타 HTML 기반 사용자 인터페이스를 위한 접근성 테스트 엔진입니다. 빠르고, 안전하며, 가볍고, 기존의 모든 테스트 환경과 원활하게 통합되도록 구축되어 사용자가 일반적인 기능 테스트와 함께 접근성 테스트를 자동화할 수 있습니다.
axe-core는 WCAG 2.0, 2.1, 2.2의 레벨 A, AA 및 AAA에 대한 다양한 유형의 규칙을 가지고 있을 뿐만 아니라, 모든 페이지에 h1 제목이 있는지 확인하는 것과 같이 일반적인 접근성 모범 사례를 식별하고 사용자가 사용한 ARIA 속성이 무시되는 경우와 같은 ARIA의 "함정(gotchas)"을 피하도록 돕는 여러 가지 모범 사례를 제공합니다. WCAG 레벨 및 모범 사례별로 그룹화된 전체 규칙 목록은 doc/rule-descriptions.md에서 확인할 수 있습니다.
axe-core를 사용하면 평균적으로 WCAG 문제의 57%를 자동으로 찾을 수 있습니다. 또한, axe-core가 확실하지 않아 수동 검토가 필요한 요소는 "incomplete"로 반환합니다.
개발 주기의 더 이른 단계에서 버그를 포착하려면 axe-linter vscode extension 사용을 권장합니다. 테스트 커버리지를 더욱 개선하려면 axe Extension의 intelligent guided tests를 사용을 권장합니다.
먼저 패키지를 다운로드합니다:
npm install axe-core --save-dev
또는 pnpm을 사용하는 경우:
pnpm add --save-dev axe-core
이제 fixture 또는 테스트 시스템의 모든 iframe에 javascript 파일을 포함시키세요:
<script src="node_modules/axe-core/axe.min.js"></script>
새로운 UI 요소가 표시되거나 노출되는 테스트 지점마다 호출을 삽입하세요:
axe
.run()
.then(results => {
...
웹이 접근 가능하고 포용적인 공간이 되려면 개발자가 접근성 테스트와 접근 가능한 코딩 관행에 대한 책임을 지도록 역량이 부여되어야 합니다.
자동화된 접근성 테스트는 엄청난 시간 절약 효과를 가져오며, 특별한 전문 지식이 필요하지 않고, 팀이 정말로 필요한 접근성 문제에 전문가 자원을 집중할 수 있게 해줍니다. 불행하게도 대부분의 접근성 도구는 개발 프로세스를 거친 웹사이트와 애플리케이션에서 실행되도록 설계되었으며, 종종 명확하거나 일관된 결과를 제공하지 못해 좌절감과 지연을 초래합니다. 이는 제품이 출하 준비가 되었다고 생각했을 때 발생하기 쉽습니다.
Axe는 실제 웹 개발 방식이 작동하는 방식을 반영하여 구축되었습니다. 모든 최신 브라우저, 도구, 그리고 개발팀이 사용할 수 있는 테스트 환경에서 작동합니다. Axe를 사용하면 접근성 테스트를 단위 테스트(unit testing), 통합 테스트(integration testing), 브라우저 테스트(browser testing) 및 팀이 일상적으로 수행하는 다른 모든 기능 테스트의 일부로 수행할 수 있습니다. 접근성 테스트를 초기 개발 프로세스에 통합하는 것은 시간, 자원, 그리고 모든 종류의 좌절감을 절약해 줍니다.
axe-core API는 다음 브라우저를 완벽하게 지원합니다:
지원한다는 것은 해당 브라우저의 버그를 수정하고 정기적으로 테스트를 시도하겠다는 의미입니다. 현재는 Chrome과 Firefox에 대해서만 모든 풀 리퀘스트(pull request)에서 테스트가 진행됩니다.
JSDOM에 대한 지원은 제한적입니다. 모든 규칙이 JSDOM과 호환되도록 노력할 것이지만, 불가능한 경우 해당 규칙을 비활성화하는 것을 권장합니다. 현재 color-contrast 규칙은 JSDOM에서 작동하지 않는 것으로 알려져 있습니다.
우리는 기능이 네이티브로 지원되거나 폴리필(polyfilled) 방식으로 올바르게 구현된 환경만 지원할 수 있습니다. 사용 중단된 v0 Shadow DOM 구현은 지원하지 않습니다.
axe-core API 패키지는 다음으로 구성됩니다:
axe.js - 테스트 대상 웹사이트에 포함되어야 하는 JavaScript 파일 (API)axe.min.js - 위의 파일의 축소(minified) 버전Axe는 사용자의 로컬 언어로 빌드할 수 있습니다. 이를 위해서는 ./locales 디렉토리에 현지화 파일을 추가해야 합니다. 이 파일은 <langcode>.json 형식으로 이름 지어져야 합니다. 이 로케일로 axe를 빌드하려면, 기본값 대신 --lang 플래그와 함께 다음과 같이 실행합니다:
pnpm run build -- --lang=nl
이를 통해 axe.<lang>.js 및 axe.<lang>.min.js라는 이름의 새로운 axe 빌드가 생성됩니다. 모든 현지화 버전을 빌드하려면 --all-lang을 전달하기만 하면 됩니다. 여러 개의 현지화 버전(하지만 모두는 아닌 경우)을 빌드하려면, --lang 플래그에 쉼표로 구분된 언어 목록을 전달할 수 있습니다. 예를 들어, --lang=nl,ja와 같이 사용할 수 있습니다.
axe를 위한 새로운 번역 파일을 생성하려면 pnpm run translate -- --lang=<langcode>를 실행하는 것으로 시작하세요. 이렇게 하면 ./locales 디렉토리에 JSON 파일이 생성되며, 이 파일에 기본 영어 텍스트가 포함되어 있어 사용자가 번역할 수 있습니다. 또는 ./locales/_template.json을 복사해도 됩니다. axe-core의 모든 현지화 기여를 환영합니다. 기여 방법에 대한 자세한 내용은 아래 Contributing 섹션을 참조하세요. 메시지 구문(message syntax)에 대한 자세한 내용은 Check Message Template을 참조하세요.
기존 번역 파일을 업데이트하려면 pnpm run translate -- --lang=<langcode>를 다시 실행하세요. 이렇게 하면 영어에서 사용되는 새로운 메시지가 추가되고, 영어에서 더 이상 사용되지 않는 메시지는 제거됩니다.
또한, 런타임(runtime)에 axe.configure()에 locale 객체를 전달하여 로케일을 적용할 수 있습니다. 이 locale 객체는 ./locales 디렉토리에 있는 기존 로케일과 동일한 형태여야 합니다. 예를 들면 다음과 같습니다:
axe.configure({
locale: {
lang: 'de',
...
Axe-core는 다음 로케일을 지원합니다. 참고로, 로케일은 커뮤니티에서 기여하는 것이므로, 릴리스에 필요한 모든 번역을 포함한다고 보장할 수는 없습니다.
Axe-core는 3~5개월마다 마이너 릴리스(minor release)가 있으며, 여기에는 일반적으로 새로운 규칙과 기능이 추가됩니다. 이러한 버전을 업그레이드할 시간을 계획하는 것을 권장합니다. 보안 업데이트는 18개월까지의 마이너 버전 라인에 대해 제공될 예정입니다.
DEQUE, DEQUELABS, AXE®, 그리고 AXE-CORE®는 Deque Systems, Inc.의 상표입니다. Deque 상표를 사용하는 것은 반드시 [Deque의 상표 정책]에 따라야 합니다.
axe가 지원하는 모든 ARIA 역할 및 속성 목록은 [axe-core ARIA support] 문서를 참조하십시오.
[Axe-core 규칙 제안 가이드]를 읽어보십시오.
[아키텍처에 대한 문서]를 읽어보십시오.
기여 방법에 대한 문서를 읽어보십시오.
[axe-core를 사용하는 프로젝트 목록]을 참조하십시오.
Shadow DOM 지원에 포함된 [css-selector-parser] 구현을 해주신 Marat Dulin에게 감사드립니다. 또한, 색상 형식 간 변환을 위해 사용한 [colorjs.io] 라이브러리를 제공해주신 Lea Verou와 Chris Lilley에게도 감사를 전합니다.
Axe-core는 [Mozilla Public License, version 2.0]에 따라 배포됩니다. 이 패키지에는 자체 약관으로 배포되는 여러 종속성(dependencies)이 포함되어 있습니다. ([LICENSE-3RD-PARTY.txt] 참조)