기본 DOM 순서의 중요성
네이티브 요소는 DOM의 위치에 따라 탭 순서에 자동으로 삽입되므로 포커스 동작을 알아보는 데 유용합니다.
예를 들어 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를 사용하여 화면에서 요소의 시각적 위치를 변경할 때는 주의해야 합니다. 이로 인해 탭 순서가 무작위로 튀어 올라 키보드를 사용하는 사용자에게 혼란을 줄 수 있습니다. 따라서 웹 AIM 체크리스트 1.3.2 섹션에서는 코드 순서에 따라 결정된 읽기 및 탐색 순서가 논리적이고 직관적이어야 한다고 명시되어 있습니다.
일반적으로 탭 순서가 실수로 잘못되지 않았는지 확인하기 위해 가끔 페이지를 탭으로 이동해 보세요. 이 방법은 큰 노력 없이도 쉽게 습관화할 수 있는 좋은 방법입니다.
오프스크린 콘텐츠
반응형 사이드바와 같이 현재 표시되지 않지만 DOM에 있어야 하는 콘텐츠가 있는 경우 어떻게 해야 하나요? 화면 밖에 있을 때 포커스를 받는 이러한 요소가 있으면 사용자가 페이지를 탭할 때 포커스가 사라졌다가 다시 나타나는 것처럼 보일 수 있습니다. 이는 분명 바람직하지 않은 효과입니다. 이상적으로는 패널이 화면 밖에 있을 때 패널에 포커스가 설정되지 않도록 하고 사용자가 패널과 상호작용할 수 있을 때만 포커스가 설정되도록 해야 합니다.
때로는 포커스가 어디로 이동했는지 파악하기 위해 약간의 조사 작업이 필요합니다. 콘솔에서 document.activeElement를 사용하여 현재 포커스가 있는 요소를 확인할 수 있습니다.
포커스가 있는 오프스크린 요소를 알면 이를 display: none 또는 visibility: hidden로 설정한 다음 사용자에게 표시하기 전에 display:
block 또는 visibility: visible로 다시 설정할 수 있습니다.
일반적으로 개발자는 게시할 때마다 탭을 눌러 사이트를 살펴보고 탭 순서가 사라지거나 논리적 순서에서 벗어나지 않는지 확인하는 것이 좋습니다. 이 경우 display: none 또는 visibility: hidden를 사용하여 화면 밖 콘텐츠를 적절하게 숨기고 있는지 또는 DOM에서 요소의 실제 위치를 논리적 순서대로 재정렬하고 있는지 확인해야 합니다.