สร้างภาพสไลด์ที่เข้าถึงได้

Robert Flack

Penny McLachlan

Lucas Radaelli

เผยแพร่: 29 กันยายน 2025

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

อย่างไรก็ตาม การทำให้ภาพสไลด์ เข้าถึงได้มักเป็นเรื่อง ท้าทาย การจัดการโฟกัส การประกาศของโปรแกรมอ่านหน้าจอให้ถูกต้อง และ การจัดการองค์ประกอบแบบอินเทอร์แอกทีฟนอกหน้าจอเป็นเรื่องซับซ้อน ดังนั้นแคโรเซล ในหลายๆ เว็บไซต์จึงไม่สามารถเข้าถึงได้ ความท้าทายเหล่านี้ทำให้ทีม Chrome พัฒนาภาพสไลด์ CSS แบบอินเทอร์แอกทีฟเป็นส่วนหนึ่งของโมดูล CSS Overflow ระดับ 5 ซึ่งเปิดตัวใน Chrome 135

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

• รองรับตัวนับในข้อความแทน ซึ่งเปิดตัวใน Chrome 140
• แก้ไขปัญหาที่โปรแกรมอ่านหน้าจออ่าน ::scroll-button state ที่ปิดใช้ไม่ถูกต้อง
• ตรวจสอบว่า ::scroll-marker ได้รับชื่อป้ายกำกับ ARIA จากค่าเนื้อหา
• แก้ไขข้อบกพร่องในเรื่องที่ระบบอ่าน::scroll-markerองค์ประกอบเสมือนทั้งหมดเป็น "เลือกแล้ว"

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

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

คุณต้องการภาพสไลด์ประเภทใด

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

ภาพสไลด์แบบรายการเดียว

เมื่อใช้ภาพสไลด์แบบไอเทมเดียว จะมีเพียงสไลด์เดียวเท่านั้นที่มองเห็นและโต้ตอบได้อย่างเต็มที่ในแต่ละครั้ง (เช่น แบนเนอร์ฮีโร่หรือสไลด์โชว์)

ภาพสไลด์ที่มีการแบ่งหน้าโดยอัตโนมัติ

ภาพสไลด์ที่มีการแบ่งหน้าโดยอัตโนมัติจะแสดง "หน้า" ของเนื้อหา เช่น รายการผลิตภัณฑ์หรือรายการทีวี

ภาพหมุนหลายรายการ

ในภาพสไลด์แบบหลายรายการ คุณจะเห็นหลายรายการในภาพสไลด์พร้อมกัน แต่ยังคงเลื่อนดูแต่ละรายการได้โดยไม่ต้องแบ่งหน้า

ภาพสไลด์แต่ละประเภทมีข้อควรพิจารณาด้านการช่วยเหลือพิเศษและแนวทางปฏิบัติแนะนำที่แตกต่างกัน

ภาพสไลด์แบบรายการเดียว

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

มาดูวิธีทำให้เข้าถึงได้ทีละขั้นตอนกัน

ขั้นตอนที่ 1: บังคับใช้โฟกัสเดียวด้วยการเลื่อนแบบสแนป

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

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

ขั้นตอนที่ 2: ประกาศการเปลี่ยนแปลงแคร์รอสเซลและสไลด์

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

โครงสร้าง HTML มีดังนี้

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

ขั้นตอนที่ 3: ทำให้เฉพาะสไลด์ที่มองเห็นได้เป็นแบบอินเทอร์แอกทีฟ

ซึ่งเป็นสิ่งสำคัญสำหรับการช่วยเหลือพิเศษ เนื่องจากจะช่วยป้องกันไม่ให้ผู้ใช้กดปุ่มหรือลิงก์ในสไลด์ที่อยู่นอกหน้าจอโดยไม่ตั้งใจ หากต้องการทำเช่นนี้ ให้ใช้scroll-stateการค้นหาคอนเทนเนอร์และพร็อพเพอร์ตี้interactivityใหม่

ก่อนอื่น ให้ทำให้รายการสไลด์ทุกรายการไม่มีการโต้ตอบโดยค่าเริ่มต้นโดยใช้ interactivity: inert จากนั้นใช้scroll-stateการค้นหาคอนเทนเนอร์เพื่อกำหนดเป้าหมายสไลด์ที่ "สแนป" ในวิวพอร์ตในขณะนี้ และตั้งค่าเนื้อหาเป็น interactivity: auto

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

