키보드 포커스 가능 스크롤러

Chrome 124부터 스크롤러에 키보드 포커스 가능 하위 요소가 없다면 기본적으로 키보드에 포커스를 둘 수 있습니다.

배경

스크롤러는 어디에나 있습니다. '이용약관' 상자에서 찾을 수 있습니다. 여기까지 아래로 스크롤하여 제출 버튼을 클릭해야 합니다. 또는 선택할 수 있는 아이콘으로 가득한 세로 메뉴 바가 표시될 수도 있습니다.

이러한 경우 많은 웹 사용자가 마우스나 터치패드에서 위아래로 움직여 요소를 스크롤합니다. 그러나 포인팅 기기, 트랙패드 또는 터치스크린이 모든 사용자가 최적의 페이지 탐색 방법은 아닙니다. 키보드만 사용하여 포커스 가능한 모든 요소에 액세스하는 HTML 페이지를 탐색하는 사용자도 있습니다. 여러 가지 이유가 있을 수 있습니다. 마우스를 조작하기 어렵게 하는 떨림이나 기타 문제가 있는 사람, 마우스 커서를 시각적으로 찾기 어려운 사람, 단일 스위치나 음성 제어를 사용하는 사람 등입니다.

접근성 권장사항에 따르면 키보드를 사용하여 모든 기능을 사용할 수 있어야 합니다. 이렇게 하면 모든 사용자가 자신에게 가장 잘 맞는 방식으로 웹을 사용할 수 있습니다.

2.1.1 키보드: 콘텐츠의 모든 기능은 개별 키 입력에 관한 구체적인 타이밍 없이도 키보드 인터페이스를 통해 작동할 수 있습니다. 단, 기본 기능에 엔드포인트뿐 아니라 사용자의 움직임 경로에 따라 달라지는 입력이 필요한 경우는 예외입니다. (등급 A)

변경 전에 스크롤러에 포커스를 맞추려면 다음 단계를 따르세요.

이 변경 이전에는 tabindex가 명시적으로 0 이상으로 설정된 경우에만 스크롤러 요소가 탭 포커스가 될 수 있었습니다. 예를 들어 다음 CSS 및 HTML을 사용합니다. 그런 다음 첫 번째 버튼에서 스크롤러 요소로 탭해 봅니다.

div.scroll, button {
  border: 1px solid lightgray;
  margin-top: 1em;
  border-radius: 0.5em;
}

div.scroll {
  overflow: auto;
  width: 20em;
  height: 5em;
  display: block;
}
div.long {
  width: 10em;
  height: 10em;
}

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>

다음 HTML에서와 같이 음수 tabindex를 사용하면 스크롤러를 건너뜁니다.

<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>

tabindex 값을 설정하지 않으면 사용자가 순차 포커스 탐색을 사용하여 스크롤러에 액세스하기가 어려울 수 있습니다. 이는 마우스에 액세스할 수 없는 사용자에게는 매우 불편할 수 있습니다.

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>

다음 HTML과 같이 포커스 가능 하위 요소가 포함된 스크롤러는 이미 액세스할 수 있습니다. 포커스 가능 하위 요소에 포커스가 있을 때 화살표 키를 사용하여 스크롤할 수 있기 때문입니다. 이 경우에는 동작이 변경되지 않습니다.

<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>

포커스 가능 스크롤러가 있는 Chrome 124 이상

이 기능을 사용하면 tabindex 값이 설정되지 않고 포커스 가능 하위 요소가 없는 스크롤러를 키보드에 포커스를 맞출 수 있습니다. 이렇게 하면 마우스를 사용하여 키보드의 탭과 화살표 키를 사용하여 콘텐츠에 포커스를 둘 수 없거나 사용하지 않도록 선택할 수 있습니다.

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>

이 동작은 스크롤러에 포커스 가능한 하위 요소가 없는 경우에만 발생합니다. 예를 들어 스크롤러에 이미 버튼이 있는 경우 탭 포커스는 스크롤러를 건너뛰고 버튼에 직접 포커스를 둡니다. 이 경우 버튼에 포커스가 있으면 이미 화살표 키를 사용하여 스크롤러 콘텐츠에 액세스할 수 있습니다. 이 규칙으로 인해 이러한 하위 요소가 있는 경우 기본값이 항상 가장 최적의 방식으로 작동하지는 않을 수 있습니다. 이 상황에서 스크롤러 요소 자체를 키보드에 포커스 가능하게 만들려면 tabindex 값을 0 이상으로 설정하는 것이 좋습니다.

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>

이 기능을 사용하면 모든 경우에 기본적으로 스크롤러에 키보드 액세스가 가능하므로 웹 사용자가 탭을 탐색할 때 웹 사용자가 더 원활한 환경을 이용할 수 있습니다.