개발자 도구를 사용하여 접근성 보장
다양한 클라이언트와 보기에서 웹 페이지를 테스트하는 것은 다양한 브라우저에서 웹 페이지를 테스트하는 것만큼 중요합니다. 이 테스트는 모든 시나리오에서 실용적이지 않을 수 있으며 사용자가 브라우저를 사용하지만 다른 장애가 있을 수 있는 상황을 놓칠 수 있습니다. 다행히 페이지의 접근성을 측정하기 위해 개발자가 사용할 수 있는 도구가 있습니다.
대비 검사기
색맹인 사용자는 색을 구별하지 못하거나 서로 유사한 색으로 작업하는 데 어려움을 겪을 수 있습니다. 웹 표준 조직인 W3C(World Wide Web Consortium)는 색상 대비 등급 시스템을 만들었습니다.
모든 사용자가 페이지에 액세스할 수 있도록 올바른 색상을 직접 선별하는 것은 어려울 수 있습니다. 다음 도구로 적절한 색상을 생성하고 사이트를 테스트하여 규정 준수 여부를 확인할 수 있습니다.
- 색상표 생성 도구:
- Adobe Color - 색 조합을 테스트하는 대화형 도구
- Color Safe - 선택한 배경색을 기준으로 텍스트 색을 생성하는 도구
- 준수 검사기:
- 페이지를 테스트하는 브라우저 확장:
- 애플리케이션:
Lighthouse
Lighthouse는 Google이 웹 사이트 분석을 위해 만든 도구로서, 많은 브라우저의 개발자 도구에 포함될 정도로 인기가 높아졌습니다. Lighthouse는 페이지의 SEO(검색 엔진 최적화), 로드 성능 및 기타 모범 사례를 검사할 수 있습니다. 또한 Lighthouse는 페이지를 분석하고 현재 접근성에 대한 점수를 제공할 수 있습니다.
참고
여느 자동화된 도구와 마찬가지로 Lighthouse가 제공하는 점수를 페이지의 접근성을 나타내는 유일한 지표로 사용할 수는 없습니다. 그러나 문제 식별과 해결을 위한 좋은 시작점을 제공합니다.
연습: 페이지의 Lighthouse 접근성 점수 생성
브라우저에서 Lighthouse을 테스트합니다. 다음 스크린샷에서는 Edge를 사용하지만 Chrome과 다른 많은 브라우저에서도 동일한 단계를 따를 수 있습니다.
브라우저를 열고 기본 Microsoft 웹 페이지로 이동합니다.
F12 키를 선택하여 개발자 도구를 엽니다.
위쪽에서 갈매기형 수장(>>) 아이콘을 선택하여 숨겨진 탭 목록을 엽니다.
목록에서 Lighthouse를 선택합니다.
범주에서 접근성을 제외한 모든 항목의 선택을 취소합니다.
디바이스에서 데스크톱을 선택합니다.
보고서 생성을 선택합니다.
페이지에 대한 점수와 관련 정보를 확인합니다.
Lighthouse에서 Clear all(모두 지우기)을 선택하고 다른 페이지로 이동한 다음, Generate report(보고서 생성)를 선택하여 다른 페이지를 테스트할 수 있습니다.
지금까지 도구에서 제공할 수 있는 접근성 정보와 함께 Lighthouse를 사용하는 방법을 살펴보았습니다.