[FE] 웹 접근성 관리 대상 선정 및 개선
웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다. 웹 접근성을 갖추게 된다면 다음과 같은 이점을 가질 수 있습니다.
- 사용자층 확대
- 다양한 환경 지원
- 사회적 이미지 향상
위와 같은 이점을 갖춘 하루스터디 서비스를 만들기 위해 어떤 웹 접근성 관리 대상을 선정하였으며 어떻게 개선을 하였고 아직 미비한 사항에 대한 계획을 정리하고자 합니다.
2022년 웹사이트 접근성 실태조사 보고에 따르면 다음과 같은 웹 접근성 요소의 준수율을 확인할 수 있습니다.
| 구분 | 준수율 | 구분 | 준수율 |
|---|---|---|---|
| 1. 적절한 대체 텍스트 제공 | 42.5% | 2. 자막 제공 | 23.5% |
| 3. 색에 무관한 콘텐츠 인식 | 98% | 4. 명확한 지시 사항 제공 | 100% |
| 5. 텍스트 콘텐츠의 명도 대비 | 34.0% | 6. 자동재생 금지 | 99.9% |
| 7. 콘텐츠 간의 구분 | 98.9% | 8. 키보드 사용 보장 | 61.3% |
| 9. 초점 이동 | 57.4% | 10. 조작 가능 | 94.7% |
| 11. 응답 시간 조절 | 100% | 12. 정지 기능 제공 | 90.1% |
| 13. 깜박거림의 사용 제한 | 100% | 14. 반복 영역 건너뛰기 | 59.2% |
| 15. 제목 제공 | 58.9% | 16. 적절한 링크 텍스트 | 64.7% |
| 17. 기본 언어 표시 | 80.7% | 18. 사용자 요구에 따른 실행 | 94.5% |
| 19. 콘텐츠의 선형 구조 | 92.4% | 20. 표의 구성 | 81.3% |
| 21. 레이블 제공 | 56.7% | 22. 오류 정정 | 39.6% |
| 23. 마크업 오류방지 | 73.1% | 24. 웹 애플리케이션 접근성 준수 | - |
위의 자료의 토대로 준수률이 낮은 웹 접근성 요소를 선정하였습니다. 해당 요소는 다음과 같습니다.
- 적절한 대체 텍스트 제공
- 텍스트 콘텐츠의 명도 대비
- 키보드 사용 보장
- 레이블 제공
- 오류 정정
스터디 목표 작성, 진행, 회고 작성 콘텐츠의 Sidebar에서 웹 접근성에 준수(WCAG AA 기준)하는 명도를 확인할 수 있습니다. Sidebar에서의 텍스트의 크기는 모두 24px이상으로 Large Text에 해당합니다.
하루 스터디에서는 다음과 같은 컴포넌트에서 레이블을 제공하고 있습니다.
Input
Select
QuestionTextarea
하루 스터디에서는 다음과 같은 상황에서 오류를 정정할 수 있도록 안내 메시지를 제공하고 있습니다.
- 스터디 이름이 10글자 이상일 때
- 닉네임이 10글자 이상일 때
현재 하루 스터디의 서비스에는 랜딩 페이지에서만 이미지가 사용되고 있습니다. 하지만 해당 이미지는 히어로 이미지로 특별한 내용을 담고 있지 않는 이미지입니다. 하지만 추후 랜딩 페이지에 하루 스터디의 서비스를 소개하는 이미지를 추가할 예정입니다.(다음 사진 참고)
추가된 이미지에는 alt 속성을 추가하여 이미지가 어떤 내용을 가지고 있는지 제공할 계획입니다.
현재 하루 스터디에서는 다음과 같은 플로우에서만 키보드 사용을 보장하고 있습니다.
- 스터디 목표 작성
- 스터디 진행
- 스터디 회고 작성
우선적으로 가장 핵심이 되는 기능에서 키보드만을 사용하여 서비스를 이용할 수 있게 구현하였습니다. 추후엔 스터디 기록 페이지, 참여 페이지, 개설 페이지 순으로 키보드 사용 보장을 확장 할 계획입니다.