רכיבים אינטראקטיביים, כולל פקדי טפסים, קישורים ולחצנים, מופעלים על ידי כברירת מחדל, ניתנים למיקוד ולמקש Tab. רכיבים שיכולים להקיש על Tab הם חלק מסדר הניווט הרציף של המוקד במסמך. רכיבים אחרים הם קבועים, כלומר לא אינטראקטיביים. באמצעות מאפייני HTML, ניתן להפוך רכיבים אינטראקטיביים לאקטיביים יותר להפוך אלמנטים אינטרטיים לאינטראקטיביים.
כברירת מחדל, הסדר של מיקוד הניווט זהה לסדר החזותי, שהוא סדר קוד המקור. יש קובצי HTML שיכולים לשנות את הסדר הזה ואת מאפייני ה-CSS שיכולים לשנות את הסדר החזותי של התוכן. החלפת הכרטיסיות הזמנות עם HTML או עיבוד חזותי עם CSS עלולות לפגוע בחוויית המשתמש.
אל תשנו את סדר הכרטיסיות הגלוי ובפועל באמצעות CSS ו-HTML. שתי הדוגמאות הבאות ממחישות, סדר הכרטיסיות שהסדר שלהם שונה מהסדר הצפוי מבחינה ויזואלית, מבלבל את המשתמשים ופוגעים בחוויית המשתמש.
בדוגמה הזו, הערך של המאפיין tabindex
הפך את סדר הכרטיסיות לכאוטי:
בדוגמה הזו, שירות ה-CSS יצר הבדל בין סדר הכרטיסיות לבין הסדר החזותי של התוכן:
ההצהרה flex-flow: row-reverse;
ביטלה את הסדר החזותי.
בנוסף, המאפיין order ב-CSS הוחל על המילה השישית, "This", שהעבירה באופן חזותי את המילה
מילה אחת. רצף הכרטיסיות הוא הסדר של הקוד, שכבר לא תואם לסדר החזותי ויוצר ניתוק
למשתמשים במקלדת.
להפוך אלמנטים קבועים לאינטראקטיביים
אפשר להוסיף את המאפיינים contenteditable
ו-tabindex
, שהם מאפיינים גלובליים, לכל רכיב כדי שניתן יהיה להתמקד בהם
בתהליך. אפשר להתמקד ברכיבים שניתנים למיקוד גם באמצעות עכבר או מצביע, בעזרת הסמל autofocus
קבוצת מאפיינים, או סקריפט, למשל באמצעות element.focus()
.
המאפיין tabindex
המאפיין הגלובלי tabindex
, שהושק ב-
מאפיינים, מאפשרים רכיבים שאחרת לא יוכלו להתמקד כדי לקבל
המיקוד, בדרך כלל באמצעות המקש Tab, ומכאן השם.
הערך של המאפיין tabindex
הוא מספר שלם. ערך שלילי הופך את האלמנט לניתן למיקוד אבל לא למקש Tab. א'
הערך tabindex
של 0
הופך את הרכיב לניתן למיקוד ולכרטיסייה, ומוסיף את הרכיב עליו הוא מיושם על הרצף
מיקוד סדר הניווט לפי סדר קוד המקור. ערך של 1 או יותר הופך את הרכיב לניתן למיקוד ולכרטיסייה,
אבל היא מוסיפה אותה לרצף של כרטיסיות לפי סדר עדיפויות, וכפי שראינו למעלה, יש להימנע מכך.
בדף הזה, לחצן השיתוף, <share-action>
, הוא רכיב מותאם אישית. על ידי tabindex="0"
ניתן להוסיף את קטע הקוד הזה, שלרוב לא ניתן למיקוד.
לסידור הכרטיסיות בברירת המחדל במקלדת:
<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
יש רכיב מותאם אישית נוסף בדף הזה: הניווט המקומי כולל רכיב מותאם אישית
רכיב עם ערך tabindex
שלילי:
<web-navigation-drawer type="standard" tabindex="-1">
מאפיין tabindex
עם ערך שלילי הופך את האלמנט לניתן למיקוד אבל לא למקש Tab. הרכיב יכול לקבל
להתמקד, למשל דרך HTMLElement.focus()
, אבל זה לא חלק
של סדר הניווט הרציף. המוסכמה לגבי רכיבים שניתנים למיקוד ולא ניתנים לטאב היא להשתמש ב-tabindex="-1"
. שימו לב
אם מוסיפים את tabindex="-1"
לאלמנט אינטראקטיבי, לא תהיה יותר אפשרות להשתמש בו בכרטיסיות.
אפשר להשתמש בשיטה element.focus()
כדי להגדיר את המיקוד כ:
אלמנטים שניתן להתמקד בהם. שימו לב שהדפדפנים גוללים לתצוגה של רכיבים ממוקדים. לכן, הימנעו משימוש
element.focus({preventScroll:true})
, מכיוון שהתמקדות ברכיב לא גלוי עלולה לפגוע בחוויית המשתמש.
אם רוצים להריץ שאילתה על המסמך כדי לברר באיזה רכיב המיקוד נמצא כרגע, אפשר להשתמש במאפיין לקריאה בלבד Document.activeElement
.
רכיבים עם ערך tabindex
של 1
ומעלה נכללים ברצף כרטיסיות נפרד. כמו שתוכלו לראות ב-Codepen,
השימוש בכרטיסיות מתחיל ברצף נפרד, מהערך הנמוך ביותר לערך הגבוה ביותר, לפני מעבר לאלו שברצף הרגיל
(לא הוגדר tabindex
, או tabindex="0"
) בסדר המקור:
רכיב tabindex
עם ערך חיובי מוסיף את הרכיב לרצף לפי סדר עדיפויות, מה שעלול להוביל לכאוס בסדר המיקוד.
נמנעים משינוי סדר ה-DOM באמצעות tabindex
. לא רק שהזמנות עם כרטיסיות מידע יכולות ליצור משתמש בעייתי
למפתחים קשה לנהל ולתחזק אותם.
המאפיין contenteditable
כבר דיברנו על המאפיין contenteditable
. אם מגדירים את המאפיין contenteditable="true"
ברכיב כלשהו, אפשר לערוך אותו
שניתן להתמקד בו כחלק מסדר הכרטיסיות. התנהגות המיקוד דומה להגדרה של tabindex="0"
, אבל לא זהה. בתוך עץ
ניתן להתמקד ברכיבי contenteditable
אבל לא להשתמש במקש Tab. כדי להפוך רכיב contenteditable
מקונן לניתן לכרטיסייה, צריך להוסיף את הערך tabindex="0"
,
שיוסיף אותו לסדר הניווט של המיקוד הרציף.
התמקדות ברכיבים אינטראקטיביים
המאפיין autofocus
הערך הבוליאני autofocus
הוא מאפיין גלובלי
שאפשר להגדיר בכל אלמנט, והיא לא הופכת רכיב פנימי לאינטראקטיבי. כשהדף נטען, האלמנט הראשון שניתן להתמקד בו
עם קבוצת המאפיינים autofocus
יקבלו מיקוד, כל עוד הרכיב הזה מוצג ולא מקונן ב-<dialog>
.
ההגדרה האוטומטית של ההתמקדות בתוכן עלולה לבלבל. ההגדרה של autofocus
בפקד הטופס פירושה שפקד הטופס
נגלל לתצוגה בעת טעינת הדף. יכול להיות שכל המשתמשים שלך, כולל משתמשים בקורא מסך ומשתמשים עם אזורי תצוגה קטנים
"לראות" את ההוראות של הטופס, אולי אפילו לגלול מעבר לתווית של פקד הטופס שבדרך כלל גלויה. autofocus
לא משנה את סדר הניווט הרציף של המיקוד במסמך. הרכיבים ברצף שמופיעים לפני ה-
פשוט מדלגים על רכיבים שמתמקדים באופן אוטומטי. לכן, לא מומלץ לכלול את המאפיין autofocus
.
החריגים לתרחיש "לא להשתמש ב-autofocus
" ההמלצה כוללת את המאפיין autofocus
ברכיבי <dialog>
.
כשנפתחת תיבת דו-שיח, הדפדפן יתמקד באופן אוטומטי ברכיב האינטראקטיבי הראשון שניתן להתמקד בו בתוך <dialog>
,
כלומר autofocus
לרכיב לא הכרחי. אם רוצים לוודא שרכיב אינטראקטיבי ספציפי בתיבת הדו-שיח יקבל
המיקוד כשתיבת הדו-שיח נפתחת, מוסיפים את המאפיין autofocus
לאלמנט הזה.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
המאפיין autofocus
שמוגדר בסגירה של <button>
מבטיח שהמיקוד יקבל את המיקוד כשתיבת הדו-שיח נפתחת. כרכיב הראשון
בתיבת הדו-שיח, הוא היה מקבל מיקוד בכל מקרה. כברירת מחדל, כשנפתחת תיבת דו-שיח, הרכיב הראשון שניתן להתמקד בו בתוך
תיבת הדו-שיח תקבל מיקוד, אלא אם ברכיב אחר בתיבת הדו-שיח מוגדר המאפיין autofocus
.
הופכים רכיבים אינטראקטיביים לאמינים יותר
יש גם מאפייני HTML שיכולים להסיר רכיבים אינטראקטיביים מהרצף של הכרטיסיות. כולל tabindex
שלילי
לרכיבים שניתן להתמקד בהם, הוספת המאפיין disabled
לתמיכה בפקדי טפסים והוספת מאפיין inert
הגלובלי
בקונטיינר, כל הרכיבים יהפכו לבלתי ניתנים לכרטיסייה. לא ניתן להחליף בין שלושת המאפיינים.
ערך tabindex
שלילי
כמו שכבר למדנו, מאפיין tabindex
עם ערך שלילי הופך את האלמנט לניתן למיקוד אבל לא למקש Tab. בזמן ההוספה
tabindex="0"
לרכיב שניתן להתמקד בו כברירת מחדל, כולל קישורים, לחצנים, פקדי טפסים ורכיבים שהם contenteditable
אין צורך; הכללת tabindex
עם ערך שלילי מסירה מהפוקוס הרציף רכיבים שבדרך כלל אפשר להקיש עליהם
סדר הניווט.
ערך tabindex
שלילי מונע ממשתמשים במקלדת להתמקד ברכיבים אינטראקטיביים, אבל לא משבית את הרכיב. Pointer
המשתמשים עדיין יוכלו להתמקד באלמנט. כדי להשבית רכיב, צריך להשתמש במאפיין disabled
.
מושבת
המאפיין הבוליאני Disabled מפעיל את פקדי הטופס
שמחילים אותו ואת הצאצאים שלהם, אם יש, אינם ניתנים למיקוד. לא ניתן להתמקד בפקדי טפסים מושבתים, הם לא מקבלים אירועי קליקים,
והם לא יוגשו מיד לאחר שליחת הטופס. הערה: disabled
הוא לא מאפיין גלובלי. היא חלה על <button>
, <input>
,
<optgroup>
, <option>
, <select>
, <textarea>
, רכיבים מותאמים אישית שמשויכים לטופס וגם <fieldset>
.
אם המדיניות מוגדרת ב-<optgroup>
או ב-<fieldset>
, כל הפקדים בטופס הצאצא מושבתים, מלבד תוכן הכרטיס הראשון של <fieldset>
<legend>
.
אפשר לטרגט את אותם רכיבים שתומכים ב-disabled
גם באמצעות הפרמטר :disabled
ו-:enabled
מחלקות. רכיבים שהושבתו עם התג
לרוב המאפיין disabled
מעוצב בצבע אפור בהיר דרך גיליון סגנונות של סוכן משתמש, גם אם הוא accent-color
מוגדרת.
מאחר שמדובר במאפיין בוליאני, נוכחות המאפיין משביתה את הרכיב שהופעל, באופן אחר. אי אפשר להגדיר אותו ל-false
.
כדי להפעיל מחדש רכיב מושבת, צריך להסיר את המאפיין, בדרך כלל דרך Element.removeAttribute('disabled')
.
המאפיין HTMLInputElement.disabled
מאפשר לבדוק
אם הקלט מושבת. מכיוון ש-disabled
הוא לא מאפיין גלובלי, הוא לא עובר בירושה מה-HTMLElement אלא כל
ממשק רכיבים כמו HTMLSelectElement
,
לHTMLTextareaElement
יש אותו נכס לקריאה בלבד.
המאפיין disabled
לא רלוונטי בדרך כלל לרכיבים מסוג inert
שניתנים למיקוד דרך tabindex
או contenteditable
.
היא גם לא רלוונטית לרכיב <form>
עצמו. כדי להשבית אותן, אפשר להשתמש במאפיין inert
הגלובלי.
המאפיין inert
כשמוסיפים מאפיין בוליאני גלובלי inert
לרכיב, הרכיב הזה וכל התוכן שהוצבו בו מושבתים - ולא
שהם לא קליקביליים או בכרטיסיות, והם הוסרו מעץ הנגישות. אפשר להחיל את inert
על כל רכיב, אבל בדרך כלל
שמשמש לקטעי תוכן, כמו תוכן מחוץ למסך או תוכן מוסתר בדרך אחרת.
כשמחילים את המדיניות disabled
על פקדי טפסים, הדפדפן מספק עיצוב שמוגדר כברירת מחדל ואפשר לעצב אותו באמצעות :disabled
שיעור פסאודו. המאפיין inert
לא מספק אינדיקטורים חזותיים ואין בו פסאודוסיווג תואם (אבל בורר המאפיינים של [inert]
תואם).
שימוש בinert
בתוכן גלוי, ללא סגנונות שמצביעים על חוסר עקביות יכול לפגוע בחוויית המשתמש. כתוכן קבוע
לא זמין למשתמשים בקורא מסך, זה עלול לגרום לבלבול כשמשתמשים בקורא מסך רואים תוכן במסך
שאינו זמין לכלי הנגישות. הבלטת הנושא באופן בולט באמצעות CSS.
מוודאים שהמיקוד אף פעם לא עובר לתוכן שאינו נראה. כל מה שמעובד אל מחוץ למסך ולא מוצג באופן אוטומטי מופיעים כשצריך להפוך את המיקוד לאינרט. אם התוכן מוסתר, אבל מופיע כשמתמקדים, למשל בקישור דילוג לתוכן בדף הזה, אין צורך להפוך אותו לאימי.
בדיקת ההבנה
בדיקת ההבנה
בוחנים את הידע שלכם לגבי התמקדות.
אם אי אפשר למקד יסוד מסוים, הוא מתואר בתור מה?
מה יקרה אם לרכיב יש מאפיין disabled
?