- 프로젝트: loplat UI
- 키워드: storybook-addon-a11y, accessibility
- 상황
- loplat ui의 컴포넌트들이 웹접근성을 잘 고려하고 있는지 확인하고 싶었다.
- 팀원의 도움으로 storybook a11y 관련 addon을 알게되었다.(https://storybook.js.org/addons/@storybook/addon-a11y)
- 각 컴포넌트의 웹접근성을 파악하고 개선하고자 한다.
- 해결방법
- 먼저 addon을 설치하고 addon 관련 global config를 설정한다.
yarn add -D @storybook/addon-a11y
이 때, color-contrast(명암비)는 디자이너의 판단 하에 rule을 무시하기로 한다.
또한 a11y 속성과 관련된 'aria-*'과 'role' attribute는 storybook control에 굳이 보여주지 않기로 한다.(aria-*는 자동으로 control에서 제외됨)
// main.js module.exports = { ... addons: [ ... '@storybook/addon-a11y', ], }; // preview.js export const parameters = { ... controls: { ... exclude: ['role'], }, a11y: { config: { rules: [ { id: 'color-contrast', enabled: false, }, ], }, }, }
- 이제 storybook을 실행하고 컴포넌트별로 살펴본다.
storybook addons에 새로운 Accessibility 탭이 추가되었고, violation / pass / incomplete 한 웹접근성 가이드에 대한 정보가 나온다. - IconButton 컴포넌트에서 aria-label이 없다는 에러 메시지를 발견했다.
IconButton은 children에 icon react element만 들어가기 때문에 text 요소가 없어서 생기는 문제이다. 따라서 aria-label을 명시해야한다.하지만 aria-*과 role과 같은 prop은 허용되지 않았기 때문에 새로 추가해야한다.(현재는 <button> element의 모든 prop을 허용하도록 변경됨) - 전역적으로 사용할 수 있는 a11y system prop을 만든다.
import { AriaAttributes, AriaRole } from 'react'; export type AriaProps = AriaAttributes & { role: AriaRole };
그 후, 기존 Button Prop에 AriaProps를 추가한다.
이제 IconButton에서 aria-label prop을 사용할 수 있다.
aria-label 적용 후, violation이 사라진 것을 확인했다!
- 먼저 addon을 설치하고 addon 관련 global config를 설정한다.
- known issues
- loplat UI의 모든 컴포넌트에 대해 violations를 없애기는 했지만 a11y addon은 최소한의 가이드 수준으로 보인다.(실제로 스크린 리더가 어색하게 동작할 수도 있음)
- Toast(Alert), Modal, button, input 과 같이 aria/role/type 속성이 특히 중요한 컴포넌트 먼저 웹접근성 개선을 해나가야겠다.
'프론트엔드' 카테고리의 다른 글
이미지 용량 최적화하기(feat. picture tag, sprite image) (0) | 2022.02.24 |
---|---|
chrome extension New Tab customizing을 위한 개발 환경 만들기 (0) | 2022.02.17 |
웹접근성(web accessibility), SEO 개선하기 (0) | 2022.02.11 |
js try/catch문으로 함수 리팩토링하기 (0) | 2022.01.16 |
package.json의 version을 환경 변수로 설정하기 (0) | 2022.01.16 |