Axe는 웹사이트 및 기타 HTML 기반 사용자 인터페이스를 위한 접근성 테스트 엔진입니다. 빠르고 안전하며 가벼우며 기존 테스트 환경과 원활하게 통합되도록 제작되었으므로 정기적인 기능 테스트와 함께 접근성 테스트를 자동화할 수 있습니다.
axe 뉴스에 가입하여 axe 기능, 향후 릴리스 및 이벤트에 대한 최신 정보를 얻으십시오.
Axe-core에는 레벨 A, AA 및 AAA의 WCAG 2.0, 2.1, 2.2에 대한 다양한 유형의 규칙과 모든 페이지에 h1
제목이 있는지 확인하는 것과 같은 일반적인 접근성 사례를 식별하는 데 도움이 되는 여러 모범 사례가 있습니다. 사용한 ARIA 속성이 무시되는 것과 같은 ARIA의 "문제"를 방지합니다. 규칙의 전체 목록, 그룹화된 WCAG 수준 및 모범 사례는 doc/rule-descriptions.md에서 찾을 수 있습니다.
axe-core를 사용하면 WCAG 문제의 평균 57%를 자동으로 찾을 수 있습니다. 또한 axe-core는 axe-core가 확실하지 않은 경우 요소를 "불완전"으로 반환하므로 수동 검토가 필요합니다.
개발 주기 초기에 버그를 잡으려면 axe-linter vscode 확장을 사용하는 것이 좋습니다. 테스트 범위를 더욱 향상하려면 ax Extension의 지능형 안내 테스트를 권장합니다.
먼저 패키지를 다운로드하십시오.
npm install axe-core --save-dev
이제 픽스처 또는 테스트 시스템의 각 iframe에 자바스크립트 파일을 포함합니다.
< script src =" node_modules/axe-core/axe.min.js " > script >
이제 새로운 UI 부분이 표시되거나 노출되는 테스트의 각 지점에 호출을 삽입하세요.
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ;
웹은 개발자가 접근성 테스트 및 접근 가능한 코딩 관행에 대한 책임을 질 수 있는 경우에만 접근 가능하고 포괄적인 공간이 될 수 있습니다.
자동화된 접근성 테스트는 시간을 크게 절약해 주고 특별한 전문 지식이 필요하지 않으며 팀이 실제로 필요한 접근성 문제에 전문가 리소스를 집중할 수 있도록 해줍니다. 불행하게도 대부분의 접근성 도구는 개발 프로세스가 끝났고 명확하거나 일관된 결과를 제공하지 못하는 사이트 및 응용 프로그램에서 실행되도록 되어 있어 제품 출시 준비가 되었다고 생각하는 순간 좌절과 지연을 초래합니다.
Axe는 웹 개발이 실제로 어떻게 작동하는지를 반영하도록 만들어졌습니다. 개발팀이 사용할 수 있는 모든 최신 브라우저, 도구 및 테스트 환경에서 작동합니다. axe를 사용하면 단위 테스트, 통합 테스트, 브라우저 테스트 및 팀이 이미 매일 수행하는 기타 기능 테스트의 일부로 접근성 테스트를 수행할 수 있습니다. 초기 개발 프로세스에 접근성 테스트를 구축하면 시간, 리소스 및 모든 종류의 좌절감을 줄일 수 있습니다.
axe-core API는 다음 브라우저를 완벽하게 지원합니다.
지원이란 버그를 수정하고 각 브라우저를 정기적으로 테스트한다는 의미입니다. 현재 모든 풀 요청에 대해 Chrome과 Firefox만 테스트됩니다.
JSDOM에 대한 지원이 제한되어 있습니다. 우리는 모든 규칙을 JSDOM과 호환되도록 만들려고 시도하지만 이것이 가능하지 않은 경우 해당 규칙을 해제하는 것이 좋습니다. 현재 color-contrast
규칙은 JSDOM에서 작동하지 않는 것으로 알려져 있습니다.
기능이 기본적으로 지원되거나 올바르게 폴리필되는 환경만 지원할 수 있습니다. 우리는 더 이상 사용되지 않는 v0 Shadow DOM 구현을 지원하지 않습니다.
axe-core API 패키지는 다음으로 구성됩니다.
axe.js
- 테스트 중인 웹 사이트에 포함되어야 하는 JavaScript 파일(API)axe.min.js
- 위 파일의 축소된 버전 Axe는 현지 언어를 사용하여 제작할 수 있습니다. 이렇게 하려면 현지화 파일을 ./locales
디렉터리에 추가해야 합니다. 이 파일의 이름은
방식으로 지정해야 합니다. 기본값 대신 이 로케일을 사용하여 ax를 빌드하려면 다음과 같이 --lang
플래그를 사용하여 ax를 실행하십시오.
grunt build --lang=nl
또는 동등하게:
npm run build -- --lang=nl
그러면 axe axe.
및 axe.
라는 axe용 새 빌드가 생성됩니다. 모든 지역화된 버전을 빌드하려면 대신 --all-lang
전달하면 됩니다. 여러 지역화된 버전을 빌드하려는 경우(모두는 아님) --lang=nl,ja
와 같이 쉼표로 구분된 언어 목록을 --lang
플래그에 전달할 수 있습니다.
axe에 대한 새 번역을 만들려면 grunt translate --lang=
실행하여 시작하세요. 이렇게 하면 ./locales
디렉터리에 번역할 수 있는 기본 영어 텍스트가 포함된 json 파일이 생성됩니다. 또는 ./locales/_template.json
복사할 수 있습니다. Axe-Core의 현지화를 환영합니다. 기여 방법에 대한 자세한 내용은 아래 기여 섹션을 참조하세요. 메시지 구문에 대한 자세한 내용은 메시지 템플릿 확인을 참조하세요.
기존 번역 파일을 업데이트하려면 grunt translate --lang=
다시 실행하세요. 그러면 영어로 사용된 새 메시지가 추가되고 영어로 사용되지 않은 메시지가 제거됩니다.
또한 locale
객체를 axe.configure()
에 전달하여 런타임에 로케일을 적용할 수 있습니다. 로케일 객체는 ./locales
디렉터리에 있는 기존 로케일과 모양이 동일해야 합니다. 예를 들어:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;
Axe-core는 다음 로케일을 지원합니다. 로케일은 우리 커뮤니티에서 제공되므로 릴리스에 필요한 모든 번역이 포함된다는 보장은 없습니다.
Axe-core는 3~5개월마다 새로운 마이너 릴리스를 제공하며 일반적으로 새로운 규칙과 기능을 도입합니다. 이러한 버전으로 업그레이드할 시간을 예약하는 것이 좋습니다. 보안 업데이트는 최대 18개월 까지의 마이너 버전 라인에 제공됩니다.
DEQUE, DEQUELABS, AXE® 및 AXE-CORE®는 Deque Systems, Inc.의 상표입니다. Deque 상표의 사용은 Deque의 상표 정책을 준수해야 합니다.
axe별 ARIA 지원 역할 및 속성의 전체 목록은 axe-core ARIA 지원을 참조하세요.
Axe-core 규칙 제안 가이드를 읽어보세요.
아키텍처에 대한 문서 읽기
기여에 대한 문서 읽기
axe-core를 사용하는 프로젝트 목록
Shadow DOM 지원을 위해 포함된 css-selector-parser 구현에 대해 Marat Dulin에게 감사드립니다. Slick Parser 구현자들의 기여에 대해 또 다른 감사를 드립니다. 우리는 Shadow DOM 지원 코드에서 그들의 알고리즘 중 일부를 사용했습니다. 색상 형식 간 변환에 사용한 colorjs.io 라이브러리를 제공해 주신 Lea Verou와 Chris Lilley에게 감사드립니다.
Axe-core는 Mozilla Public License 버전 2.0에 따라 배포됩니다. 자체 조건에 따라 배포되는 여러 종속성과 함께 번들로 제공됩니다. (LICENSE-3RD-PARTY.txt 참조)