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

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

ที่มา

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

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

<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 124 ที่มีแถบเลื่อนโฟกัสได้

ฟีเจอร์นี้ช่วยให้แถบเลื่อนที่ไม่ได้ตั้งค่า 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>

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