트랙 요소 포커스

케이스 바스크

Twitter GitHub 글리치

페이지의 키보드 탐색 접근성을 테스트한다고 가정해 보겠습니다. Tab 키로 페이지를 탐색할 때 포커스가 있는 요소가 숨겨져 있으므로 포커스 링이 사라지는 경우가 있습니다. DevTools에서 포커스가 설정된 요소를 추적하는 방법은 다음과 같습니다.

1. 콘솔을 엽니다.

2. Create Live Expression 을 클릭합니다.

   

   자세한 내용은 실시간 표현식으로 자바스크립트 값 실시간으로 보기를 참조하세요.

3. document.activeElement를 입력합니다.

4. Live Expression UI 외부를 클릭하여 저장합니다.

document.activeElement 아래에 표시되는 값은 표현식의 결과입니다. 이 표현식은 항상 포커스가 있는 요소를 나타내므로 이제 포커스가 있는 요소를 항상 추적할 수 있습니다.

• 결과 위로 마우스를 가져가면 표시 영역에서 포커스가 맞춰진 요소가 강조표시됩니다.
• 결과를 마우스 오른쪽 버튼으로 클릭하고 Reveal in Elements Panel을 선택하여 Elements 패널의 DOM 트리에 요소를 표시합니다.
• 결과를 마우스 오른쪽 버튼으로 클릭하고 Store as global 변수를 선택하여 콘솔에서 사용할 수 있는 노드에 대한 변수 참조를 만듭니다.