เมื่อใช้ CSS นี้ เบราว์เซอร์จะจัดการโดยอัตโนมัติว่ารายการใดโฟกัสได้ ไม่จำเป็นต้องใช้ JavaScript อีกต่อไปเพื่อจัดการ tabindex คำค้นหา scroll-state จะทำให้สไลด์ทั้งหมด ยกเว้นสไลด์ปัจจุบันไม่มีการเคลื่อนไหว

ภาพสไลด์แบบแบ่งหน้า

โดยมักใช้รูปแบบนี้กับแกลเลอรีผลิตภัณฑ์หรือตัวเลือกที่เนื้อหาจัดกลุ่มเป็นหน้า คุณจัดการการช่วยเหลือพิเศษได้ 2 วิธี ขึ้นอยู่กับวิธีที่ต้องการนำเสนอเนื้อหา

ภาพสไลด์ที่มีหน้าต่างๆ

ใช้คอนเทนเนอร์ที่มี role="region" ที่มีองค์ประกอบเดียวที่มี role="tabpanel" อยู่ภายใน แท็บแผงนี้จะอัปเดตเนื้อหาให้สอดคล้องกับแท็บหรือหน้าที่ใช้งานอยู่

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

หากต้องการจัดการการโต้ตอบ ให้ใช้เทคนิคภาพเคลื่อนไหวที่ชาญฉลาดซึ่งเชื่อมโยงกับview() ไทม์ไลน์ วิธีนี้ช่วยให้มั่นใจได้ว่าลำดับแท็บจะไปถึงเฉพาะรายการที่มองเห็นได้ในปัจจุบันบนหน้าจอ

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

รายการเนื้อหา

หากเนื้อหาเป็นรายการโดยพื้นฐาน ให้ใช้องค์ประกอบ <ul> เพื่อให้ความหมายถูกต้อง

เช่น

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

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

ภาพหมุนหลายรายการ

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

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

รูปแบบที่ 1: รายการแบบอินเทอร์แอกทีฟรายการเดียวในกลุ่มรายการที่มองเห็นได้

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

หากต้องการสร้างอย่างถูกต้อง คุณควรใช้รูปแบบการช่วยเหลือพิเศษเดียวกันกับ ภาพสไลด์แบบรายการเดียวที่กล่าวถึงก่อนหน้านี้ ซึ่งรวมถึงสิ่งต่อไปนี้

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

รูปแบบที่ 2: รายการที่มองเห็นได้ทั้งหมดเป็นแบบอินเทอร์แอกทีฟ

หากเป้าหมายของคุณคือการอนุญาตให้ผู้ใช้โต้ตอบกับรายการที่มองเห็นทั้งหมดได้อย่างอิสระ แนวทางปฏิบัติแนะนำคือการตรวจสอบว่าไม่มีเนื้อหาใดที่ไม่มีการโต้ตอบ

สำหรับรูปแบบนี้

• ใช้องค์ประกอบ <ul> หากเนื้อหาเป็นรายการตามความหมาย เนื่องจากจะให้บริบทที่ถูกต้องแก่ผู้ใช้โปรแกรมอ่านหน้าจอ
• อย่าใช้การจัดการการโต้ตอบ (interactivity: inert) เนื้อหาที่มองเห็นได้ทั้งหมดควรยังคงอยู่ในโครงสร้างการช่วยเหลือพิเศษและเข้าถึงได้โดยใช้การกด Tab บนแป้นพิมพ์

สรุป

CSS Overflow 5 ช่วยให้คุณสร้างรูปแบบภาพสไลด์แบบอินเทอร์แอกทีฟทั่วไปได้โดยไม่ต้องกังวลเรื่องการช่วยเหลือพิเศษ การรวม HTML เชิงความหมาย, CSS สมัยใหม่ เช่น สถานะการเลื่อนและการโต้ตอบ และบทบาท ARIA ที่เหมาะสมเข้าด้วยกันจะช่วยให้คุณสร้างประสบการณ์ที่มีประสิทธิภาพสูงและเข้าถึงได้ ซึ่งโต้ตอบได้ตั้งแต่การแสดงผลครั้งแรก

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