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

Chrome 130부터 스크롤러는 키보드 포커스 가능 하위 요소가 없는 경우 기본적으로 키보드 포커스 가능합니다.

배경

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

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

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

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

스크롤러의 포커스가 변경되기 전

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

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 130부터

이 기능을 사용하면 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>

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