보조 기술로 Chrome DevTools 탐색

Rob Dodson

이 가이드는 주로 스크린 리더와 같은 보조 기술을 사용하는 사용자가 Chrome DevTools에 액세스하고 이를 사용하는 데 도움을 주기 위한 것입니다. Chrome DevTools는 Chrome 브라우저에 내장된 웹 개발자 도구 모음입니다. 웹페이지의 접근성 개선과 관련된 DevTools 기능을 찾고 있다면 접근성 참조를 참고하세요.

DevTools의 접근성은 현재 개선 중입니다. 일부 패널과 탭은 다른 패널과 탭보다 보조 기술과 더 잘 작동합니다. 이 가이드에서는 가장 액세스하기 쉬운 패널을 안내하고 진행 중에 발생할 수 있는 특정 문제를 강조 표시합니다.

개요

시작하기 전에 DevTools UI의 구조에 대한 멘탈 모델을 갖는 것이 좋습니다. DevTools는 ARIA tablist로 구성된 일련의 패널로 나뉩니다. 예를 들면 다음과 같습니다.

• 요소 패널을 사용하면 DOM 노드 또는 CSS를 보고 변경할 수 있습니다.
• 콘솔 패널을 사용하면 JavaScript 로그를 읽고 객체를 실시간으로 수정할 수 있습니다.

각 패널의 콘텐츠 영역에는 문서에서 탭 또는 창이라고 하는 다양한 도구가 있습니다. 예를 들어 요소 패널에는 이벤트 리스너, 접근성 트리 등을 검사하는 추가 탭이 포함되어 있습니다. 탭과 창의 구분은 다소 임의적입니다. 두 용어가 모두 표시되는 이유는 나머지 공식 DevTools 문서와 일관성을 유지하기 위해서입니다.

단축키

DevTools 단축키 참조는 유용한 요약본입니다. 북마크에 추가하고 다양한 패널을 살펴볼 때 참고하세요.

DevTools 열기

시작하려면 Chrome DevTools 열기를 읽어보세요. 단축키나 메뉴 항목을 통해 DevTools를 여는 방법에는 여러 가지가 있습니다.

패널 간 이동

키보드로 탐색

