이 페이지는 Chrome DevTools의 접근성 기능에 관한 포괄적인 참고 자료입니다. 이 문서는 다음과 같은 웹 개발자를 대상으로 합니다.
- DevTools를 여는 방법 등 DevTools에 관한 기본적인 사항을 이해합니다.
- 접근성 원칙 및 권장사항을 숙지합니다.
이 참조의 목적은 페이지의 접근성 검사에 도움이 되는 DevTools에서 사용할 수 있는 모든 도구를 찾도록 돕는 것입니다.
스크린 리더와 같은 보조 기술로 DevTools를 탐색하는 데 도움이 필요하면 보조 기술로 Chrome DevTools 탐색을 참고하세요.
접근성이 우수한 웹사이트를 개발하는 방법을 알아보려면 접근성 알아보기를 참고하세요.
Chrome DevTools의 접근성 기능 개요
이 섹션에서는 DevTools가 전체 접근성 툴킷에서 어떻게 활용되는지 설명합니다.
페이지의 액세스 가능 여부를 판단할 때는 다음 두 가지 일반적인 질문을 염두에 두어야 합니다.
- 키보드나 스크린 리더를 사용하여 페이지를 탐색할 수 있나요?
- 페이지 요소가 스크린 리더에 올바르게 마크업되어 있습니까?
일반적으로 DevTools는 질문 2와 관련된 오류를 수정하는 데 도움을 줄 수 있습니다. 이러한 오류는 자동화된 방식으로 쉽게 감지할 수 있기 때문입니다. 질문 1도 중요하지만 DevTools가 도와드릴 수 없습니다. 질문 1과 관련된 오류를 찾는 유일한 방법은 키보드나 스크린 리더가 있는 페이지를 직접 사용해 보는 것입니다. 자세한 내용은 접근성 검토 방법을 참고하세요.
페이지 접근성 감사
일반적으로 Lighthouse 패널의 접근성 검사를 사용하여 다음 사항을 확인하세요.
- 페이지가 스크린 리더에 맞게 올바르게 마크업되어 있습니다.
- 페이지의 텍스트 요소가 충분한 명암비를 가지고 있습니다. 웹사이트의 가독성 높이기도 참고하세요.
페이지를 감사하려면 다음 단계를 따르세요.
- 감사할 URL로 이동합니다.
DevTools에서 Lighthouse 탭을 클릭합니다. DevTools에 다양한 구성 옵션이 표시됩니다.
휴대기기를 시뮬레이션하려면 기기에서 모바일을 선택합니다. 이 옵션은 사용자 에이전트 문자열을 다르게 변경하고 표시 영역의 크기를 조정합니다. 페이지의 모바일 버전이 데스크톱 버전과 다르게 표시되는 경우 이 옵션이 감사 결과에 상당한 영향을 미칠 수 있습니다.
Lighthouse 섹션에서 접근성이 사용 설정되어 있는지 확인합니다. 보고서에서 제외하려면 다른 카테고리를 사용 중지하세요. 페이지 품질을 개선할 다른 방법을 탐색하려면 사용 설정된 상태로 두세요.
제한 섹션에서는 네트워크 및 CPU를 제한할 수 있으며 이는 로드 성능을 분석할 때 유용합니다. 이 옵션은 접근성 점수와 무관하므로 원하는 대로 사용할 수 있습니다.
저장용량 비우기 체크박스를 사용하면 페이지를 로드하기 전에 저장용량을 모두 지우거나 페이지 로드 사이에 저장용량을 보존할 수 있습니다. 또한 이 옵션은 접근성 점수와 관련이 없을 수 있으므로 원하는 대로 사용할 수 있습니다.
보고서 생성을 클릭합니다. 10~30초 후에 DevTools가 보고서를 제공합니다. 보고서는 페이지의 접근성을 개선하는 방법에 관한 다양한 팁을 제공합니다.
감사를 클릭하여 자세히 알아보세요.
감사의 문서를 보려면 자세히 알아보기를 클릭합니다.
참고: aXe 확장 프로그램
Chrome에서 기본적으로 제공되는 Lighthouse 패널 대신 aXe 확장 프로그램 또는 Lighthouse 확장 프로그램을 사용하는 것이 나을 수 있습니다. aXe는 Lighthouse 패널을 구동하는 기본 엔진이므로 일반적으로 동일한 정보를 제공합니다. aXe 확장 프로그램은 UI가 다르며 감사를 약간 다르게 설명합니다.
감사 패널과 비교했을 때 aXe 확장 프로그램의 장점은 실패한 노드를 검사하고 강조표시할 수 있다는 것입니다.
접근성 창
접근성 창에서는 접근성 트리, ARIA 속성, DOM 노드의 계산된 접근성 속성을 확인할 수 있습니다.
접근성 창을 열려면 다음 단계를 따르세요.
- 요소 탭을 클릭합니다.
- DOM 트리에서 검사할 요소를 선택합니다.
- 접근성 탭을 클릭합니다. 이 탭은 탭 더보기
버튼 뒤에 숨겨져 있을 수 있습니다.
버튼 뒤에 숨겨져 있을 수 있습니다.
접근성 트리에서 요소의 위치 보기
접근성 트리는 DOM 트리의 하위 집합입니다. 여기에는 스크린 리더에 페이지 콘텐츠를 표시하는 데 관련이 있고 유용한 DOM 트리의 요소만 포함됩니다.
접근성 창에서 접근성 트리 내 요소의 위치를 검사합니다.
이 뷰에서는 단일 노드와 상위 노드만 탐색할 수 있습니다. 접근성 트리 전체를 탐색하려면 다음 단계를 따르세요.
(미리보기) 전체 페이지 접근성 트리 살펴보기
접근성 트리의 전체 페이지 보기를 통해 트리 전체를 살펴보고 웹 콘텐츠가 보조 기술에 노출되는 방식을 더 잘 이해할 수 있습니다.
접근성 트리를 탐색하려면 다음 안내를 따르세요.
전체 페이지 접근성 트리 사용 설정을 선택합니다.
상단의 작업 모음에서 DevTools 새로고침을 클릭합니다.
요소 패널의 오른쪽 상단에서
접근성 트리 보기로 전환 버튼을 전환합니다.
접근성 트리를 둘러보세요. 노드를 펼치거나 클릭하여 계산된 속성에서 세부정보를 확인할 수 있습니다.
노드를 선택하고
DOM 트리 뷰로 전환 버튼을 클릭하여 DOM 트리로 다시 전환합니다.
이제 해당 DOM 노드가 선택됩니다. DOM 노드와 접근성 트리 노드 간의 매핑을 이해하는 데 유용한 방법입니다.
요소의 ARIA 속성 보기
ARIA 속성을 사용하면 스크린 리더가 페이지 콘텐츠를 제대로 표시하는 데 필요한 모든 정보를 확보할 수 있습니다.
접근성 창에서 요소의 ARIA 속성을 확인할 수 있습니다.
화면에서 요소의 소스 순서 보기
페이지의 요소가 소스의 순서대로 표시되지 않을 때도 있습니다. 이렇게 하면 보조 테크를 사용하는 사용자가 웹을 탐색할 때 혼란을 야기할 수 있습니다.
웹사이트에서 소스 주문을 확인하고 디버그하는 방법은 다음과 같습니다.
- 페이지에서 요소를 검사합니다.
- 요소 > 접근성 > 소스 순서 뷰어에서
소스 순서 표시를 선택합니다.
표시 영역에서 DevTools는 중첩된 요소에 테두리의 윤곽선을 표시하고 소스 순서에 해당하는 숫자로 표시합니다.
요소의 계산된 접근성 속성 보기
일부 접근성 속성은 브라우저에서 동적으로 계산됩니다. 이러한 속성은 접근성 창의 계산된 속성 섹션에서 확인할 수 있습니다.
접근성 창에서 요소의 계산된 접근성 속성을 확인합니다.
저대비 텍스트 찾기 및 수정하기
DevTools는 저대비 문제를 자동으로 찾아 문제 해결에 도움이 되는 더 나은 색상을 제안할 수 있습니다. 자세한 내용은 웹사이트의 가독성 높이기를 참고하세요.