เนื้อหาที่สร้างขึ้นที่เข้าถึงได้

  • อย่าใช้ content เพื่อสื่อข้อความที่มีความหมาย (ป้ายกำกับ สถานะ วิธีการ) แต่ให้เก็บไว้ใน DOM (WCAG F87) อาร์กิวเมนต์ข้อความแสดงแทนเป็นการลดอันตรายในกรณีที่การตกแต่งสื่อความหมายโดยไม่ตั้งใจ ไม่ใช่ใบอนุญาต
  • ใช้อาร์กิวเมนต์ข้อความแสดงแทนของ content เพื่อระบุข้อความแสดงแทนสำหรับโปรแกรมอ่านหน้าจอ เช่น content: url(cloud.svg) / "Save";
  • ใช้ content: "text" / ""; เพื่อป้องกันไม่ให้โปรแกรมอ่านหน้าจออ่านข้อความที่ใช้เพื่อตกแต่งเท่านั้น
  • อย่าใช้อาร์กิวเมนต์ข้อความแสดงแทนที่ว่างเปล่าสำหรับรูปภาพ เนื่องจากรูปภาพเป็นองค์ประกอบการนำเสนอโดยค่าเริ่มต้นอยู่แล้ว เช่น ตัวอย่างที่ไม่ถูกต้อง: content: url(cloud.svg) / "";
  • อย่าใช้อาร์กิวเมนต์ข้อความแสดงแทนเพื่ออธิบายอีโมจิ เว้นแต่คำอธิบายจะแตกต่างจากชื่ออีโมจิอย่างเป็นทางการ เช่น อย่าใช้ content: "🎉" / "celebration"; แต่ใช้ content: "🎉" / "Yay!"; ได้

เท่านั้น ใช้อาร์กิวเมนต์ข้อความแสดงแทนเมื่อข้อความแตกต่างจากค่าหลักและยังไม่มีอยู่ใน DOM เช่น ตัวอย่างที่ไม่ถูกต้องมีดังนี้

HTML:

<button class="save">Save</button>

CSS:

button.save::before {
  content: url(cloud.svg) / "Save";
}

โปรแกรมอ่านหน้าจอจะอ่านออกเสียงว่า "บันทึก บันทึก"