팀 프로젝트를 진행하면서 가장 많은 생각하고 고려한 부분이 웹 접근성이다.
프로젝트에 적용한 웹 접근성 고려사항은 고대비테마, 키보드 접근성, 스크린 리더이다.
이를 위해 tab 사용, 고대비 테마 설정, 텍스트 감춤 클래스(a11y-hidden) 사용, 스킵 네비게이션을 프로젝트에 적용했다.
프로젝트에 대한 회고를 하기 전 웹 접근성이 무엇인지에 대해 알아보자
웹 접근성이란
한국웹접근성인증평가원에 따르면 다음과 같다.
정보통신접근성 (Web 접근성)은 지능정보화기본법에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다.
웹 접근성은 모든 사람들이 웹 콘텐츠를 동등하게 접근할 수 있도록 하는 것이기 때문에 고려해야 하는 사항이 다양하다. 시각, 청각, 이동성, 인지와 같이 신체적인 제약이 있는 사람을 고려하고, 모바일 기기 및 브라우저 혹은 기술적 제한이 있는 경우도 고려해야 한다.
이 중 팀 프로젝트에서 고려한 사항은 시각적 장애가 있는 분들을 위한 스크린 리더 사용, 저시력자를 위한 명도 대비, 이동성 장애가 있는 분들을 위한 키보드 포커스 관리(tab 사용)를 고려했다.
웹 접근성 적용
웹 접근성을 적용하기 위해 먼저 작업한 것이 텍스트 감춤 클래스 a11y-hidden을 사용한 것과 키보드 접근성을 고려한 tabindex 사용이다.
tabindex에 대해 작성한 블로그
1. [JS] tabindex를 사용해보니...
2. [HTML] tabindex는 어떤 방식으로 개선되었을까?
웹 접근성 리팩토링 작업을 한 과정을 살펴보면 tabindex를 지웠다. 그런 다음 스크린 리더를 고려하기 위해 작성한 img의 alt를 수정하고 a11y-hidden를 선언한 내용의 일부를 수정하거나 지웠다.
그 이유는 다음과 같다
- tabindex의 사용보다 코드를 위에서 아래로 읽을 수 있도록 작성하는 것이 가독성에 좋다.
- 반복되는 동작인 경우 사용자가 예상을 하기 때문에 반복되는 설명을 하지 않아도 된다.
- 홈 화면으로 이동과 같이 상세하게 작성할 필요가 없다. -> 홈으로 이동이라고 작성해도 사용자는 이해한다.
회고를 하며...
FE 개발자는 모든 사용자가 웹에 접근해서 사용할 수 있도록 개발을 해야한다. 프로젝트를 통해 웹 접근성을 고려해서 진행해보는 경험이 큰 도움이 될 것이라고 생각했다. 하나하나 필요한 것들을 추가하고 시행착오를 겪으면서 많은 것을 고려해야한다고 느꼈다. 일반적으로 사용할 때는 몰랐던 것인데 손이 불편한 사람을 위해 tab 이동으로 사용할 수 있고, 색상 대비의 차이를 통해 웹을 사용할 수 있으며, 눈이 불편하더라도 스크린 리더를 통해 웹 정보를 알 수 있다는 것을 배울 수 있었다. 그 중 고대비는 최소 4.5:1 비율이 되어야 한다는 것을 알게 되었다.
FE 개발자로 더 성장하기 위해서는 웹 접근성에 대한 정보를 더 수집하고 배워나가는 자세를 가져야겠다고 느꼈다.
