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

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

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

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

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

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

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

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

ก่อนที่จะมีการเปลี่ยนแปลงนี้ องค์ประกอบ scroller จะได้รับการโฟกัสด้วยแท็บได้ก็ต่อเมื่อตั้งค่า 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>

หากใช้ดัชนีแท็บเชิงลบใน 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 อาจทำให้ผู้ใช้ใช้การไปยังส่วนต่างๆ ของโฟกัสตามลำดับเพื่อเข้าถึงตัวเลื่อนได้ยาก ซึ่งอาจทำให้ผู้ใช้ที่ไม่มีสิทธิ์เข้าถึงเมาส์หงุดหงิดมาก

<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 และไม่มีองค์ประกอบย่อยที่โฟกัสได้โฟกัสได้ด้วยแป้นพิมพ์ ซึ่งจะช่วยให้ผู้ใช้ที่ไม่สามารถหรือเลือกที่จะไม่ใช้เมาส์โฟกัสเนื้อหาได้โดยใช้แป้น Tab และแป้นลูกศรบนแป้นพิมพ์

<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>

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

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