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

ตั้งแต่ 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>
ตัวเลื่อนโฟกัสได้เนื่องจากมีดัชนีแท็บเชิงบวก

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

<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>
ตัวเลื่อนมี Tabindex เป็น 0

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