מוזיקה לריכוז

כברירת מחדל, ברכיבים אינטראקטיביים, כמו פקדי טופס, קישורים ולחצנים, אפשר להתמקד בהם ולעבור לכרטיסייה. רכיבים שניתן להקיש עליהם באמצעות 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 מקבל את הערך שלו כמספר שלם. ערך שלילי הופך רכיב למיקוד, אבל אי אפשר להקיש עליו. הערך 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 עם ערך שלילי הופך את האלמנט לניתן למיקוד אבל אי אפשר להקיש עליו. הרכיב יכול לקבל מיקוד, למשל דרך HTMLElement.focus(), אבל הוא לא חלק מסדר הניווט הרציף של המיקוד. המוסכמה לגבי רכיבים שאינם ניתנים למיקוד ושניתן להתמקד בהם היא להשתמש ב-tabindex="-1". שימו לב שאם מוסיפים את tabindex="-1" לרכיב אינטראקטיבי, כבר לא ניתן יהיה לפתוח אותו באמצעות Tab.

אפשר להשתמש בשיטה element.focus() כדי להגדיר את המיקוד לרכיבים שניתן להתמקד בהם. שימו לב שהדפדפנים גוללים כדי לראות את הרכיבים שמתמקדים בהם. לכן כדאי להימנע משימוש ב-element.focus({preventScroll:true}), כי התמקדות באלמנט לא גלוי תיצור חוויית משתמש גרועה.

כדי לשלוח שאילתה למסמך כדי לברר באיזה רכיב מודגש כרגע, משתמשים במאפיין לקריאה בלבד Document.activeElement.

רכיבים עם tabindex של 1 או יותר נכללים ברצף נפרד של כרטיסיות. כפי שתראו ב-Codepen, הכרטיסייה מתחילה ברצף נפרד, בסדר יורד, מהערך הנמוך ביותר לערך הגבוה ביותר, לפני שהיא עוברת ברצף הרגיל (לא הוגדר tabindex או tabindex="0") לפי סדר המקור:

רכיב tabindex עם ערך חיובי מוסיף את הרכיב לרצף מיקוד בעדיפות גבוהה, מה שעלול להוביל לכאוס בסדר המיקוד. אין לשנות את סדר ה-DOM עם tabindex. שינויים בהזמנות של כרטיסיות לא רק גורמים לחוויית משתמש גרועה, אלא גם קשה למפתחים לנהל ולתחזק אותן.

המאפיין contenteditable

המאפיין contenteditable הוזכר למעלה. אם מגדירים את contenteditable="true" בכל רכיב, אפשר לערוך אותו, להתמקד בו ולחלק מסדר הכרטיסיות. התנהגות המיקוד דומה להגדרת tabindex="0", אבל לא זהה. אפשר להתמקד ברכיבי contenteditable מקוננים, אבל אי אפשר להקיש עליהם. כדי להפוך רכיב contenteditable בתוך רכיב לניתן להקיש על Tab, מוסיפים 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 עם ערך שלילי הופך את האלמנט לניתן למיקוד, אבל אי אפשר להקיש עליו. כשמוסיפים את השדה tabindex="0" לרכיב שניתן להתמקד בו כברירת מחדל, כולל קישורים, לחצנים, פקדי טפסים ורכיבים שהם contenteditable, אין צורך להוסיף tabindex עם ערך שלילי, רכיבים שבדרך כלל אפשר להקיש עליהם באמצעות המקש Tab מסדר הניווט הרציף של המיקוד.

ערך tabindex שלילי מונע ממשתמשי המקלדת להתמקד ברכיבים אינטראקטיביים, אבל לא משבית את הרכיב. משתמשי המצביע עדיין יוכלו להתמקד ברכיב. כדי להשבית רכיב, יש להשתמש במאפיין 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?

אי אפשר יהיה להתמקד בו.
נכון!
הוא לא יוצג.
אפשר לנסות שוב.
אם מדובר ברכיב טופס, הוא לא יישלח.
נכון!