접근성 참조

이 페이지는 크롬의 접근성 기능에 대한 포괄적 인 참조입니다 DevTools.It 웹 개발자를 위한 것입니다:

• 개발자 도구(예:여는 방법)에 대한 기본적인 이해가 있어야 합니다.
• 접근성 원칙 및 모범 사례를 잘 알고 있습니다.

이 참조의 목적은 페이지의 액세스 가능성을 검사하는 데 도움이 될 수 있는 모든 도구에서 사용할 수 있는 도구를 찾는 데 도움이 되는 것입니다.

화면 판독기와 같은 보조 기술로 개발자 도구 탐색에 대한 도움말을 찾고 있다면 보조 기술로 크롬 개발자 도구 탐색 을 참조하십시오.

크롬 개발자 도구의 내게 필요한 옵션 기능 개요

이 섹션에서는 개발자 도구가 전반적인 내게 필요한 옵션 툴킷에 어떻게 들어 맞는지 설명합니다.

페이지에 액세스 할 수 있는지 여부를 결정할 때 다음 두 가지 일반적인 질문을 염두에 두어야합니다:

1. 키보드 또는 스크린 리더로 페이지를 탐색할 수 있습니까?
2. 화면 판독기에 대해 페이지의 요소가 제대로 표시되어 있습니까?

일반적으로 개발자 도구는 질문#2 와 관련된 오류를 수정하는 데 도움이 될 수 있습니다. 질문#1 은 마찬가지로 중요하지만 불행히도 개발자는 당신을 도울 수 없습니다. 질문#1 과 관련된 오류를 찾는 유일한 방법은 키보드 또는 스크린 리더와 함께 페이지를 직접 사용하는 것입니다. 자세한 내용은 접근성 검토를 수행하는 방법을 참조하십시오.

페이지의 접근성 감사

일반적으로 감사 패널을 사용하여 다음 사항을 결정합니다:

• 화면 판독기에 대한 페이지가 올바르게 표시됩니다.
• 페이지의 텍스트 요소에는 충분한 명암비가 있습니다. 색상 선택기에서 텍스트 요소의 대비 비율 보기를 참조하십시오.

페이지 감사:

1. 감사하려는 페이지로 이동합니다.

2. 개발자 도구에서 감사 탭을 클릭합니다. 개발자 도구는 다양한 구성 옵션을 보여줍니다.

   

3. 장치에 대해 모바일 장치를 시뮬레이션하려면 모바일을 선택합니다. 이 옵션은 사용자 에이전트 문자열을 다르게 변경하고 뷰포트의 크기를 조정합니다. 페이지의 모바일 버전이 데스크톱 버전과 다르게 표시되는 경우 이 옵션은 감사 결과에 큰 영향을 줄 수 있습니다.

4. 감사 섹션에서 액세스 가능성이 활성화되어 있는지 확인합니다. 보고서에서 제외하려면 다른 범주를 사용하지 않도록 설정합니다. 원하는 경우 활성화 된 상태로 두십시오.페이지의 품질을 향상시킬 수있는 다른 방법을 찾으십시오.

5. 이는 로드 성능을 분석할 때 유용합니다. 이 옵션은 접근성 점수와 관련이 없으므로 원하는만큼 사용할 수 있습니다.

6. 저장소 지우기 확인란을 사용하면 페이지를 로드하기 전에 모든 저장소를 지우거나 페이지 로드 간에 저장소를 보존할 수 있습니다. 이 옵션은 또한 접근성 점수 아마 무관,그래서 당신은 당신이 원하는 무엇이든 사용할 수 있습니다.

7. 감사 실행을 클릭합니다. 10~30 초 후에 개발자 도구는 보고서를 제공합니다.보고서는 페이지의 접근성을 개선하는 방법에 대한 다양한 팁을 제공합니다.

   

8. 그것에 대해 자세히 알아보려면 감사를 클릭하십시오.

   

9. 자세히 보기를 클릭하여 감사 문서를 봅니다.

   

같이 보기: 도끼 확장

감사 패널이 아닌 도끼 확장을 사용하는 것이 좋습니다.그들은 일반적으로 동일한 정보를 제공,이후 도끼는 파워를 기본 엔진 소프트웨어 패널. 도끼 확장은 다른 사용자 인터페이스를 가지고 있으며 감사를 약간 다르게 설명합니다.도끼 확장이 감사 패널을 통해 가지고있는 한 가지 장점은 당신이 검사 및 실패 노드를 강조 표시 할 수 있다는 것입니다.