AX로 자동 접근성 검사

AX : 웹 사이트에 더 액세스하기 쉽게하기위한 자동 보조 기능 테스트 장애가있는 사람들도 액세스 할 수 있도록 웹 사이트를 설계했을 때 얼마나 많은 시간과 노력을 했습니까? 많은 사람들이 "아니오"라고 대답 할 수 있습니다. 그러나 많은 인터넷 사용자가 색상 구별, 텍스트 읽기, 마우스 사용 또는 복잡한 웹 사이트 구조를 탐색하는 데 어려움이 있기 때문에 웹 사이트에 액세스하는 데 어려움이 있습니다. 접근성 솔루션을 확인하고 구현하기위한 노력이 필요하므로 접근성 문제는 종종 간과됩니다. 개발자는 기본 표준에 익숙해야 할뿐만 아니라 충족되는지 끊임없이 확인해야합니다. 표준 검사를 자동화하여 접근성 웹 사이트의 개발을 단순화 할 수 있습니까?

이 기사에서는 AX 라이브러리 및 일부 관련 도구를 사용하여 웹 사이트 및 응용 프로그램에서 잠재적 인 접근성 문제를 자동으로 확인하고보고하는 방법을 보여줍니다. 그러한 활동에 필요한 작업량을 줄이고 일부 수동 작업을 자동화함으로써 우리는 우리가 만든 컨텐츠를 사용하는 모든 사용자에게 더 나은 결과를 가져올 수 있습니다.

도끼 소개 ax는 보조 기능 테스트를 주류 웹 개발에 가져 오도록 설계된 자동화 된 보조 기능 테스트 라이브러리입니다. Axe-Core 라이브러리는 오픈 소스이며 다양한 테스트 프레임 워크, 도구 및 환경에서 작동하도록 설계되었습니다. 예를 들어 기능 테스트, 브라우저 플러그인 또는 응용 프로그램의 개발 버전에서 실행할 수 있습니다. 현재 웹 사이트의 다양한 접근성 측면을 확인하기위한 약 55 개의 규칙을 지원합니다.

라이브러리의 작동 방식을 신속하게 보여 주려면 간단한 구성 요소를 만들고 테스트합시다. 우리는 전체 페이지를 만들지 않고 제목 만 만들었습니다.

사진 : CodePen 샘플 스크린 샷

우리는 제목을 만들 때 훌륭한 디자인 결정을 내 렸습니다 :

우리는 배경을 밝은 회색으로 설정 하고이 색상은 우아하고 세련되기 때문에 짙은 회색으로 설정했습니다 검색 버튼에 멋진 돋보기 아이콘을 사용했습니다 검색 입력의 탭 색인을 1로 설정하여 사용자가 탭 키를 누르고 페이지를 열 때 바로 검색 쿼리를 입력 할 수 있도록합니다. 나쁘지 않아요? 접근성 관점에서 어떻게 보이는지 봅시다. CDN에서 AX를 추가하고 다음과 같이 브라우저 콘솔에 모든 오류를 기록 할 수 있습니다.

예제를 실행하고 콘솔을 열면, 우리가 가진 문제를 나열하는 6 개의 위반 개체가 표시됩니다. 각 객체는 우리가 위반 한 규칙, 비난해야 할 HTML 요소에 대한 언급을 설명하고 문제 해결 방법에 대한 정보를 설명합니다.

다음은 JSON 형식으로 표시된 위반 개체의 예입니다.

위반에 대한 설명 만 선택하면 다음은 다음과 같습니다.

우리는 디자인 결정에 크게 위대하지 않은 것으로 입증되었습니다.

