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