สร้างการควบคุมสวิตช์ที่เข้าถึงได้

ใช้แอตทริบิวต์ HTML switch ใน <input type="checkbox" switch> กับ <label> ที่เชื่อมโยงเพื่อสร้างปุ่มเปิด/ปิดแบบไบนารีที่คงการส่งแบบฟอร์มเนทีฟ การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ และความหมายของโปรแกรมอ่านหน้าจอ (ดูการจัดรูปแบบช่องทำเครื่องหมายและแบบฟอร์ม)

Markup

เพิ่มแอตทริบิวต์ switch บูลีนลงในอินพุตช่องทำเครื่องหมายมาตรฐาน ดังนี้

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>

• ป้ายกำกับสามารถรวมอินพุตหรือเชื่อมโยงกับ for/id ได้ การจัดรูปแบบทั้งหมดจะกำหนดเป้าหมายไปที่อินพุต จึงไม่ขึ้นอยู่กับโครงสร้างป้ายกำกับ
• เมื่อเลือกแล้ว อินพุตจะส่งค่าช่องทำเครื่องหมายมาตรฐาน ใน JavaScript ให้ฟังเหตุการณ์ change (หรือ input) และอ่าน .checked แทน .value

การจัดรูปแบบ

ปรับแต่งสีไฮไลต์ของตัวควบคุมโดยใช้ accent-color (ดูแบบฟอร์มที่สอดคล้องกับแบรนด์) และตรวจสอบว่าการจัดรูปแบบโฟกัสที่มองเห็นได้มีลักษณะดังนี้

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

กลยุทธ์สำรอง

การรองรับเบราว์เซอร์และทางเลือกสำรองสำหรับการควบคุมสวิตช์

หากเป้าหมายเกณฑ์พื้นฐานไม่รองรับ <input type="checkbox" switch> ให้โหลด input-switch-polyfill เฉพาะเมื่อ 'switch' in HTMLInputElement.prototype เป็น false อย่าโหลด Polyfill โดยไม่มีเงื่อนไข Polyfill จะปรับปรุงช่องทำเครื่องหมายด้วยแอตทริบิวต์ switch โดยตั้งค่า role="switch", ใช้การจัดรูปแบบสวิตช์ (appearance: none), ซิงค์ accent-color ที่คำนวณแล้ว และให้การรองรับการลากเคอร์เซอร์

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

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

การสำรองและการรองรับเบราว์เซอร์สำหรับ accent-color

พร็อพเพอร์ตี้ accent-color เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง เบราว์เซอร์ที่ไม่รองรับพร็อพเพอร์ตี้นี้จะละเว้นและใช้สี UI เริ่มต้น