การเข้าถึง

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

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

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

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

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

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

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

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

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

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

Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios.

Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.

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

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

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

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

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