트랙 요소 포커스

Kayce Basques

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

  1. 콘솔을 엽니다.

  2. Create Live Expression 실시간 표현 만들기을 클릭합니다.

    실시간 표현을 해 보세요.

    자세한 내용은 실시간 표현식을 사용하여 자바스크립트 값 실시간 확인을 참조하세요.

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

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

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

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