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

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

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

후세인 지르데

react-axe는 React 애플리케이션을 감사하고 접근성 문제를 Chrome DevTools 콘솔에 로깅하는 라이브러리입니다. 오픈소스 axe 테스트 라이브러리를 사용하여 모든 문제와 심각도를 신고합니다.

eslint-plugin-jsx-a11y는 JSX에서 직접 여러 접근성 규칙을 식별하고 적용하는 ESLint 플러그인입니다. react-axe와 같이 최종적으로 렌더링된 DOM을 테스트하는 도구와 함께 사용하면 사이트의 접근성 문제를 찾아서 수정할 수 있습니다.

이것이 왜 유용할까요?

장애나 제약과 관계없이 모든 사용자에게 콘텐츠 액세스 기능을 제공하는 웹사이트를 구축하는 것이 중요합니다. React 애플리케이션을 개발하는 동안 react-axe 및 eslint-plugin-jsx-a11y와 같은 감사 라이브러리를 사용하면 접근성 문제가 팝업될 때 자동으로 노출됩니다.

React는 이미 JSX 구문 내에서 액세스 가능한 HTML 요소 작성을 지원합니다. 예를 들어 for 대신 htmlFor 속성을 사용하여 라벨을 React 구성요소 내의 특정 양식 요소에 연결하면 됩니다.

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

React 접근성 문서에서는 React 구성요소 내 접근성 문제를 처리하는 것과 관련된 모든 미묘한 차이를 다룹니다. 개발 중에 이러한 문제를 더 쉽게 발견할 수 있도록 Create React App (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 테스트 도구 주위에 React 래퍼를 제공하여 이 작업을 정확하게 실행하는 라이브러리입니다.

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

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 사용

결론