'연속 포커스 탐색 시작점' 기능은 포커스가 설정된 영역이 없을 때 연속 포커스 탐색 ([Tab] 또는 [Shift-Tab])을 위한 포커스 설정 가능 요소를 검색하기 시작하는 위치를 정의합니다. '링크 건너뛰기' 및 문서의 포커스 관리와 같은 접근성 기능에 특히 유용합니다.
HTML은 키보드 상호작용을 처리하기 위한 많은 내장 지원을 제공합니다. 즉, 키보드를 통해 사용할 수 있는 페이지를 작성하는 것은 매우 쉽습니다. 운동 장애로 인해 마우스를 사용할 수 없거나 키보드에서 손을 떼는 것이 너무 효율적이어서 소중한 밀리초가 낭비되는 경우에도 마찬가지입니다.
키보드 처리는 포커스를 중심으로 이루어지며, 포커스는 페이지에서 키보드 이벤트가 발생하는 위치를 결정합니다. 지금까지 키보드 사용자에게 잘 작동하도록 하려면 몇 가지 추가 작업이 필요했습니다. focus() 메서드를 사용하면 사용자 작업에 응답하여 포커스를 맞출 요소를 선택적으로 선택하여 포커스를 관리할 수 있습니다. 그러나 이 권장사항에는 많은 문제가 있으며, 기준 환경을 제공하려면 약간의 까다로운 JavaScript 해킹이 필요합니다.
이 기법은 곧 완전히 사라지지는 않지만 Chrome 50에서는 순차 포커스 탐색 시작점 덕분에 더 적은 경우에 필요합니다. 이번 변경사항으로 인해 잘 작성된 페이지는 추가로 수동으로 포커스를 관리하지 않아도 자동으로 더 쉽게 액세스할 수 있게 됩니다. 예를 살펴보겠습니다.
페이지 내 링크
텍스트가 많은 사이트는 사용자가 중요한 섹션으로 빠르게 이동할 수 있도록 동일한 페이지 내에서 서로 연결되는 경우가 많습니다.
<!-- 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"를 추가하고 포커스 윤곽선을 삭제해야 합니다.
데모
순차 포커스 탐색 시작점은 브라우저의 접근성 프리미티브 세트에 추가된 유용한 기능입니다. 이해하기 쉽고 애플리케이션에서 코드를 삭제하는 동시에 사용자 환경을 개선할 수 있습니다. 1석 2조! 데모를 살펴보고 이 기능을 자세히 알아보세요.