우리가 선택한 두 개의 회색 그림자는 충분히 대조되지 않으며 시각 장애가있는 사람들이 를 읽는 것은 어려울 수 있습니다. 검색 버튼의 돋보기 아이콘은 화면 리더를 사용하는 사람들의 버튼 목적에 대한 지침을 제공하지 않습니다. 검색 입력 탭 색인은 스크린 리더 또는 키보드를 사용하는 사람들의 일반 탐색 프로세스를 중단하고 메뉴 링크에 액세스하기가 더 어려워집니다.
그것은 또한 우리가 기대하지 않은 몇 가지 다른 것들을 지적합니다. 다른 표준 지침 및 모범 사례의 규칙을 포함하여 총 약 55 개의 다른 점검이 수행되었습니다.
2. 오류 목록을 보려면 스크립트를 페이지 자체에 주입해야합니다. 완전히 실현 가능하지만 편리하지 않습니다. 우리가 자신을 주입하지 않고 어떤 페이지 에서이 검사를 수행 할 수 있다면 더 나을 것입니다. 잘 알려진 테스트 러너를 사용하는 것이 가장 좋습니다. 우리는 셀레늄 웹 드라이버와 모카를 사용하여이를 수행 할 수 있습니다.
Selenium webdriver를 사용하여 도끼를 실행하십시오 셀레늄을 사용하여 도끼를 실행하려면 Axe-Webdriverjs 라이브러리를 사용합니다. WebDriver 위에 사용할 수있는 AX API를 제공합니다.
3. 를 설정하려면 별도의 프로젝트를 만들고 NPM init 명령을 사용하여 NPM 프로젝트를 초기화하겠습니다. 필요한 모든 것에 대한 기본값을 남길 수 있습니다. Selenium을 실행하려면 Selenium-Webdriver를 설치해야합니다. Phantomjs에서 테스트를 수행하므로 설치해야합니다. 셀레늄에는 6.9 이상이 필요하므로 설치해야합니다.
소프트웨어 패키지를 설치하려면 run :

이제 Axe-Core 및 Axe-webdriverjs : 를 설치해야합니다

이제 인프라가 설정되었으므로 Sitepoint.com (개인적 인 원한, 남자)에 대해 테스트를 실행하는 스크립트를 만들어 봅시다. 프로젝트 폴더에서 axe.js 파일을 만들고 다음을 추가하십시오.

이 테스트를 수행하기 위해 Node Axe.js를 실행할 수 있습니다. 지역 프로젝트에 Phantomjs가 설치되어 있기 때문에 콘솔에서 실행할 수 없습니다. NPM 스크립트로 실행해야합니다. 이렇게하려면 package.json 파일을 열고 기본 테스트 스크립트 항목을 변경하십시오.

지금 NPM 테스트를 실행해보십시오. 몇 초 후에 AX에서 발견 한 위반 목록이 표시됩니다. 위반 사항이 보이지 않으면이 기사를 읽은 후 SitePoint가 수정했음을 의미 할 수 있습니다.

테스트중인 페이지를 수정할 필요가 없으며 CLI를 사용하여 편리하게 실행할 수 있기 때문에 이것은 초기 접근 방식보다 더 편리합니다. 그러나 이것의 단점은 테스트를 실행하기 위해 별도의 스크립트를 실행해야한다는 것입니다. 나머지 테스트와 함께 실행할 수 있다면 더 나을 것입니다. Mocha를 사용하여이를 달성하는 방법을 살펴 보겠습니다.

mocha 와 함께 도끼를 실행하십시오 Mocha는 가장 인기있는 테스트 러너 중 하나이므로 AX를 시도하는 것이 좋습니다. 그러나 AX를 비슷한 방식으로 좋아하는 테스트 프레임 워크에 AX를 통합 할 수 있어야합니다. 셀레늄 샘플 프로젝트를 더 구축합시다.

우리는 분명히 모카 자체와 주장 도서관이 필요합니다. 차이는 어때? 다음 명령으로 모든 것을 설치하십시오

이제 우리는 Mocha 테스트 케이스에 쓴 셀레늄 코드를 랩핑해야합니다. 다음 코드를 사용하여 테스트/axe.spec.js 파일을 만듭니다

테스트는 결과의 길이 여부를 확인하여 매우 기본적인 주장을 수행합니다. 테스트를 실행하려면 테스트 스크립트를 변경하여 MOCHA를 호출하십시오.

이 연습의 다음 논리적 단계는 테스트가 실패 할 때 더 자세한 오류 보고서를 생성하는 것입니다. 그런 다음 페이지의 결과를 올바르게 표시하기 위해 좋아하는 CI 환경과 통합하는 것이 유용합니다. 나는이 두 가지를 운동으로 독자에게 맡기고 유용한 추가 도끼 구성 옵션을 계속 소개합니다.

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

<<> (고급 구성, 요약 및 FAQ에 대한 컨텐츠는 이전 출력, 컨텐츠 일관성 유지 및 조정 명령문 및 단락 구조를 조정하여 더 매끄럽고 자연스럽게 만들 수 있습니다.)

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

위 내용은 AX로 자동 접근성 검사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!