การเข้าถึง

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

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

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

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

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

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

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

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

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

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

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

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

<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 (เช่น เมื่อเปิดหรือปิดกล่องโต้ตอบโมดอล หรือภาพเคลื่อนไหวแบบเลื่อนในวงล้อ) จะถูกปิดใช้งาน