이 가이드는 스크린 리더와 같은 보조 테크에 주로 의존하는 사용자가 Chrome DevTools에 액세스하고 이를 사용하는 것을 목표로 합니다. Chrome DevTools는 Chrome 브라우저에 내장된 웹 개발자 도구 모음입니다. 웹페이지의 접근성 향상과 관련된 DevTools 기능을 찾는 경우 접근성 참조를 확인하세요.
DevTools의 접근성은 아직 준비 중입니다. 일부 패널과 탭은 다른 패널과 탭보다 보조 기술과 함께 더 잘 작동합니다. 이 가이드에서는 가장 액세스하기 쉬운 패널을 안내하고 이 과정에서 발생할 수 있는 특정 문제를 중점적으로 설명합니다.
개요
시작하기 전에 DevTools UI의 구조에 대한 멘탈 모델을 갖추면 도움이 됩니다. DevTools는 ARIA tablist로 구성된 일련의 패널로 구성되어 있습니다. 예를 들면 다음과 같습니다.
각 패널의 콘텐츠 영역 내에는 여러 가지 도구가 있으며, 문서에서는 이를 탭 또는 창이라고 합니다. 예를 들어 Elements 패널에는 이벤트 리스너, 접근성 트리 등을 검사하는 추가 탭이 포함되어 있습니다. 탭과 창의 차이는 다소 임의적입니다. 두 용어 중 하나가 표시되는 유일한 이유는 공식 DevTools 문서의 나머지 부분과 일관성을 유지하기 위해서입니다.
단축키
DevTools 단축키 참조는 유용한 요약본입니다. 북마크하고 여러 패널을 살펴볼 때 다시 참고하세요.
DevTools 열기
시작하려면 Chrome DevTools 열기를 읽어보세요. 단축키나 메뉴 항목을 통해 DevTools를 여는 다양한 방법이 있습니다.
패널 간 이동하기
키보드로 탐색
- DevTools를 열고 Control+] 또는 Command+] (Mac)를 눌러 다음 패널에 포커스를 맞춥니다.
- Control+[ 또는 Command+[ (Mac)를 눌러 이전 패널에 포커스를 맞춥니다.
- Shift+Tab을 사용하여 포커스를 패널의
tablist로 이동하고 화살표 키를 사용하여 패널을 변경할 수도 있지만 앞서 언급한 단축키를 사용하는 것이 더 빠를 수도 있습니다.
알려진 문제
- 콘솔 및 성능 패널과 같은 일부 패널은 활성화되는 즉시 콘텐츠 영역으로 포커스를 이동할 수 있습니다. 따라서 화살표 키를 사용한 탐색이 어려울 수 있습니다.
- 선택한 패널의 이름은 패널에서 포커스가 맞춰진 콘텐츠를 읽은 후에만 음성으로 들립니다. 따라서 이를 놓치기 쉽습니다.
명령어 메뉴로 탐색
특정 패널에 포커스를 맞추려면 명령어 메뉴를 사용합니다.
- DevTools가 열린 상태에서 Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 Command 메뉴를 엽니다. 명령어 메뉴는 퍼지 검색 자동 완성 콤보 상자입니다.
- 열려는 패널의 이름을 입력한 다음 아래쪽 화살표 키보드를 사용하여 올바른 옵션으로 이동합니다.
- Enter를 눌러 명령어를 실행합니다.
예를 들어 요소 패널을 열려면 다음 단계를 따르세요.
- 명령어 메뉴를 엽니다.
- E를 입력한 다음 L을 입력합니다. Panel > Show Elements 옵션이 선택되었습니다.
- Enter를 눌러 패널을 여는 명령어를 실행합니다.
이 방법으로 패널을 열면 패널 자체의 콘텐츠로 포커스가 이동합니다. Elements 패널의 경우 포커스가 DOM 트리로 이동합니다.
요소 패널
페이지의 요소 검사
- 스크린 리더의 커서를 사용하여 검사할 요소로 이동합니다.
- 요소를 마우스 오른쪽 버튼으로 클릭하는 것을 시뮬레이션하여 컨텍스트 메뉴를 엽니다.
- 검사 옵션을 선택합니다. 그러면 요소 패널이 열리고 DOM 트리의 요소에 포커스를 둡니다.
DOM 트리는 ARIA tree로 제공됩니다. 예를 보려면 키보드로 DOM 트리 탐색을 참고하세요.
DOM 트리에서 요소의 코드 복사
- DOM 트리의 노드에 포커스를 두고 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴를 표시합니다.
- 복사 옵션을 펼칩니다.
- outerHTML 복사를 선택합니다.
알려진 문제
- Copy outerHTML은 현재 노드를 선택하지 않고 대신 상위 노드를 선택하는 경우가 많습니다. 그러나 요소의 콘텐츠는 복사한 outerHTML에 여전히 있어야 합니다.
DOM 트리에서 요소의 속성 수정
- DOM 트리의 노드에 포커스를 두고 Enter 키를 눌러 수정할 수 있도록 설정합니다.
- Tab을 눌러 속성 값 사이를 이동합니다. '공백'이라는 소리가 들리면 빈 텍스트 입력 내부에 있으며 새 속성 값을 입력할 수 있습니다.
- Control+Enter 또는 Command+Enter (Mac)를 눌러 변경사항을 승인하고 요소의 전체 내용을 듣습니다.
알려진 문제
- 텍스트 입력에 입력했을 때 피드백이 표시되지 않습니다. 오타가 있고 화살표 키를 사용하여 입력을 탐색해도 피드백이 표시되지 않습니다. 작업을 확인하는 가장 쉬운 방법은 변경사항을 수락한 후 전체 요소가 발표될 때까지 수신 대기하는 것입니다.
DOM 트리에서 요소의 HTML 수정
- DOM 트리의 노드에 포커스를 두고 Enter 키를 눌러 수정할 수 있도록 설정합니다.
- Tab을 눌러 속성 값 사이를 이동합니다. 요소의 이름(예: 'h2')이 들리면 텍스트 입력 내부에 있는 것이므로 요소의 유형을 변경할 수 있습니다.
- Control+Enter 또는 Command+Enter (Mac)를 눌러 변경사항을 수락합니다.
예를 들어 h3를 입력하고 Control+Enter 또는 Command+Enter (Mac)를 누르면 요소의 시작 및 종료 태그가 h3로 변경됩니다.
요소 패널 탭
Elements 패널에는 요소에 적용된 CSS 또는 접근성 트리의 요소 위치를 검사하기 위한 추가 탭이 포함되어 있습니다.
- DOM 트리의 노드에 포커스를 두고 스타일 창이 선택된다는 안내가 들릴 때까지 Tab을 누릅니다.
- 사용 가능한 다른 탭을 탐색하려면 오른쪽 화살표를 사용합니다.
DOM 트리는 href 속성이 있는 요소를 포커스 가능한 링크로 변환하므로 스타일 창으로 이동하려면 Tab 키를 두 번 이상 눌러야 할 수도 있습니다.
알려진 문제
키보드로 DOM 중단점 및 속성 탭에 액세스할 수 없습니다.
스타일 창
스타일 창에는 스타일 필터링, 요소 상태 전환 (예: :active 및 :focus), 클래스 전환, 새 클래스 추가를 위한 컨트롤이 있습니다. DOM 트리에서 포커스가 있는 요소에 현재 적용된 스타일을 탐색하고 수정할 수 있는 강력한 스타일 검사 도구도 있습니다.
Styles 창에 관해 알아야 할 주요 개념은 DOM 트리에서 현재 선택된 노드의 스타일만 표시한다는 것입니다. 예를 들어 <header> 노드의 스타일 검사를 완료했고 이제 <footer> 노드의 스타일을 확인하려고 한다고 가정해 보겠습니다. 이렇게 하려면 먼저 DOM 트리에서 <footer> 노드를 선택해야 합니다. Inspect 워크플로를 사용하여 DOM 트리에 포커스를 둔 footer 노드 (예: 바닥글 내의 링크) 근처에 있는 노드를 검사한 후 키보드를 사용하여 관심 있는 정확한 노드로 이동하는 것이 더 빠를 수 있습니다.
Styles 창 탐색
모든 스타일 도구가 어떤 식으로든 Styles 창에 다시 연결되므로 이 도구의 전문가가 되는 것이 좋습니다.
- 스타일 창에 포커스를 두고 Tab 키를 눌러 안으로 포커스를 이동하고 콘텐츠를 탐색합니다.
- 첫 번째 스타일이 활성화될 때까지 Tab을 누릅니다. 스크린 리더를 사용하고 있다면 이 첫 번째 스타일이 'element.style {}'로 음성으로 안내됩니다.
- 아래쪽 화살표를 눌러 스타일 목록을 특정 순서대로 탐색합니다. 스크린 리더는 CSS 파일의 이름, 스타일이 나타나는 줄 번호, 스타일 이름 자체로 시작하는 각 스타일을 알려줍니다. 예: "main.css:233 .card__img {}"
- 스타일을 자세히 검사하려면 Enter를 누릅니다. 스타일 이름의 수정 가능한 버전으로 포커스가 이동합니다.
- Tab을 눌러 각 CSS 속성의 수정 가능한 버전과 해당 값 간에 이동합니다. 각 스타일 블록 끝에는 수정 가능한 빈 텍스트 필드가 있습니다. 이 입력란을 사용하여 CSS 속성을 추가할 수 있습니다.
- Tab 키를 계속 눌러 스타일 목록 간에 이동하거나 Esc를 눌러 이 모드를 종료하고 화살표 키 탐색으로 돌아갈 수 있습니다.
추가 단축키는 스타일 창 키보드 참조를 참고하세요.
알려진 문제
- Filter의 수정 가능한 텍스트 필드를 사용하면 더 이상 스타일 목록을 탐색할 수 없습니다.
요소 상태 전환
:active 또는 :focus와 같은 요소의 상태를 전환하는 방법은 다음과 같습니다.
- 스타일 창으로 이동하여 요소 상태 전환 버튼에 포커스가 있을 때까지 Tab 키를 누릅니다.
- 요소 상태 모음을 펼치려면 Enter를 누르세요. 요소 상태는 체크박스 그룹으로 표시됩니다.
- 첫 번째 상태인
:active에 포커스가 있을 때까지 Tab을 누릅니다. - 스페이스바를 눌러 사용 설정합니다. DOM 트리에서 현재 선택된 요소에
:active스타일이 있다면 이제 해당 요소가 적용됩니다. - Tab을 계속 눌러 사용 가능한 모든 상태를 탐색합니다.
기존 수업 추가
요소 상태 전환 버튼 옆에 요소 클래스 버튼이 있습니다. Tab을 누른 후 Enter를 눌러 포커스를 포커스를 이동합니다. 포커스가 Add New Class라는 수정 텍스트 필드로 이동합니다.
요소 클래스 버튼은 주로 기존 클래스를 요소에 추가하는 데 사용됩니다. 예를 들어 스타일시트에 .clearfix라는 도우미 클래스가 포함되어 있으면 수정 텍스트 필드 내에서 .를 눌러 클래스의 추천 목록을 보고 아래쪽 화살표를 사용하여 .clearfix 추천을 찾을 수 있습니다. 또는 클래스 이름을 직접 입력하고 Enter 키를 눌러 적용합니다.
새 스타일 규칙 추가
요소 클래스 버튼 옆에는 새 스타일 규칙 버튼이 있습니다. Tab을 누르고 Enter를 눌러 포커스를 포커스를 이동합니다. 포커스가 스타일 검사기 내부의 수정 가능한 텍스트 필드로 이동합니다. 필드의 초기 텍스트 콘텐츠는 DOM 트리에서 선택된 요소의 태그 이름입니다. 이 필드에 원하는 클래스 이름을 입력한 후 Tab을 눌러 CSS 속성을 할당할 수 있습니다.
계산된 탭
계산됨 탭에 포커스를 두고 Tab을 눌러 안으로 포커스를 이동하고 콘텐츠를 탐색합니다. 계산됨 탭에는 어떤 CSS 속성이 실제로 특정성 순으로 요소에 적용되는지 살펴볼 수 있는 컨트롤이 있습니다.
모든 계산된 스타일 탐색
계산된 스타일의 컬렉션에 도달할 때까지 Tab을 누릅니다. 이러한 항목은 ARIA tree로 표시됩니다. 목록 상자를 펼치면 계산된 스타일을 적용하는 CSS 선택자가 표시됩니다. 이러한 선택기는 특정성에 따라 구성됩니다. 스크린 리더가 계산된 값, 현재 일치하는 CSS 선택기, 선택기가 포함된 스타일시트의 파일 이름, 선택기의 줄 번호를 알려줍니다.
알려진 문제
- Filter 텍스트 필드를 사용하면 더 이상 스타일을 검사할 수 없습니다.
이벤트 리스너 탭
Elements 패널 내에서 이벤트 리스너 탭을 사용하여 요소에 적용된 이벤트 리스너를 검사할 수 있습니다. Styles 창에 포커스를 두고 오른쪽 화살표를 눌러 Event Listeners 탭으로 이동합니다.
이벤트 리스너 살펴보기
이벤트 리스너는 ARIA tree로 표시됩니다. 화살표 키를 사용하여 탐색할 수 있습니다. 스크린 리더는 이벤트 리스너가 연결된 DOM 객체의 이름과 이벤트 리스너가 정의된 파일 이름, 줄 번호를 알려줍니다.
접근성 창
접근성 창에 포커스가 있는 상태에서 Tab 키를 눌러 포커스를 내부로 이동하고 콘텐츠를 탐색합니다. 접근성 창에는 접근성 트리, 요소에 적용된 ARIA 속성 및 계산된 접근성 속성을 탐색하기 위한 컨트롤이 있습니다.
접근성 트리
접근성 트리는 ARIA tree로 표시되며 여기서 각 treeitem는 DOM의 요소에 상응합니다. 트리는 선택한 노드에 대해 계산된 역할을 알려줍니다. div 및 span와 같은 일반 요소는 트리에서 'GenericContainer'로 표시됩니다. 화살표 키를 사용하여 트리를 순회하고 상위-하위 관계를 탐색합니다.
알려진 문제
- Accessibility 창에서 사용하는 ARIA 트리 유형이 VoiceOver와 같은 macOS 스크린 리더의 경우 Chrome에서 제대로 노출되지 않을 수 있습니다. 이 문제의 진행 상황에 대한 알림을 받으려면 Chromium 문제 #868480을 구독하세요.
- ARIA 속성 및 계산된 속성 섹션은 ARIA 트리로 마크업되지만, 현재 포커스 관리가 없으므로 키보드로 작동하지 않습니다.
감사 패널
감사 패널을 사용하면 사이트에 대해 일련의 테스트를 실행하여 성능, 접근성, 검색엔진 최적화(SEO) 및 기타 여러 카테고리와 관련된 일반적인 문제를 확인할 수 있습니다.
감사 구성 및 실행
- 감사 패널이 처음 열리면 양식 끝에 있는 감사 실행 버튼에 포커스가 맞춰집니다. 기본적으로 양식은 시뮬레이션된 3G 연결에서 모바일 에뮬레이션을 사용하여 모든 카테고리에 대해 감사를 실행하도록 구성됩니다.
- Shift+Tab을 사용하거나 탐색 모드에서 뒤로 이동하여 감사 설정을 변경합니다.
- 감사를 실행할 준비가 되면 감사 실행 버튼으로 돌아가서 Enter를 누릅니다.
- 감사를 종료할 수 있는 Cancel 버튼이 있는 모달 창으로 포커스가 이동합니다. 감사가 실행되고 페이지를 여러 번 새로고침할 때 이어콘이 여러 번 울릴 수 있습니다.
알려진 문제
- 구성 양식의 여러 섹션은 현재
fieldset요소로 마크업되지 않습니다. 탐색 모드에서 이러한 컨트롤을 탐색하면 각 섹션과 연결된 컨트롤을 더 쉽게 파악할 수 있습니다. - 감사 실행이 완료되었을 때 이어콘 또는 실시간 리전 공지가 없습니다. 일반적으로 30초 정도 걸리며 그 후에는 결과로 이동할 수 있습니다. 탐색 모드를 사용하는 것이 가장 쉽게 결과에 도달할 수 있습니다.
감사 보고서 탐색
감사 보고서는 각 감사 카테고리에 해당하는 섹션으로 구성됩니다. 각 카테고리의 점수 목록이 표시된 보고서가 열립니다. 이러한 점수는 관련 섹션으로 건너뛰는 데 사용할 수 있는 링크이기도 합니다. 각 섹션에는 통과 또는 실패한 감사와 관련된 정보가 포함된 확장 가능한 details 요소가 있습니다. 기본적으로 실패한 감사만 표시됩니다.
각 섹션은 통과한 모든 감사가 포함된 최종 details 요소로 끝납니다.
새 감사를 실행하려면 Shift+Tab 키를 사용하여 보고서를 종료하고 감사 실행 버튼을 찾습니다.