웹 접근성(Accessibility) 리포트 작성

웹 접근성(Web Accessibility) 이란? 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것입니다.

• 웹사이트의 접근성을 검사해보고, 직접 수정 코드와 개선 방향을 담은 리포트를 작성하여 블로그 또는 gitHub에 공개해보기. ++ GitHub 이슈를 통해 해당 사이트에 접근성 개선을 제안 해볼 수 도 있음. ++ 우선 미디움에서 작성 예정 (미디움 개설 완료)
• 웹 접근성의 전체가 아닌 하나의 명확한 테마만 잡아서 정리하기. ex . "버튼 및 링크가 키보드로만 접근 가능한가?" ex. "이미지에 스크린 리더가 읽을 수 있는 설명이 잘 붙어있는가?"

웹 접근성 검사 도구 선택

1. axe DevTools (크롬 익스텐션) - [구글 스토어 바로가기]

   

2. Lighthouse (크롬에 기본 탑재된 개발자 도구)

3. WAVE (웹 사이트) - wave.webaim.org

4. NVDA (화면 리더 도움 툴) - [다운로드 바로가기]

   💡 점검 도구 활용 순서

   • Axe DevTools 으로 먼저 검사 해보기.
   • Lighthouse로 기본 접근성 문제 확인 하기.
   • 추가적으로 직접 키보드를 사용하여(tab) 사이트를 조작해보기.

점검 사이트 선정하기

자주 사용하는 서비스를 채택하게 되었습니다. 서비스의 규모가 큰 편이라 고민을 하였지만 허점을 찾을 수도 또는 좋은 사례 및 플로우를 학습 할 수 있는 방향이라 생각되어 아래와 같은 서비스를 채택하게 되었습니다.

1. 인프런 : 강의 목록 및 상세 보기의 동적 콘텐츠 접근성 [바로가기]

• 강의 목록 페이지의 무한 스크롤이나 동적 로딩 콘텐츠가 키보드로 원활히 접근 가능한지 체크 해보기.
• 추가적으로 강의를 눌러 상세보기 시 모달 형태의 동적 팝업이 포커스로 제대로 동작하는지 확인.

2. 쿠팡 : 필터링(카테고리, 가격 등) 및 정렬 기능의 접근성 [바로가기]

• 제품 검색 후 나오는 필터링이나 정렬 기능이 키보드 탭 네비게이션으로 완벽하게 접근 가능한지 체크.
• 동적 로딩 된 검색 결과를 ARIA를 통해 시각장애인에게 정확히 전달할 수 있는지 분석해보기.

접근성 보고서 결론