웹 접근성 소개

웹 접근성 대상 선정

다음과 같은 불편함을 가진 사람을 카페인 서비스의 웹 접근성 대상으로 선정했습니다.

1. 빨간색, 초록색, 노란색 구분은 가능하지만 색약을 가지고 있음
2. 미약한 난독증이 있거나 고령자여서 빠르게 글을 읽지 못 함

웹 접근성 개선 노력

1. 스토리북 a11y-addon을 통해 웹 접근성에 어긋나는 부분(Violations)을 찾아 개선합니다.

2. 웹 접근성 개선을 위해 eslint-plugin-jsx-a11y를 사용하며 코드를 작성합니다.

웹 접근성에 어긋나는 부분이 있는 경우, 에러가 발생합니다.

3. 색상을 정하기 전에 항상 명도 테스트를 합니다.

글자가 있을 경우 명도 대비 4.5:1이상, 큰 글씨 혹은 색상과 색상 대비일 경우 적어도 3:1이상의 대비를 준수하고 있습니다.

4. 글자를 빨리 못 읽는 사람들을 위해 토스트 기본 지속 시간을 4초로 두고, 5글자가 추가될 때마다 1초를 추가합니다.

5. 핵심 기능 중 하나인 검색창은 스크린 리더기로도 잘 읽히게 했고, 마우스 없이 tab만으로도 이용할 수 있도록 했습니다.

6. 시맨틱 태그를 사용합니다.

독립적인 내용이 담겼다면 article 태그를 사용했고, 목록을 나열해야 한다면 ul, li 태그를 사용했습니다. 그리고 클릭 이벤트가 있을 경우, button태그를 사용했습니다. 무작정 div 태그를 남발하지 않고 각 코드에 맞는 의미 있는 태그를 사용했습니다.