การเข้าถึง

ภาพรวมโดยย่อของคุณลักษณะและข้อจำกัดของ Bootstrap สำหรับการสร้างเนื้อหาที่สามารถเข้าถึงได้

ในหน้านี้

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

ภาพรวมและข้อจำกัด

ความสามารถในการเข้าถึงโดยรวมของโปรเจ็กต์ที่สร้างด้วย Bootstrap นั้นส่วนใหญ่ขึ้นอยู่กับมาร์กอัปของผู้เขียน สไตล์เพิ่มเติม และสคริปต์ที่รวมไว้ อย่างไรก็ตาม หากมีการใช้งานสิ่งเหล่านี้อย่างถูกต้อง ควรจะเป็นไปได้อย่างสมบูรณ์ในการสร้างเว็บไซต์และแอปพลิเคชันด้วย Bootstrap ที่ตรงตามWCAG 2.1 (A/AA/AAA) มาตรา 508และมาตรฐานและข้อกำหนดการช่วยสำหรับการเข้าถึงที่คล้ายคลึงกัน

มาร์กอัปโครงสร้าง

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

ส่วนประกอบแบบโต้ตอบ

คอมโพเนนต์แบบโต้ตอบของ Bootstrap เช่น ไดอะล็อกโมดอล เมนูแบบเลื่อนลง และคำแนะนำเครื่องมือที่กำหนดเอง ได้รับการออกแบบมาเพื่อทำงานสำหรับผู้ใช้ระบบสัมผัส เมาส์ และคีย์บอร์ด การใช้ บทบาทและคุณลักษณะของ WAI - ARIA ที่ เกี่ยวข้อง ส่วนประกอบเหล่านี้ควรสามารถเข้าใจและใช้งานได้โดยใช้เทคโนโลยีอำนวยความสะดวก (เช่น โปรแกรมอ่านหน้าจอ)

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

ความคมชัดของสี

การผสมสีบางสีที่ประกอบเป็นจานสีเริ่มต้นของ Bootstrap ในปัจจุบัน ซึ่งใช้ตลอดทั้งเฟรมเวิร์กสำหรับสิ่งต่างๆ เช่น การเปลี่ยนแปลงของปุ่ม รูปแบบการแจ้งเตือน ตัวบ่งชี้การตรวจสอบความถูกต้องของรูปแบบ อาจทำให้ คอนทราสต์ของสี ไม่เพียงพอ (ต่ำกว่าอัตราส่วนคอนทราสต์สีข้อความ WCAG 2.1 ที่แนะนำที่ 4.5:1และอัตราส่วนคอนทราสต์สีที่ไม่ใช่ข้อความ WCAG 2.1 ที่ 3: 1 ) โดยเฉพาะอย่างยิ่งเมื่อใช้กับพื้นหลังสีอ่อน ผู้เขียนควรทดสอบการใช้สีที่เฉพาะเจาะจง และหากจำเป็น ให้แก้ไข/ขยายสีเริ่มต้นเหล่านี้ด้วยตนเอง เพื่อให้แน่ใจว่ามีอัตราส่วนคอนทราสต์ของสีที่เพียงพอ

เนื้อหาที่ควรถูกซ่อนด้วยสายตา แต่ยังคงสามารถเข้าถึงได้โดยเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ สามารถจัดสไตล์โดยใช้.visually-hiddenคลาสได้ สิ่งนี้มีประโยชน์ในสถานการณ์ที่จำเป็นต้องถ่ายทอดข้อมูลภาพเพิ่มเติมหรือตัวชี้นำ (เช่น ความหมายที่แสดงผ่านการใช้สี) กับผู้ใช้ที่มองไม่เห็นด้วย

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

สำหรับการควบคุมแบบโต้ตอบที่ซ่อนอยู่ทางสายตา เช่น ลิงก์ "ข้าม" แบบเดิม ให้ใช้.visually-hidden-focusableชั้นเรียน เพื่อให้แน่ใจว่าการควบคุมจะมองเห็นได้เมื่อโฟกัสแล้ว (สำหรับผู้ใช้แป้นพิมพ์ที่มองเห็น) ระวัง เมื่อเปรียบเทียบกับคลาสที่เทียบเท่า.sr-onlyและ.sr-only-focusableในเวอร์ชันที่ผ่านมา Bootstrap 5's .visually-hidden-focusableเป็นคลาสแบบสแตนด์อโลน และต้องไม่ใช้ร่วมกับ.visually-hiddenคลาส

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

ลดการเคลื่อนไหว

Bootstrap รองรับคุณสมบัติprefers-reduced-motionสื่อ ในเบราว์เซอร์/สภาพแวดล้อมที่อนุญาตให้ผู้ใช้ระบุการตั้งค่าสำหรับการเคลื่อนไหวที่ลดลง เอฟเฟกต์การเปลี่ยนแปลง CSS ส่วนใหญ่ใน Bootstrap (เช่น เมื่อเปิดหรือปิดกล่องโต้ตอบโมดอล หรือภาพเคลื่อนไหวแบบเลื่อนในวงล้อ) จะถูกปิดใช้งาน และภาพเคลื่อนไหวที่มีความหมาย ( เช่นสปินเนอร์) จะชะลอตัวลง

ในเบราว์เซอร์ที่รองรับprefers-reduced-motionและในกรณีที่ผู้ใช้ไม่ได้ส่งสัญญาณอย่างชัดเจนว่าพวกเขาต้องการลดการเคลื่อนไหว (เช่น โดยที่prefers-reduced-motion: no-preference) Bootstrap ช่วยให้เลื่อนได้อย่างราบรื่นโดยใช้scroll-behaviorคุณสมบัติ