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

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>
양수 tabindex로 인해 스크롤러에 포커스를 설정할 수 있습니다.

다음 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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
음의 tabindex로 인해 스크롤러를 건너뜁니다.

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>
스크롤러에 tabindex가 없습니다.

다음 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 또는 포커스 가능한 하위 요소가 없지만 여전히 포커스를 받을 수 있습니다.

이 동작은 스크롤러에 포커스 가능한 하위 요소가 없는 경우에만 발생합니다. 예를 들어 스크롤러에 이미 버튼이 포함되어 있으면 탭 포커스가 스크롤러를 건너뛰고 버튼에 바로 포커스를 설정할 수 있습니다. 이 경우 스크롤러는 화살표 키를 사용하여 콘텐츠에 액세스할 수 있습니다. 초점을 맞추고 있습니다. 이 규칙으로 인해 기본 검색엔진이 항상 최적의 방법을 찾을 수 있습니다. 이 경우 스크롤러 요소 자체에 키보드 포커스가 가능하도록 하려면 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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
스크롤러의 tabindex가 0입니다.

이 기능을 사용하면 모든 경우에 기본적으로 스크롤러에 키보드로 액세스할 수 있습니다. 따라서 웹 사용자가 탭을 탐색할 때 생성합니다.