פיתוח פקדי מתגים נגישים

משתמשים במאפיין 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;
}

אסטרטגיות חלופיות

חלופות ותמיכה בדפדפן ב-switch-control

אם יעד ה-Baseline לא תומך ב-<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 הוא שיפור הדרגתי (progressive enhancement). דפדפנים שלא תומכים במאפיין הזה יתעלמו ממנו וישתמשו בצבעי ברירת המחדל של ממשק המשתמש שלהם.