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

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

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

בדיקת ההבנה

בדיקת ההבנה

בוחנים את הידע שלכם לגבי התמקדות.