Kayce Basques
Sofia Emelianova
이 페이지는 Chrome DevTools의 접근성 기능에 관한 포괄적인 참조 자료입니다. 다음과 같은 웹 개발자를 대상으로 합니다.
- DevTools를 여는 방법과 같은 DevTools에 관한 기본적인 이해가 있어야 합니다.
- 접근성 원칙 및 권장사항을 숙지하고 있어야 합니다.
이 참조의 목적은 페이지의 접근성을 검사하는 데 도움이 되는 DevTools의 모든 도구를 살펴보는 것입니다.
스크린 리더와 같은 보조 기술을 사용하여 DevTools를 탐색하는 방법을 알아보려면 보조 기술을 사용하여 Chrome DevTools 탐색을 참고하세요.
접근성 있는 웹사이트를 개발하는 방법을 알아보려면 접근성 알아보기를 참고하세요.
Chrome DevTools의 접근성 기능 개요
이 섹션에서는 DevTools가 전반적인 접근성 도구 키트에 어떻게 적합한지 설명합니다.
페이지에 액세스할 수 있는지 여부를 판단할 때는 다음 두 가지 일반적인 질문을 고려해야 합니다.
- 키보드나 스크린 리더를 사용하여 페이지를 탐색할 수 있나요?
- 페이지의 요소가 스크린 리더용으로 올바르게 마크업되어 있나요?
일반적으로 DevTools는 질문 2와 관련된 오류를 수정하는 데 도움이 됩니다. 이러한 오류는 자동화된 방식으로 쉽게 감지할 수 있기 때문입니다. 질문 1도 마찬가지로 중요하지만 안타깝게도 DevTools로는 이 문제를 해결할 수 없습니다. 질문 1과 관련된 오류를 찾는 유일한 방법은 키보드나 스크린 리더를 사용하여 페이지를 직접 사용하는 것입니다. 자세한 내용은 접근성 검토 방법을 참고하세요.
페이지의 접근성 감사
일반적으로 Lighthouse 패널 아래의 접근성 검사를 사용하여 다음 사항을 확인합니다.
- 페이지가 스크린 리더용으로 올바르게 마크업되어 있습니다.
- 페이지의 텍스트 요소의 대비율이 충분합니다. 웹사이트 가독성 개선하기도 참고하세요.
페이지를 감사하려면 다음 단계를 따르세요.
- 감사할 URL로 이동합니다.
DevTools에서 Lighthouse 패널을 클릭합니다. DevTools에는 다양한 구성 옵션이 표시됩니다.