본문 바로가기

프론트엔드

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은 허용되지 않았기 때문에 새로 추가해야한다. (현재는 <button> element의 모든 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 속성이 특히 중요한 컴포넌트 먼저 웹접근성 개선을 해나가야겠다.