เครื่องมือสร้างสปินเนอร์ CSS ที่เข้าถึงได้

CSS ที่สร้างขึ้นครอบคลุมอะไรและไม่ครอบคลุมอะไร

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

มาร์กอัปที่ประกาศสถานะ

<div class="loader" role="status" aria-label="กำลังโหลดผลลัพธ์"></div>

role="status" ทำให้องค์ประกอบนี้เป็นพื้นที่แบบไลฟ์ ซึ่งโปรแกรมอ่านหน้าจอหลายตัวจะอ่านป้ายข้อความเมื่อองค์ประกอบปรากฏ ค่า aria-label ควรบอกว่ากำลังโหลดอะไร เช่น “กำลังโหลดผลลัพธ์” หรือ “กำลังบันทึก” แทนที่จะใช้คำทั่วไป เมื่องานเสร็จ ให้ลบองค์ประกอบออกและแสดงเนื้อหาใหม่

คุณยังวางข้อความที่มองเห็นได้ไว้ข้างวงกลมได้ด้วย ข้อความที่มองเห็นได้ช่วยทุกคน รวมถึงผู้ที่มองเห็นการเคลื่อนไหวได้ไม่ชัด

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

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

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

กฎนี้ทำให้การหมุนช้าลงแทนที่จะหยุดลง สปินเนอร์จึงยังดูมีชีวิต โดยไม่มีการเคลื่อนไหวที่รวดเร็ว หากคุณต้องการสัญญาณนิ่ง ให้ใช้ animation: none; และแสดงข้อความ “กำลังโหลด” ข้างวงกลม

รายการตรวจสอบคอนทราสต์และขนาด

ข้อจำกัด

• เครื่องมือเลือกสีแทร็ก (#eee) ให้คุณ แก้ไขในโค้ด CSS ที่วางไว้หากพื้นหลังของหน้าใกล้เคียงกัน
• ค่าความเร็วที่เร็วมากทำให้วงกลมกะพริบ หลีกเลี่ยงค่าที่ต่ำกว่าประมาณ 0.5 วินาที
• อย่าพึ่งพาสปินเนอร์เพียงอย่างเดียวเมื่อต้องรอนาน ๆ ให้บอกผู้เข้าชมเป็นข้อความว่ากำลังเกิดอะไรขึ้น

ทดสอบอย่างรวดเร็ว

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