'순차적 포커스 탐색 시작점' 기능은 포커스가 있는 영역이 없는 경우 순차적 포커스 탐색 ([Tab] 또는 [Shift-Tab])을 위해 포커스 가능 요소를 검색하기 시작하는 위치를 정의합니다. 이는 특히 '링크 건너뛰기'와 문서의 포커스 관리와 같은 접근성 기능에 유용합니다.
HTML은 키보드 상호작용을 처리하기 위한 많은 기본 지원을 제공합니다. 즉, 운동 장애로 인해 마우스를 사용할 수 없거나 키보드에서 손을 떼는 것이 매우 효율적으로 소중한 수 밀리초를 낭비하는 것이든 상관없이 키보드를 통해 사용할 수 있는 페이지를 작성하기가 매우 쉽습니다.
키보드 처리는 포커스를 중심으로 이루어지며, 포커스가 페이지에서 키보드 이벤트가 이동할 위치를 결정합니다. 지금까지 키보드 사용자가 원활하게 사용할 수 있도록 몇 가지 추가 작업을 해야 했던 몇 가지 상황이 있습니다. focus() 메서드를 사용하면 사용자 작업에 응답하여 포커스를 둘 요소를 선택적으로 선택하여 포커스를 관리할 수 있습니다. 그러나 이 권장사항에는 많은 문제가 있고 기본 환경을 제공하려면 까다로운 JavaScript 해커가 필요합니다.
이 기법이 곧 완전히 없어지는 것은 아니지만, Chrome 50에서는 Sequential Focus Navigation Start Point 덕분에 필요한 경우가 줄어들 것입니다. 이번 변경사항으로 인해 수동으로 포커스를 관리할 필요 없이 잘 작성된 페이지에도 자동으로 더 쉽게 액세스할 수 있게 됩니다. 예를 살펴보겠습니다.
페이지 내 링크
텍스트가 많은 사이트는 같은 페이지 내에서 서로 연결되어 사용자가 중요한 섹션으로 빠르게 이동할 수 있습니다.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
제가 키보드 사용자라면 (그리고 호주 음식 애호가라면) 다음에 할 작업은 다음과 같을 것입니다.
- 레시피 링크에 포커스를 두려면
Tab키를 두 번 누릅니다. Enter키를 눌러 레시피 섹션으로 이동- 자세히 알아보기 링크에 포커스를 맞추려면
Tab키를 다시 누르세요.
Chrome 49를 사용하여 실제로 적용해 보겠습니다.
아, 그렇게는 계획대로 안 되네요.
자세히 알아보기 링크에 포커스를 맞추는 대신 마지막으로 Tab를 누르면 목차의 다음 항목으로 포커스가 이동했습니다. 개발자가 포커스 가능하게 만들기 위해 헤더에 tabindex="-1"를 설정하지 않았기 때문입니다. 따라서 이름이 지정된 앵커 #recipes를 클릭해도 포커스가 이동하지 않았습니다. 이는 미묘한 실수일 뿐이며, 마우스 사용자에게는 별 문제가 되지 않습니다. 하지만 키보드나 스위치 기기 사용자라면 큰 문제가 될 수 있습니다. 일반적인 위키백과 페이지에서의 상호 링크량을 고려해 보세요. 이 모든 앵커를 계속 탭하며 왔다 갔다 해야 하는 것은 짜증이 날 것입니다.
이제 Chrome 50을 사용해 똑같은 경험을 해볼까요?
와, 이것이 바로 우리가 원했고, 무엇보다도 코드를 변경할 필요가 없었다는 점입니다. 브라우저가 문서 내 위치에 따라 포커스가 이동해야 할 위치를 파악했습니다.
기본 원리
포커스 시작점을 구현하기 전에는 포커스가 항상 이전의 포커스가 맞춰진 요소 또는 페이지 상단에서 이동합니다. 즉, 다음에 포커스를 둘 항목을 선택하려면 컨테이너 요소나 제목과 같이 실제로 포커스 가능하지 않아야 하는 항목으로 포커스를 이동하는 것이 포함될 수 있습니다. 이렇게 하면 이러한 요소를 아무 문제 없이 클릭하면 포커스 링이 표시되는 등 온갖 기묘한 결과가 발생합니다.
포커스 시작점은 이름에서 알 수 있듯이 Tab 또는 Shift-Tab를 누를 때 포커스 가능한 다음 요소를 찾을 위치를 제안하는 메커니즘을 제공합니다.
여러 가지 방법으로 설정할 수 있습니다. 포커스가 있는 항목은 이전과 마찬가지로 포커스 탐색 시작점이기도 합니다.
또한 이전과 마찬가지로 포커스 탐색 시작점을 설정한 것이 없는 경우 현재 document가 되며 사용 가능하고 지원되는 경우 현재 활성 dialog가 됩니다.
위의 예와 같이 페이지 조각으로 이동하면 이제 포커스 시작점이 설정됩니다.
또한 페이지에서 어떤 요소든 클릭하면 포커스 가능 여부와 상관없이 이제 포커스 탐색 시작점이 설정됩니다.
마지막으로 포커스 시작점인 요소를 DOM에서 삭제하면 그 상위 요소가 포커스 시작점이 됩니다. 더 이상 두더지를 두드리는 데 집중하지 않아도 됩니다.
기타 사용 사례
위의 예 외에도 이 기능을 유용하게 활용할 수 있는 다양한 상황이 있습니다.
요소 숨기기
사용자가 visibility: hidden 또는 display: none로 설정해야 하는 항목에 포커스를 두는 경우가 있을 수 있습니다. 캐러셀 내의 클릭 가능한 항목을 예로 들 수 있습니다. 이전 버전의 Chrome에서는 이러한 방식으로 현재 포커스가 맞춰진 항목을 숨기면 포커스가 기본 시작점으로 재설정되어 앞서 언급한 캐러셀이 운동 장애가 있는 사용자를 위한 불쾌한 함정이 되었습니다. 순차적 포커스 시작점을 사용하면 더 이상 그렇지 않습니다. 위의 방법 중 하나를 통해 요소가 숨겨진 경우 Tab 키를 누르면 포커스 가능한 다음 항목으로 이동합니다.
링크 건너뛰기
건너뛰기 링크는 키보드를 통해서만 연결할 수 있는 보이지 않는 앵커입니다. 이 기능은 사용자가 탐색 요소를 '건너뛸' 수 있어 페이지 콘텐츠로 바로 이동할 수 있으며 키보드 및 기기 전환 시 매우 유용합니다. WebAIM 사이트에 설명된 대로
대부분의 인기 웹사이트에서는 건너뛰기 링크를 구현하고 있습니다.
건너뛰기 링크는 앵커라는 이름이기 때문에 원래 목차 예시와 동일한 방식으로 작동합니다.
주의사항 및 지원
순차 포커스 탐색 시작점은 현재 Chrome 50, Firefox, Opera에서만 지원됩니다. 모든 브라우저에서 지원될 때까지는 이름이 지정된 앵커 타겟에 tabindex="-1"를 추가하고 포커스 윤곽선을 삭제해야 합니다.
데모
순차 포커스 탐색 시작점은 브라우저의 접근성 프리미티브 집합에 훌륭한 추가 기능입니다. 이해하기 쉽고 실제로 애플리케이션에서 코드를 삭제하는 동시에 사용자 경험을 개선할 수 있습니다. 두 배 승리! 이 기능에 대해 더 자세히 알아보려면 데모를 확인하세요.