이 페이지는 Cloud Translation API를 통해 번역되었습니다.

React-axe 및 eslint-plugin-jsx-a11y를 사용한 접근성 검사

React 사이트에 액세스할 수 없다면 프로그레시브 사이트가 아닙니다. 개발 중에 감사를 하면 문제를 발견하는 데 도움이 될 수 있습니다.

Houssein Djirdeh

react-axe는 애플리케이션을 반응하고 접근성 문제를 Chrome DevTools에 기록합니다. 살펴보겠습니다 오픈소스 axe를 사용합니다. 테스트 라이브러리를 사용하여 문제 및 심각도에 플래그를 지정합니다.

eslint-plugin-jsx-a11y: 다양한 접근성 규칙을 식별하고 적용하는 ESLint 플러그인 JSX에서 직접 가져올 수 있습니다. 최종 버전을 테스트하는 도구와 함께 사용하면 렌더링된 DOM(예: react-axe)을 사용하면 모든 접근성 문제를 찾고 수정할 수 있습니다. 해결할 수 있습니다.

이것이 왜 유용할까요?

사용자 수준에 관계없이 모든 사용자에게 콘텐츠에 액세스하는 기능을 포함하여 감사 사용 react-axe 및 eslint-plugin-jsx-a11y 등의 라이브러리를 React 애플리케이션을 개발하면 자동으로 접근성 문제를 해결할 수 있습니다.

React는 이미 JSX 구문 내에서 액세스 가능한 HTML 요소 작성을 지원하고 있습니다. 대상 예를 들어 for 대신 htmlFor 속성만 사용하여 React 구성요소 내의 특정 양식 요소에 라벨을 지정할 수 있습니다.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

이 React 접근성 문서 React 내에서 접근성 문제를 처리하는 모든 미묘한 차이를 다룹니다. 구성요소를 사용합니다. 개발 중에 이러한 문제를 더 쉽게 발견할 수 있도록 React 앱 (CRA)에는 다음과 같은 ESLint용 eslint-plugin-jsx-a11y 플러그인이 포함되어 있습니다. 기본값입니다.

CRA에서 제공하는 사전 구성된 린트를 사용 설정하려면 다음 단계를 따르세요.

코드 편집기에 적합한 ESLint 플러그인을 설치합니다.
프로젝트에 .eslintrc.json 파일 추가

{
  "extends": "react-app"
}

이제 몇 가지 일반적인 접근성 문제가 표시됩니다.

린터의 이미지 접근성 경고

더 많은 접근성 규칙을 확인하려면 자동으로 플러그인에서 권장하는 모든 규칙을 포함합니다.

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

더 엄격한 규칙 하위 집합을 만들려면 엄격 모드로 전환합니다.

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

린터의 라벨 접근성 오류

프로젝트 문서 은 권장 모드와 엄격 모드 간의 차이점에 대한 정보를 제공합니다.

React-Axe 사용

eslint-plugin-jsx-a11y를 사용하면 접근성 문제를 쉽게 파악할 수 있습니다. 가 JSX이기는 하지만 최종 HTML 출력은 테스트하지 않습니다. react-axe 는 Deque Labs의 axe-core 테스트 도구입니다.

시작하려면 라이브러리를 개발 종속 항목으로 설치하세요.

npm install --save-dev react-axe

이제 index.js에서만 모듈을 초기화하면 됩니다.

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

가 동적 가져오기 는 이전에 프로덕션 모드가 아닌 경우에만 라이브러리를 로드하는 데 사용됩니다. 루트 App 구성요소를 렌더링하고 부팅합니다. 이렇게 하면 최종 프로덕션 번들에 불필요하게 포함된 경우.

이제 개발 중에 애플리케이션을 실행하면 문제가 표시됨 바로 Chrome DevTools 콘솔로 이동합니다.

Chrome DevTools의 React Axe

또한 위반별로 심각도 수준이 할당됩니다. 이러한 수준은 다음과 같습니다.

미성년자
보통
심각
심각

결론

React로 사이트를 빌드하는 경우 구성요소를 빌드할 때 문제를 포착할 수 있도록 워크플로를 조기에 만들어야 합니다.
eslint-plugin-jsx-a11y를 사용하여 린트에 접근성 검사를 추가합니다. 워크플로에 따라 다릅니다. CRA는 이미 포함된 상태로 제공되지만 권장 또는 엄격 모드 중에서 선택할 수 있습니다.
로컬 개발 테스트 외에도 react-axe를 애플리케이션을 사용하여 최종 렌더링된 DOM에서 문제를 포착할 수 있습니다. 포함하지 않음 프로덕션 번들에 추가해야 합니다

React-axe 및 eslint-plugin-jsx-a11y를 사용한 접근성 검사

이것이 왜 유용할까요?

eslint-plugin-jsx-a11y 사용

React-Axe 사용

결론