접근성은 모든 사용자가 웹사이트나 앱을 이용할 수 있도록 하는 것입니다. 특히 자바스크립트 앱의 경우, 사용자 인터페이스(UI) 요소들이 동적으로 생성되기 때문에 접근성 테스트는 더욱 중요해집니다. 이때 Storybook은 접근성 테스트를 위한 좋은 도구입니다.
이 포스트에서는 Storybook을 사용하여 자바스크립트 앱의 접근성을 테스트하는 방법을 살펴보겠습니다.
1. Storybook 설정
먼저 Storybook을 프로젝트에 설정해야 합니다. Storybook은 자바스크립트 앱의 컴포넌트를 독립적으로 개발하고 테스트하기 위한 도구입니다. npm 또는 yarn을 사용하여 Storybook을 프로젝트에 설치하고 설정 파일을 생성합니다.
npm install @storybook/react
또는
yarn add @storybook/react
설치가 완료되면 .storybook 디렉토리를 프로젝트 루트에 생성하고 main.js 파일을 생성합니다. 아래는 main.js 파일의 예시입니다.
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
};
설정이 완료되면 Storybook을 실행하여 컴포넌트를 개발하고 테스트할 수 있습니다.
npx sb
또는
yarn sb
2. 접근성 테스트 설정
Storybook은 Axe-core와 연동하여 접근성 테스트를 수행할 수 있는 Addon을 제공합니다. 이 Addon을 사용하기 위해 설정을 추가해야 합니다.
먼저, @storybook/addon-a11y 패키지를 설치합니다.
npm install @storybook/addon-a11y
또는
yarn add @storybook/addon-a11y
설치가 완료되면 .storybook/main.js 파일에 아래와 같이 설정을 추가합니다.
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
};
이제 Storybook에서 접근성 테스트를 실행할 수 있습니다. Storybook의 UI에서 “Accessibility” 탭을 열고 “Scan all” 버튼을 클릭하면 현재 컴포넌트의 접근성 테스트 결과를 확인할 수 있습니다.
3. 접근성 테스트 결과 해석
Storybook의 접근성 테스트 결과는 Axe-core에서 제공하는 규칙을 기반으로 합니다. 각 테스트 결과에는 이슈 심각도, 원인, 대처 방법 등의 정보가 포함되어 있습니다. 접근성 관련 이슈를 해결하기 위해 원인과 대처 방법을 확인하고 개선 작업을 진행해야 합니다.
참고 자료
이 포스트에서는 Storybook을 사용하여 자바스크립트 앱의 접근성 테스트를 수행하는 방법을 살펴보았습니다. Storybook의 접근성 테스트를 통해 앱의 접근성을 개선하고 모든 사용자에게 편리한 경험을 제공할 수 있습니다.