• DevTools가 열려 있는 상태에서 Control+] 또는 Command+] (Mac) 키를 눌러 다음 패널에 포커스를 맞춥니다.
• Control+[ 또는 Command+[ (Mac) 키를 눌러 이전 패널에 포커스를 맞춥니다.
• Shift+Tab을 사용하여 포커스를 패널의 tablist로 이동하고 화살표 키를 사용하여 패널을 변경할 수도 있지만, 앞서 언급한 단축키를 사용하는 것이 더 빠를 수 있습니다.

알려진 문제

• Console 및 Performance 패널과 같은 일부 패널은 활성화되는 즉시 포커스가 콘텐츠 영역으로 이동할 수 있습니다. 이로 인해 화살표 키로 탐색하기가 어려울 수 있습니다.
• 선택한 패널의 이름은 패널에서 포커스가 지정된 콘텐츠를 읽은 후에만 알려줍니다. 이로 인해 놓치기 쉬울 수 있습니다.

명령어 메뉴로 탐색

특정 패널에 포커스를 맞추려면 명령어 메뉴를 사용합니다.

1. DevTools가 열려 있는 상태에서 Control+Shift+P 또는 Command+Shift+P (Mac)를 눌러 명령어 메뉴를 엽니다. 명령어 메뉴는 유사 검색 자동 완성 콤보박스입니다.
2. 열려는 패널의 이름을 입력한 다음 아래쪽 화살표 키보드를 사용하여 올바른 옵션으로 이동합니다.
3. Enter 키를 눌러 명령어를 실행합니다.

예를 들어 요소 패널을 열려면 다음 단계를 따르세요.

1. 명령어 메뉴를 엽니다.
2. E 다음에 L을 입력합니다. 패널 > 요소 표시 옵션이 선택되어 있습니다.
3. Enter 키를 눌러 패널을 여는 명령어를 실행합니다.

이렇게 패널을 열면 포커스가 패널 자체의 콘텐츠로 이동합니다. 요소 패널의 경우 포커스가 DOM 트리로 이동합니다.

요소 패널

페이지의 요소 검사

1. 스크린 리더의 커서를 사용하여 검사하려는 요소로 이동합니다.
2. 요소를 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 엽니다.
3. 검사 옵션을 선택합니다. 그러면 요소 패널이 열리고 DOM 트리의 요소에 포커스가 설정됩니다.

DOM 트리는 ARIA tree로 배치됩니다. 예시는 키보드로 DOM 트리 탐색을 참고하세요.

DOM 트리의 요소 코드 복사

1. DOM 트리의 노드에 포커스가 있는 상태에서 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 표시합니다.
2. 복사 옵션을 펼칩니다.
3. outerHTML 복사를 선택합니다.

알려진 문제

• 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로 변경됩니다.

요소 패널 탭

요소 패널에는 요소에 적용된 CSS 또는 접근성 트리에서 요소의 위치와 같은 항목을 검사하기 위한 추가 탭이 포함되어 있습니다.

• DOM 트리의 노드에 포커스가 있는 상태에서 스타일 창이 선택되었다는 메시지가 들릴 때까지 탭 키를 누릅니다.
• 오른쪽 화살표를 사용하여 사용 가능한 다른 탭을 살펴봅니다.

DOM 트리는 href 속성이 있는 요소를 포커스를 설정할 수 있는 링크로 변환하므로 스타일 창으로 이동하려면 탭 키를 두 번 이상 눌러야 할 수 있습니다.

알려진 문제

DOM 중단점 및 속성 탭은 키보드로 액세스할 수 없습니다.

스타일 창

스타일 창에는 스타일 필터링, 요소 상태 전환 (예: :active 및 :focus), 클래스 전환, 새 클래스 추가를 위한 컨트롤이 있습니다. DOM 트리에서 포커스가 있는 요소에 현재 적용된 스타일을 탐색하고 수정할 수 있는 강력한 스타일 검사 도구도 있습니다.

스타일 창에 관해 이해해야 하는 주요 개념은 DOM 트리에서 현재 선택된 노드의 스타일만 표시된다는 것입니다. 예를 들어 <header> 노드의 스타일 검사를 완료했으며 이제 <footer> 노드의 스타일을 확인하려고 한다고 가정해 보겠습니다. 이렇게 하려면 먼저 DOM 트리에서 <footer> 노드를 선택해야 합니다. 검사 워크플로를 사용하여 footer 노드 근처에 있는 노드 (예: 바닥글 내 링크)를 검사하면 더 빠를 수 있습니다. 그러면 DOM 트리에 포커스가 맞춰지고 키보드를 사용하여 관심 있는 정확한 노드로 이동할 수 있습니다.

스타일 창 탐색

모든 스타일 도구는 어떤 식으로든 스타일 창에 다시 연결되므로 먼저 이 도구의 전문가가 되는 것이 좋습니다.

• 스타일 창에 포커스가 있는 상태에서 탭 키를 눌러 포커스를 창 안으로 이동하고 콘텐츠를 살펴봅니다.
• 첫 번째 스타일이 활성화될 때까지 Tab 키를 누릅니다. 스크린 리더를 사용하는 경우 이 첫 번째 스타일은 'element.style {}'로 표시됩니다.
• 아래쪽 화살표를 눌러 구체성 순으로 스타일 목록을 탐색합니다. 화면 리더는 CSS 파일 이름, 스타일이 표시되는 줄 번호, 스타일 이름 자체로 시작하여 각 스타일을 알립니다. 예: 'main.css:233 .card__img {}'
• Enter 키를 눌러 스타일을 자세히 살펴봅니다. 포커스는 수정 가능한 스타일 이름 버전에서 시작됩니다.
• 탭 키를 눌러 각 CSS 속성의 수정 가능한 버전과 해당 값 간에 이동합니다. 각 스타일 블록 끝에는 CSS 속성을 추가하는 데 사용할 수 있는 빈 수정 가능한 텍스트 필드가 있습니다.
• 탭 키를 계속 눌러서 스타일 목록을 이동하거나 이탈 키를 눌러 이 모드를 종료하고 화살표 키를 사용한 탐색으로 돌아갈 수 있습니다.

추가 단축키는 스타일 창 키보드 참조를 참고하세요.

알려진 문제

• 수정 가능한 필터 텍스트 필드를 사용하면 더 이상 스타일 목록을 탐색할 수 없습니다.

요소 상태 전환

:active 또는 :focus와 같은 요소의 상태를 전환하려면 다음을 실행합니다.

1. 스타일 창으로 이동하고 요소 상태 전환 버튼에 포커스가 있을 때까지 탭 키를 누릅니다.
2. Enter 키를 눌러 요소 상태 컬렉션을 펼칩니다. 요소 상태는 체크박스 그룹으로 표시됩니다.
3. 첫 번째 상태인 :active에 포커스가 있을 때까지 Tab 키를 누릅니다.
4. 스페이스바를 눌러 사용 설정합니다. DOM 트리에서 현재 선택된 요소에 :active 스타일이 있으면 이제 적용됩니다.
5. 탭을 계속 눌러 사용 가능한 모든 상태를 살펴봅니다.

종료 클래스 추가

요소 상태 전환 버튼 옆에 요소 클래스 버튼이 있습니다. Tab 키와 Enter 키를 차례로 눌러 초점을 이 버튼으로 이동합니다. 포커스가 Add New Class(새 수업 추가) 라벨이 지정된 수정 텍스트 입력란으로 이동합니다.

요소 클래스 버튼은 주로 요소에 기존 클래스를 추가하는 데 사용됩니다. 예를 들어 스타일시트에 .clearfix라는 도우미 클래스가 포함되어 있는 경우 수정 텍스트 필드 내에서 .를 눌러 클래스 추천 목록을 확인하고 아래쪽 화살표를 사용하여 .clearfix 추천을 찾을 수 있습니다. 또는 수업 이름을 직접 입력하고 Enter 키를 눌러 적용합니다.

새 스타일 규칙 추가

요소 클래스 버튼 옆에 새 스타일 규칙 버튼이 있습니다. Tab 키를 눌러 포커스를 이동한 다음 Enter 키를 누릅니다. 포커스가 스타일 검사기 내부의 수정 가능한 텍스트 필드로 이동합니다. 필드의 초기 텍스트 콘텐츠는 DOM 트리에서 선택된 요소의 태그 이름입니다. 이 필드에 원하는 클래스 이름을 입력한 다음 탭 키를 눌러 CSS 속성을 할당할 수 있습니다.

계산된 탭

포커스가 계산됨 탭에 있는 상태에서 Tab 키를 눌러 포커스를 내부로 이동하고 콘텐츠를 살펴봅니다. 계산됨 탭에는 특수성 순으로 요소에 실제로 적용되는 CSS 속성을 살펴볼 수 있는 컨트롤이 있습니다.

모든 계산된 스타일 살펴보기

계산된 스타일 모음이 표시될 때까지 Tab 키를 누릅니다. 이는 ARIA tree로 표시됩니다. 목록 상자를 펼치면 계산된 스타일을 적용하는 CSS 선택자가 표시됩니다. 이러한 선택자는 구체성별로 정리됩니다. 화면 리더는 계산된 값, 현재 일치하는 CSS 선택기, 선택기가 포함된 스타일시트의 파일 이름, 선택기의 줄 번호를 알려줍니다.

알려진 문제

• 필터 텍스트 필드를 사용하면 더 이상 스타일을 검사할 수 없습니다.

이벤트 리스너 탭

요소 패널 내에서 이벤트 리스너 탭을 사용하여 요소에 적용된 이벤트 리스너를 검사할 수 있습니다. 스타일 창에 포커스가 있는 상태에서 오른쪽 화살표를 눌러 이벤트 리스너 탭으로 이동합니다.

이벤트 리스너 살펴보기

이벤트 리스너는 ARIA tree로 표시됩니다. 화살표 키를 사용하여 탐색할 수 있습니다. 화면 리더는 이벤트 리스너가 연결된 DOM 객체의 이름과 이벤트 리스너가 정의된 파일 이름 및 줄 번호를 알려줍니다.

접근성 창

접근성 창에 포커스가 있는 상태에서 탭 키를 눌러 포커스를 내부로 이동하고 콘텐츠를 살펴봅니다. 접근성 창에는 접근성 트리, 요소에 적용된 ARIA 속성, 계산된 접근성 속성을 탐색하기 위한 컨트롤이 있습니다.

접근성 트리

접근성 트리는 각 treeitem가 DOM의 요소에 해당하는 ARIA tree로 표시됩니다. 트리는 선택한 노드의 계산된 역할을 표시합니다. div 및 span와 같은 일반 요소는 트리에서 'GenericContainer'로 공지됩니다. 화살표 키를 사용하여 트리를 탐색하고 상위-하위 관계를 살펴봅니다.

알려진 문제

• 접근성 창에서 사용하는 ARIA 트리의 유형이 VoiceOver와 같은 macOS 스크린 리더용 Chrome에 제대로 노출되지 않을 수 있습니다. 이 문제의 진행 상황을 알 수 있도록 Chromium 문제 #868480을 구독하세요.
• ARIA 속성 및 계산된 속성 섹션은 ARIA 트리로 마크업되지만 현재 포커스 관리가 없으므로 키보드로 작동할 수 없습니다.

감사 패널

감사 패널을 사용하면 사이트에 대해 일련의 테스트를 실행하여 성능, 접근성, SEO, 기타 여러 카테고리와 관련된 일반적인 문제를 확인할 수 있습니다.

감사 구성 및 실행

1. 감사 패널을 처음 열면 양식 끝에 있는 감사 실행 버튼에 포커스가 설정됩니다. 기본적으로 양식은 시뮬레이션된 3G 연결에서 모바일 에뮬레이션을 사용하여 모든 카테고리의 감사를 실행하도록 구성됩니다.
2. Shift+Tab을 사용하거나 탐색 모드에서 뒤로 이동하여 감사 설정을 변경합니다.
3. 감사를 실행할 준비가 되면 감사 실행 버튼으로 돌아가 Enter 키를 누릅니다.
4. 포커스가 감사를 종료할 수 있는 취소 버튼이 있는 모달 창으로 이동합니다. 감사가 실행되고 페이지가 여러 번 새로고침될 때 일련의 이퀄라이저 소리가 들릴 수 있습니다.

알려진 문제

• 구성 양식의 여러 섹션은 현재 fieldset 요소로 마크업되어 있지 않습니다. 탐색 모드에서 섹션을 탐색하여 각 섹션과 연결된 컨트롤을 파악하는 것이 더 쉬울 수 있습니다.
• 감사 실행이 완료되면 이어콘이나 실시간 지역 안내가 없습니다. 일반적으로 약 30초가 소요되며 그 후에는 결과로 이동할 수 있습니다. 둘러보기 모드를 사용하는 것이 결과에 도달하는 가장 쉬운 방법일 수 있습니다.

감사 보고서 탐색

감사 보고서는 각 감사 카테고리에 해당하는 섹션으로 구성됩니다. 보고서가 열리면 각 카테고리의 점수 목록이 표시됩니다. 이러한 점수는 관련 섹션으로 건너뛰는 데 사용할 수 있는 링크이기도 합니다. 각 섹션에는 통과 또는 실패한 감사와 관련된 정보가 포함된 펼칠 수 있는 details 요소가 있습니다. 기본적으로 실패한 감사만 표시됩니다. 각 섹션은 통과된 모든 감사가 포함된 최종 details 요소로 끝납니다.

새 감사를 실행하려면 Shift+Tab을 사용하여 보고서를 종료하고 감사 실행 버튼을 찾습니다.