[tvingLogin] React 환경에서 접근성 검사 방법 구성하기

[kimInDa]

• axe-core/reac와 axe-core'를 사용하여 React 환경에서 접근성을 검사해주는 환경을 구성하였습니다.

구성 방법

1. acx-core/rect 설치 npm install --save-dev @axe-core/react

2. axe-core 설치 npm i -D axe-core

3. package.json파일의 devDependency에 설치 되었음을 확인

4. node_modules / @axe-core/react / locales / ko.json 파일 존재 확인

   • 없으면 파일을 다운로드 후 생성 (axe-core 깃헙 내 loacales 폴더 참고)

5. main.jsx에 아래 코드 삽입 if (process.env.NODE_ENV !== 'production') { axe(React, ReactDOM, 1000, { locale: ko }); }

8. 새로고침 시 문법 검사 결과를 console에 출력합니다.

[kimInDa]

🚨 이슈 상황

• React 개발 중 실시간으로 접근성 검사가 가능하도록 환경을 구성하고자 합니다.
• 구성 방법은 질의응답에 올라온 답변 중 axe-core/react를 채택합니다.
• 답변의 방식으로 환경을 구성하였으나 검사 기능이 제대로 작동하지 않습니다.
  • 사진 상의 메세지만 출력할 뿐 다른 오류에는 반응하지 않습니다.
• 오류 경로로 ko.json 파일을 넣어주어도 파일을 인식하지 못합니다.

🤔 이슈 원인 & 해결 방안

• ko.json 파일 인식은 axe-core가 devDependencies에 설치되어 있어야 인식 가능합니다.

  • 따라서 npm i -D axe-core로 axe-core도 설치해주어야 합니다.

• axe-core 실행은 전체적인 DOM을 생성하는 main.jsx에서 합니다.

---

🌟 해당 이슈는 4조의 이호 님께서 해결하여 공유해주신 방법임을 명시합니다. 감사합니다. 🙇

[kimInDa]

이 방법과 Lighthouse는 새로고침이 반드시 필요하다. 따라서 다시 정보인증을 요구하며 접근이 거부되는 페이지에서는 사용할 수 없다. (해당 프로젝트에선 아이디 찾기 결과 페이지가 그렇다) 이에 새로고침 없이 검사 가능한 axe-core 팀이 만든 크롬 익스텐션을 설치 후 사용한다. axe DevTools - Web Accessibility Testing