기본 DOM 순서의 중요성
네이티브 요소로 작업하면 포커스 동작을 효과적으로 알 수 있습니다. 자동으로 탭 순서에 삽입되기 때문입니다. 위치를 지정할 수 있습니다.
예를 들어
있습니다. Tab를 누르면 각 버튼이 순서대로 포커스가 이동합니다. 코드 블록을 클릭하여
아래에서 포커스 탐색 시작점을 이동한 다음 Tab 키를 눌러 포커스를 이동하세요.
사용할 수 있습니다.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
다만 중요한 점은 CSS를 사용하면
DOM에서는 한 순서로 존재하지만 화면에서는 다른 순서로 표시됩니다. 대상
예를 들어 float와 같은 CSS 속성을 사용하여 버튼 하나를 오른쪽으로 이동하면
버튼이 화면에서 다른 순서로 표시됩니다. 그러나 그들의 순서가
DOM은 동일하게 유지되며 탭 순서도 동일하게 유지됩니다. 사용자가 탭을 통해
버튼은 직관적이지 않은 순서로 포커스를 얻습니다. 먼저
아래의 코드 블록을 사용하여 포커스 탐색 시작점을 이동한 다음 Tab를 눌러
버튼 간에 포커스를 이동합니다.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
CSS를 사용하여 화면에서 요소의 시각적 위치를 변경할 때는 주의해야 합니다. 이로 인해 탭 순서가 무작위로 달라져 혼란스러울 수 있습니다. 키보드에 의존하는 사용자들에게 적합합니다. 따라서 Web AIM 체크리스트에는 섹션 1.3.2 읽기 및 탐색 순서는 코드 순서에 따라 결정되는 논리적이고 직관적이어야 합니다.
페이지를 자주 탭 이동하면서 제대로 작동하는지 확인합니다. 실수로 탭 순서를 변경하지 않았는지 확인합니다. 좋은 습관을 들이고 큰 노력이 필요하지 않은 것입니다
화면 밖 콘텐츠
현재 표시되지 않지만 여전히 표시해야 하는 콘텐츠가 있는 경우 를 호출할 수 있습니다(예: 반응형 측면 탐색 메뉴). 이와 같은 요소가 있을 때 화면 밖에 있을 때 포커스를 받으면 포커스가 사용자가 페이지를 탭할 때 뚜렷하게 사라졌다가 다시 나타납니다. 바람직하지 않은 결과를 발생시킵니다. 이상적으로는, 패널로 하여금 집중력이 높아지지 않게 하고 사용자가 상호작용할 수 있을 때만 초점을 맞추도록 합니다. 사용할 수 있습니다.
때로는 초점이 어디에 있는지 알아내기 위해 약간의 탐정 작업이 필요합니다.
사라졌습니다. 콘솔에서 document.activeElement를 사용하여
요소에 포커스가 맞춰져 있습니다.
어떤 오프스크린 요소에 포커스가 있는지 알면 이 요소를
display: none 또는 visibility: hidden로 설정하고, 사용자에게 표시하기 전에 다시 display:
block 또는 visibility: visible로 설정합니다.
일반적으로 개발자는
탭 순서가 사라지지 않거나 논리적인 탭 순서에서 벗어나지 않는지
시퀀스입니다. 이러한 경우 해당 정보를 적절하게 숨기고 있는지 확인해야 합니다.
display: none 또는 visibility: hidden의 오프스크린 콘텐츠 또는
요소 재정렬하기 DOM에서 물리적 위치를 사용하므로 이러한 요소가 논리적
있습니다.