Chrome 130부터 스크롤러는 키보드 포커스 가능 하위 요소
배경
스크롤러는 어디에나 있습니다. 이용약관은 '이용약관'에서 확인하실 수 있습니다. 상자, 아래로 계속 스크롤하여 제출 버튼을 클릭해야 합니다. 또는 선택할 수 있는 아이콘으로 가득한 세로 메뉴 바가 표시될 수 있습니다.
이 경우 많은 웹 사용자가 마우스 또는 키보드의 위아래 모션을 사용하거나 터치패드를 사용하여 요소를 스크롤할 수 있습니다. 하지만 포인팅 기기, 트랙패드 또는 터치스크린이 모든 사용자에게 최적의 페이지 탐색 방법은 아닙니다. 일부 사용자 HTML 페이지를 탐색하고 포커스 가능한 모든 요소에 액세스하는 것을 선호합니다. 않습니다. 여기에는 다양한 이유가 있을 수 있습니다. 사용자가 마우스 작동을 어렵게 하는 떨림 또는 기타 문제가 있는 경우, 마우스 커서를 시각적으로 찾는 데 어려움이 있고, 단일 웹 API를 사용하는 다른 사용자는 스위치나 음성 제어를 사용할 수 있습니다.
접근성 권장사항에 따르면 모든 기능은 생성합니다. 이렇게 하면 모든 사람이 가장 효과적인 방식으로 웹을 사용할 수 있습니다. 만들 수 있습니다
를 통해 개인정보처리방침을 정의할 수 있습니다.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>
이 기능을 사용하면 모든 경우에 기본적으로 스크롤러에 키보드로 액세스할 수 있습니다. 따라서 웹 사용자가 탭을 탐색할 때 보다 원활한 환경을 이용할 수 있습니다. 있습니다.