แถบเลื่อนที่โฟกัสได้ของแป้นพิมพ์

ตั้งแต่ Chrome 130 เป็นต้นไป แถบเลื่อนจะโฟกัสได้ด้วยแป้นพิมพ์โดยค่าเริ่มต้นหากไม่มีองค์ประกอบย่อยที่โฟกัสได้ด้วยแป้นพิมพ์

ข้อมูลเบื้องต้น

แถบเลื่อนมีอยู่ทุกที่ คุณอาจเห็นข้อกำหนดใน "ข้อกำหนดและเงื่อนไข" กล่อง ที่ต้องเลื่อนลงไปจนสุดเพื่อคลิกปุ่ม "ส่ง" หรือคุณอาจเห็นแถบเมนูแนวตั้งที่มีไอคอนให้เลือกมากมาย

ในกรณีดังกล่าว ผู้ใช้เว็บจำนวนมากใช้การเลื่อนขึ้นลงจากเมาส์หรือ ทัชแพดเพื่อเลื่อนดูองค์ประกอบ อย่างไรก็ตาม อุปกรณ์ชี้ตำแหน่ง แทร็กแพด หรือหน้าจอสัมผัสไม่ใช่วิธีที่ดีที่สุดในการไปยังส่วนต่างๆ ของหน้าสำหรับผู้ใช้บางราย ผู้ใช้บางรายต้องการไปยังส่วนต่างๆ ในหน้า HTML โดยเข้าถึงองค์ประกอบที่โฟกัสได้ทั้งหมดโดยใช้แป้นพิมพ์เท่านั้น ซึ่งอาจเกิดจากหลายสาเหตุ สำหรับผู้ที่มีมือสั่นหรือปัญหาอื่นๆ ที่ทำให้ใช้เมาส์ได้ยาก ผู้ที่มีตาฝ้าฟางจนมองเคอร์เซอร์เมาส์ไม่ชัด และผู้ที่ใช้สวิตช์เดียวหรือการควบคุมด้วยเสียง

แนวทางปฏิบัติแนะนำสำหรับการช่วยเหลือพิเศษแนะนำให้ใช้ฟีเจอร์ทั้งหมด แป้นพิมพ์ วิธีนี้จะช่วยให้ทุกคนใช้เว็บในแบบที่เหมาะกับตนมากที่สุด

2.1.1 แป้นพิมพ์: ฟังก์ชันการทำงานทั้งหมดของเนื้อหาสามารถใช้งานได้ผ่านอินเทอร์เฟซแป้นพิมพ์โดยไม่ต้องกำหนดเวลาการกดแป้นแต่ละครั้ง ยกเว้นในกรณีที่ฟังก์ชันพื้นฐานต้องใช้อินพุตที่ขึ้นอยู่กับเส้นทางการเคลื่อนไหวของผู้ใช้ ไม่ใช่แค่ปลายทาง (ระดับ A)

ก่อนการเปลี่ยนแปลงนี้เพื่อโฟกัสในแถบเลื่อน

ก่อนการเปลี่ยนแปลงนี้ องค์ประกอบตัวเลื่อนจะโฟกัสเฉพาะแท็บได้ในกรณีที่ Tabindex ตั้งเป็น 0 ขึ้นไปอย่างชัดเจน เช่น ใช้ CSS และ HTML ต่อไปนี้ จากนั้นลองกด Tab จากปุ่มแรกไปยังองค์ประกอบ Scroller

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 ต่อไปนี้จะข้ามแถบเลื่อน

<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 เป็นลบ

หากคุณไม่ได้ตั้งค่า 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 หรือองค์ประกอบย่อยที่โฟกัสได้ แต่ยังคงโฟกัสได้

โปรดทราบว่าลักษณะการทำงานนี้จะเกิดขึ้นเฉพาะในกรณีที่แถบเลื่อนไม่มีรายการย่อยที่โฟกัสได้ เช่น หากตัวเลื่อนมีปุ่มอยู่แล้ว โฟกัสของ Tab จะข้ามตัวเลื่อนและโฟกัสที่ปุ่มโดยตรง ในกรณีนี้ แถบเลื่อน สามารถเข้าถึงเนื้อหาได้อยู่แล้วโดยใช้ปุ่มลูกศร เมื่อปุ่ม โฟกัสอยู่ กฎนี้ทำให้ค่าเริ่มต้นอาจไม่ทำงานอย่างมีประสิทธิภาพสูงสุดเสมอไปหากมีรายการย่อยดังกล่าว หากต้องการให้องค์ประกอบตัวเลื่อนโฟกัสได้ด้วยแป้นพิมพ์ในสถานการณ์นี้ ขอแนะนําให้ตั้งค่าค่า 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>
Scroller มี tabindex เป็น 0

ฟีเจอร์นี้ช่วยให้เครื่องมือเลื่อน เข้าถึงได้ด้วยแป้นพิมพ์โดยค่าเริ่มต้นในทุกกรณี ซึ่งจะช่วยให้ผู้ใช้เว็บได้รับประสบการณ์ ที่ราบรื่นยิ่งขึ้นเมื่อไปยังส่วนต่างๆ ของแท็บ หน้าเว็บ