웹 접근성(a11y)과 storybook addon

a11y는 장애가 있는 사람들이 동등한 방식으로 사용할 수 있도록 웹 사이트 및 웹 앱을 디자인하는것을 말한다. 다양한 국가에서 디지털 접근성 법률이 존재할 정도로 이로 인한 소송도 많다고 한다. 평등함을 제공하거나 법적인 이유를 제외하고도 장애를 갖고 있는 사람은 전 세계의 1/4을 차지하고 그들 또한 많은 소비력이 있기에 막대한 Business Impact 또한 가져올 수 있다.

 WCAG의 원칙인 POUR 원칙을 디지털 제품에 적용하면 장애가 있는 사람을 포함하여 실제 사람이 제품을 사용하는 방식에 집중할 수 있습니다.

• 모든 필수 정보를 인지할 수 있도록
  • 장식이 아닌 모든 이미지와 필수 아이콘에 대체 텍스트를 추가합니다.
  • 비디오에 캡션, 스크립트 및 오디오 설명을 추가합니다.
  • 색상을 확보하는 것만이 의미를 전달하는 유일한 방법은 아닙니다.

• 인터페이스를 조작 가능하도록
  • 모든 활성 요소에 키보드 및 터치스크린 지원을 추가합니다.
  • 슬라이드쇼 및 비디오에 필요한 모든 컨트롤을 사용할 수 있는지 확인합니다.
  • 사용자가 양식을 작성할 수 있는 충분한 시간을 제공하거나 시간을 연장할 방법을 제공합니다.

• 사용자 인터페이스를 이해할 수 있도록
  • 간단하게 작성하십시오. 간단한 단어가 필요할 때 복잡한 단어를 사용하지 마십시오.
  • 디지털 제품에 예측 가능한 탐색 기능이 있는지 확인합니다.
  • 오류 메시지가 명확하고 해결하기 쉬운지 확인합니다.

• 보조장치를 지원할 수 있도록
  
  • 키보드 전용 탐색을 테스트합니다.
  • 다양한 스크린 리더 기술로 테스트합니다.
  • 장치 크기나 방향에 관계없이 모든 콘텐츠와 기능에 액세스할 수 있습니다.

 

이를 위해 접근성 트리를 일부 변경, 노출, 보강하는 ARIA를 사용하는데 role, aria-describedby, aria-pressed, aria-expanded 등이 있고 전체 접근성 트리는 https://developer.chrome.com/blog/full-accessibility-tree/ 에서 확인할 수 있다.

<div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

 

하지만, HTML 요소를 대신 할 수 없는 경우 사용 해야 하고 <button> 대신해서 <a role="button"> 을 사용한다거나 하는일 없이 시맨틱 태그를 포함해야 다음과 같이 의미있는 AOM을 구축할 수 있다.

우) 시멘틱 태그로 작성

 

팁

• iframe에 title attribute를 추가하도록 한다.
• html 태그에 lang='' 을 추가하도록 한다.
• 비디오/오디오의 경우 caption과 필요하다면 수화를 포함시킨다.
• font의 경우 pixel이 아닌 rem을 사용하도록 한다.
• ADHD, 난독증을 갖고 있는 사람을 위해 읽기 쉬운 폰트를 사용하고 요소들을 구분시킬 수 있는 레이아웃으로 제공하도록 한다.
• 애니메이션과 모션의 경우 움직임이 과도하지 않은지 생각 해보고 어두운 색에서 밝은색으로 혹은 너무 빠른 화면 변화를 삼가고 애니메이션 혹은 모션을 끌 수 있게 제공하도록 한다.
• 색맹/색약을 위해 대조되는 색상을 사용하고 라이트/다크 모드를 제공하도록 한다.
• 불필요한 이미지는 a11y를 숨기도록(role="none" 혹은 aria-hidden="true") 한다.
• 유익한 이미지는 css background 말고 img 태그와 함께 alt 속성으로 의미를 표기하도록 한다.
• Javscript 이벤트 트리거가 있는 요소는 tabindex attribute를 달지 않도록 한다.
• tabindex="0" (0부터 시작하여 순서대로 1,2,3 증가 시킨다)을 통해 키보드로 포커스가 가능하도록 한다. (tabindex=-1"은 포커스에서 제외시키는 방법이다.)
• 스타일을 위한 a:focus { outlined: none }을 하지 않도록 한다.
• SPA의 경우 페이지 이동 시 현재 어떤 페이지인지 확인 할 수 있도록 document.title을 추가하도록 한다.
• https://github.com/thinkcompany/react-a11y-announcer

 

어떻게 하면 빠짐 없이 그리고 쉽게 확인할 수 있을까 하다가 storybook addon에 있는걸 확인하고 찾아봤는데 유용해 보이고 다음에 적용해보고 다시 포스팅 하는걸 목표로 삼아본다.

최소한의 a11y를 검사할 수 있다

 

적용해보고 싶지만 포스팅 하고 싶은게 많아 다른 블로그 분 중에서 하신분걸 가져왔다.

해당 블로거분은 실제 스크린 리더기에서 잘 작동할지는 모르겠다고 하셨다. Toast, Alert, Modal, Button, Input element에 대해서는 aria, role, type를 먼저 달아가면서 개선하겠다고 하신다.

 

https://storybook.js.org/addons/@storybook/addon-a11y

Accessibility Addon | Storybook: Frontend workshop for UI development

https://vroomfan.tistory.com/28

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

https://web.dev/learn/accessibility/

Learn Accessibility