เครื่องมือสร้างปุ่ม CSS

โค้ดที่สร้างมีอะไรบ้าง

HTML ใช้องค์ประกอบ <button type="button"> จริง และวางข้อความที่มองเห็นไว้ใน span ส่วน CSS ครอบคลุมการแสดงผล 6 สถานะ ได้แก่

• ปกติ สำหรับหน้าตาทั่วไปเมื่อยังไม่มีการโต้ตอบ
• โฮเวอร์ เมื่ออุปกรณ์ชี้ตำแหน่งอยู่เหนือปุ่ม
• โฟกัสจากแป้นพิมพ์ แสดงผ่าน :focus-visible
• กำลังกด ระหว่างที่ผู้ใช้กดตัวควบคุม
• ปิดใช้งาน แสดงผ่านพร็อพเพอร์ตี disabled มาตรฐาน
• กำลังโหลด แสดงผ่าน aria-busy="true"

แอปพลิเคชันของคุณยังต้องเป็นผู้กำหนดว่าปุ่มจะปิดใช้งานหรืออยู่ในสถานะกำลังประมวลผลเมื่อใด เครื่องมือนี้ให้เฉพาะกฎการแสดงผล ไม่ได้สร้างสถานะของแอปหรือผูกการทำงานเมื่อคลิก

คำแนะนำเรื่องคอนทราสต์ไม่ใช่ใบรับรองการผ่านเกณฑ์

ตัวแก้ไขจะคำนวณคอนทราสต์ข้อความค่าต่ำสุดจากสีพื้นฐาน สีปลายการไล่สี สีโฮเวอร์ และสีขณะกด โดยใช้ 4.5:1 เป็นเป้าหมายสำหรับข้อความขนาดปกติ นอกจากนี้ยังเปรียบเทียบเส้นโฟกัสกับพื้นผิวสีอ่อนในตัวอย่าง และใช้ 3:1 เป็นเป้าหมายสำหรับองค์ประกอบที่ไม่ใช่ข้อความ

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

ขนาดเป้าหมายและการเคลื่อนไหว

กฎที่ส่งออกบังคับขนาดขั้นต่ำทั้งแนวอินไลน์และแนวบล็อกไว้ที่ 44 px ซึ่งกดได้สะดวกในอินเทอร์เฟซแบบสัมผัสหลายประเภท และมากกว่าค่าขั้นต่ำ 24 CSS px ในเกณฑ์ความสำเร็จ WCAG 2.2 ข้อ 2.5.8 อย่างไรก็ตาม ผลิตภัณฑ์จริงยังต้องคำนึงถึงเลย์เอาต์ ระยะห่าง ข้อยกเว้น และแนวทางของแพลตฟอร์ม

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

ขอบเขตเอาต์พุตที่ปลอดภัย

ข้อความบนปุ่มจะถูกทำให้เป็นมาตรฐาน จำกัดไว้ไม่เกิน 120 กลุ่มกราฟีม ลบอักขระควบคุมทิศทางที่มองไม่เห็น และเอสเคปเป็น HTML ทั้งในโค้ดและไฟล์ดาวน์โหลด สีต้องเป็นเลขฐานสิบหก 6 หลัก ส่วนค่าตัวเลขจะถูกปัดเป็นจำนวนเต็มและจำกัดตามช่วงที่ระบุข้างตัวควบคุม

ตัวแก้ไขแบบหน้าเดียวทำงานในหน่วยความจำของเบราว์เซอร์ หากเลือกขั้นตอน 4 หน้า งานออกแบบที่มีหมายเลขเวอร์ชันจะเก็บใน sessionStorage ของแท็บปัจจุบัน ข้อความและค่าการออกแบบจะไม่ถูกใส่ใน URL ของขั้นตอนหรือส่งผ่าน Livewire

การใช้สถานะกำลังโหลด

เพิ่มและนำแอตทริบิวต์สถานะกำลังประมวลผลออกจากโค้ดแอปพลิเคชันของคุณ

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">กำลังบันทึก</span>
</button>

aria-busy สื่อว่ากำลังมีการอัปเดต หากต้องป้องกันการเรียกซ้ำให้เพิ่ม disabled ด้วย เมื่อทำงานเสร็จ ให้นำทั้งสองแอตทริบิวต์ออก และแสดงข้อความสำเร็จหรือข้อผิดพลาดที่สำคัญในบริเวณสถานะที่เหมาะสม