רכיבים אינטראקטיביים, כולל אמצעי בקרה בטופס, קישורים ולחצנים, ניתנים למיקוד ולמעבר באמצעות מקש Tab כברירת מחדל. רכיבים שאפשר להגיע אליהם באמצעות Tab הם חלק מהסדר של ניווט באמצעות מקש Tab במסמך. אלמנטים אחרים הם אינרטיים, כלומר הם לא אינטראקטיביים. באמצעות מאפייני HTML, אפשר להפוך רכיבים אינטראקטיביים ללא פעילים, ולהפוך רכיבים לא פעילים לאינטראקטיביים.
כברירת מחדל, סדר ההתמקדות ברכיב ממשק זהה לסדר החזותי, שהוא הסדר בקוד המקור. יש מאפייני HTML שיכולים לשנות את הסדר הזה, ומאפייני CSS שיכולים לשנות את הסדר החזותי של התוכן. שינוי סדר המעבר בין הכרטיסיות באמצעות HTML או סדר הרינדור החזותי באמצעות CSS עלול לפגוע בחוויית המשתמש.
לא לשנות את סדר ההזזה בין הכרטיסיות בפועל או את הסדר שנתפס על ידי המשתמשים באמצעות CSS ו-HTML. כפי שאפשר לראות בשתי הדוגמאות הבאות, סדר טאבים ששונה מהסדר החזותי הצפוי מבלבל את המשתמשים ופוגע בחוויית המשתמש.
בדוגמה הבאה, הערך של המאפיין tabindex גרם לסדר הכרטיסיות להיות כאוטי:
בדוגמה הזו, CSS יצר סטייה בין סדר ההזזה באמצעות Tab לבין הסדר החזותי של התוכן:
ההצהרה flex-flow: row-reverse;
הפכה את הסדר החזותי. בנוסף, המאפיין order של CSS הוחל על המילה השישית, This, והזיז אותה מבחינה ויזואלית. סדר הלחיצה על Tab הוא סדר הקוד, שכבר לא תואם לסדר החזותי.
הדבר יוצר ניתוק עבור משתמשי מקלדת.
תכונות מסוימות של CSS, כולל flexbox, grid, positioning, transforms ו-multi-column, יכולות לשנות את הסדר החזותי של התוכן. בודקים את התוכן באמצעות מקלדת: מקישים על Shift + Tab כדי לעבור אחורה בתוכן. משתמשים ב-CSS כדי לציין לאיזה רכיב יש מיקוד. אל תשנו את הסדר של רכיבים שאפשר להתמקד בהם באמצעות CSS.
חשוב לשמור על סדר הגיוני של מעבר בין כרטיסיות בכל גדלי אזורי התצוגה.
הוספת אינטראקטיביות לרכיבים לא פעילים
מאפייני contenteditable ו-tabindex הם מאפיינים גלובליים, ולכן אפשר להוסיף אותם לכל רכיב. כך הם יכולים להיות במוקד במהלך התהליך. אפשר גם להתמקד ברכיבים שניתן להתמקד בהם באמצעות עכבר או מצביע, אם המאפיין autofocus מוגדר, או באמצעות סקריפט, למשל באמצעות element.focus().
המאפיין tabindex
המאפיין הגלובלי tabindex, שהוצג במאפיינים, מאפשר לרכיבים שבדרך כלל לא יכולים לקבל מיקוד לקבל מיקוד, בדרך כלל באמצעות Tab, ומכאן השם.
הערך של המאפיין tabindex צריך להיות מספר שלם. ערך שלילי מאפשר להתמקד ברכיב אבל לא להשתמש במקש Tab כדי להגיע אליו. הערך tabindex של 0 מאפשר להתמקד ברכיב ולעבור אליו באמצעות מקש Tab, וכך הרכיב שעליו מוחל הערך הזה מתווסף לסדר הניווט הרציף בין הרכיבים שניתן להתמקד בהם, לפי הסדר שבו הם מופיעים בקוד המקור. הערך 1 או ערך גדול יותר מאפשר להתמקד ברכיב ולעבור אליו באמצעות מקש Tab, אבל הוא מוסיף את הרכיב לרצף מעברים באמצעות מקש Tab עם עדיפות, ולכן מומלץ להימנע ממנו.
בדף הזה, כפתור השיתוף, <share-action>, הוא אלמנט בהתאמה אישית. התג tabindex="0" מוסיף את הרכיב הזה לסדר הניווט באמצעות מקש Tab שמוגדר כברירת מחדל במקלדת:
<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(), אבל הוא לא חלק מסדר הניווט המיקוד הרציף. המוסכמה לגבי רכיבים שניתנים למיקוד אבל אי אפשר להגיע אליהם באמצעות Tab היא שימוש ב-tabindex="-1". אם מוסיפים את התג tabindex="-1" לרכיב אינטראקטיבי, אי אפשר יותר להגיע אליו באמצעות מקש Tab.
אפשר להשתמש ב-method element.focus() כדי להגדיר פוקוס על רכיבים שאפשר להתמקד בהם. הדפדפנים גוללים רכיבים ממוקדים כך שיוצגו. לכן, לא מומלץ להשתמש ב-element.focus({preventScroll:true}), כי התמקדות ברכיב לא גלוי פוגעת בחוויית המשתמש.
אם רוצים להריץ שאילתה על המסמך כדי לגלות לאיזה רכיב יש פוקוס, צריך להשתמש במאפיין Document.activeElement לקריאה בלבד.
רכיבים עם tabindex של 1 ומעלה נכללים ברצף נפרד של מקשי Tab. כמו בדוגמה הבאה ב-Codepen, המעבר באמצעות Tab מתחיל ברצף נפרד, בסדר מהערך הנמוך ביותר לערך הגבוה ביותר, לפני שהוא עובר דרך הערכים ברצף הרגיל (לא מוגדר tabindex או tabindex="0") בסדר המקור:
המאפיין tabindex עם ערך חיובי מכניס את הרכיב לרצף ממוקד לפי סדר עדיפות, מה שעלול לגרום לבלבול בסדר המיקוד. מומלץ להימנע משינוי הסדר של ה-DOM באמצעות tabindex. שינוי סדר המעבר בין כרטיסיות יכול ליצור חוויית משתמש גרועה וקשה לתחזוקה.
המאפיין contenteditable
המאפיין contenteditable הוזכר קודם. ההגדרה contenteditable="true" בכל רכיב מאפשרת לערוך אותו, להתמקד בו והוא הופך לחלק מסדר ה-Tab. התנהגות המיקוד דומה להגדרת tabindex="0", אבל לא זהה לה. ברכיבי contenteditable שהם רכיב בתוך רכיב אפשר להתמקד, אבל אי אפשר לעבור ביניהם באמצעות מקש Tab. כדי להגדיר שניתן יהיה להגיע ברצף ל-element contenteditable מקונן באמצעות מקש Tab, מוסיפים את tabindex="0", וכך הוא יתווסף לסדר הניווט ברצף באמצעות מקש Tab.
הוספת 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 שמוגדר על התג close <button> מאפשר לו לקבל מיקוד כשתיבת הדו-שיח נפתחת. כאלמנט הראשון בתיבת הדו-שיח, הוא היה מקבל את המיקוד בכל מקרה. כברירת מחדל, כשנפתחת תיבת דו-שיח, המיקוד עובר לאלמנט הראשון שאפשר להתמקד בו בתוך תיבת הדו-שיח, אלא אם לאלמנט אחר בתוך תיבת הדו-שיח מוגדר המאפיין autofocus.
הפיכת רכיבים אינטראקטיביים ללא פעילים
יש גם מאפייני HTML שיכולים להסיר רכיבים אינטראקטיביים מרצף המעבר בין כרטיסיות. הוספת הערך השלילי tabindex לרכיבים שניתן להתמקד בהם, הוספת המאפיין disabled לרכיבי טופס תומכים והוספת המאפיין הגלובלי inert למאגר הנתונים הופכים את הרכיבים ללא ניתנים להזזה באמצעות מקש Tab. שלושת המאפיינים האלה נפרדים לחלוטין ואי אפשר להשתמש בהם לסירוגין.
ערך tabindex שלילי
מאפיין tabindex עם ערך שלילי מאפשר להתמקד ברכיב, אבל לא לעבור אליו באמצעות מקש Tab. אין צורך להוסיף את המאפיין tabindex="0" לרכיב שאפשר להגיע אליו באמצעות מקש Tab כברירת מחדל, כולל קישורים, לחצנים, רכיבי בקרה של טפסים ורכיבים עם המאפיין contenteditable. הוספת המאפיין tabindex עם ערך שלילי מסירה רכיבים שאפשר להגיע אליהם באמצעות מקש Tab מהסדר של ניווט ממוקד.
ערך שלילי tabindex מונע ממשתמשי מקלדת להתמקד ברכיבים אינטראקטיביים, אבל לא משבית את הרכיב. משתמשים במצביע עדיין יכולים להתמקד ברכיב. כדי להשבית רכיב, משתמשים במאפיין disabled.
מושבת
המאפיין הבוליאני disabled גורם לכך שאי אפשר להתמקד בפקדי הטופס שאליהם הוא מוחל ובצאצאים שלהם, אם יש כאלה. אי אפשר להתמקד בפקדי טפסים מושבתים, הם לא מקבלים אירועי קליק והם לא נשלחים כששולחים את הטופס.
disabled הוא לא מאפיין גלובלי. היא חלה על <button>, <input>, <optgroup>, <option>, <select>, <textarea>, על רכיבים מותאמים אישית שמשויכים לטופס ועל <fieldset>.
כשההגדרה מוחלת על <optgroup> או על <fieldset>, כל פקדי הטופס של הצאצא מושבתים, למעט התוכן של <legend> הראשון של <fieldset>.
אותם רכיבים שתומכים ב-disabled ניתנים גם לטירגוט באמצעות פסאודו-המחלקות :disabled ו-:enabled. בדרך כלל, רכיבים שמושבתים באמצעות המאפיין disabled מקבלים עיצוב אפור בהיר בגיליון הסגנונות של סוכן המשתמש, גם אם מוגדר accent-color.
מאחר שזהו מאפיין בוליאני, נוכחות המאפיין משביתה את הרכיב שאחרת היה מופעל. אי אפשר להגדיר אותו לערך false. כדי להפעיל מחדש רכיב מושבת, צריך להסיר את המאפיין, בדרך כלל באמצעות Element.removeAttribute('disabled').
המאפיין HTMLInputElement.disabled
מאפשר לבדוק אם קלט מושבת. המאפיין disabled הוא לא מאפיין גלובלי, ולכן הוא לא עובר בירושה מ-HTMLElement, אבל לכל ממשק רכיבים תומך, כמו HTMLSelectElement, HTMLTextareaElement, יש את אותה מאפיין לקריאה בלבד.
המאפיין disabled לא חל על רכיבי inert רגילים שהוגדרו כרכיבים שאפשר להתמקד בהם באמצעות tabindex או contenteditable, והוא גם לא חל על הרכיב <form>. כדי להשבית את הרכיבים האלה, אפשר להשתמש במאפיין הגלובלי inert.
המאפיין inert
כשמוסיפים את מאפיין הבוליאני הגלובלי inert לרכיב, הרכיב הזה וכל התוכן שמוטמע בו מושבתים, כלומר אי אפשר ללחוץ עליהם או להגיע אליהם באמצעות מקש Tab. הם מוסרים גם מעץ הנגישות. אפשר להחיל את התג inert על כל רכיב, אבל בדרך כלל משתמשים בו לקטעי תוכן, כמו תוכן שלא מוצג במסך או תוכן מוסתר.
כשמחילים disabled על רכיבי טופס, הדפדפן מספק סגנון ברירת מחדל ואפשר להגדיר סגנון באמצעות פסאודו-מחלקת :disabled. המאפיין inert לא מספק אינדיקטורים ויזואליים ואין לו פסאודו-קלאס תואם (אבל בורר המאפיינים [inert] תואם).
שימוש ב-inert בתוכן גלוי ללא סגנונות שמציינים את חוסר הפעילות עלול להוביל לחוויית משתמש גרועה. משתמשים בקורא מסך לא יכולים לגשת לתוכן לא פעיל, ולכן הם עלולים להתבלבל אם הם רואים תוכן על המסך שלא זמין לכלים לנגישות. חשוב להשתמש ב-CSS כדי להבליט את המצב הלא פעיל.
מוודאים שהמיקוד אף פעם לא עובר לתוכן שלא גלוי. כל רכיב שמוצג מחוץ למסך ולא נכנס אוטומטית לתצוגה כשמתמקדים בו צריך להיות לא פעיל. אם התוכן מוסתר אבל מוצג כשמתמקדים בו, כמו קישור לדילוג לתוכן, אין צורך להפוך אותו ללא פעיל.
בדיקה של רמת ההבנה שלך
בודקים את הידע בנושא פוקוס.
אם אי אפשר להתמקד ברכיב, איך הוא מתואר?
מה יהיה הערך אם לרכיב יש מאפיין disabled?