storybook에서 웹접근성 검사하기(feat. storybook-addon-a11y)

• 프로젝트: loplat UI
• 키워드: storybook-addon-a11y, accessibility
• 상황
  1. loplat ui의 컴포넌트들이 웹접근성을 잘 고려하고 있는지 확인하고 싶었다.
  2. 팀원의 도움으로 storybook a11y 관련 addon을 알게되었다.(https://storybook.js.org/addons/@storybook/addon-a11y)
  3. 각 컴포넌트의 웹접근성을 파악하고 개선하고자 한다.
     
     
• 해결방법
  1. 먼저 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,
             },
           ],
         },
       },
     }

     
     
     
  2. 이제 storybook을 실행하고 컴포넌트별로 살펴본다.
     

     

     a11y addon

     storybook addons에 새로운 Accessibility 탭이 추가되었고, violation / pass / incomplete 한 웹접근성 가이드에 대한 정보가 나온다.
     
     
  3. IconButton 컴포넌트에서 aria-label이 없다는 에러 메시지를 발견했다.
     

     

     1 Violations

     IconButton은 children에 icon react element만 들어가기 때문에 text 요소가 없어서 생기는 문제이다. 따라서 aria-label을 명시해야한다.
     하지만 aria-*과 role과 같은 prop은 허용되지 않았기 때문에 새로 추가해야한다.
     
     
  4. 전역적으로 사용할 수 있는 a11y system prop을 만든다.
     

       import { AriaAttributes, AriaRole } from 'react';
     
     export type AriaProps = AriaAttributes & { role: AriaRole };

     
     그 후, 기존 Button Prop에 AriaProps를 추가한다.
     
     이제 IconButton에서 aria-label prop을 사용할 수 있다.
     

     

     typescript에 aria-label 자동 완성

     
     aria-label 적용 후, violation이 사라진 것을 확인했다!
     

     

     violations 해결

• known issues
  
  1. loplat UI의 모든 컴포넌트에 대해 violations를 없애기는 했지만 a11y addon은 최소한의 가이드 수준으로 보인다.(실제로 스크린 리더가 어색하게 동작할 수도 있음)
  2. Toast(Alert), Modal, button, input 과 같이 aria/role/type 속성이 특히 중요한 컴포넌트 먼저 웹접근성 개선을 해나가야겠다.