המאפיין inert

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

תמיכה בדפדפנים

  • Chrome: ‏ 102.
  • Edge: ‏ 102.
  • Firefox: ‏ 112.
  • Safari: 15.5.

מקור

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

אפשר להשתמש במאפיין inert כדי להשיג את אותה התנהגות ברכיבים אחרים.

Inert פירושו שאין יכולת תנועה, כך שכאשר מסמנים משהו לא פעיל, מסירים את התנועה או האינטראקציה מרכיבי ה-DOM האלה.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

כאן, inert הוצהר באלמנט <div> השני שמכיל את button2, ולכן כל התוכן שמכיל <div> הזה, כולל הלחצן והתווית, לא יכול לקבל את המיקוד או ללחוץ עליו.

המאפיין inert שימושי במיוחד לגבי נגישות, במיוחד כדי למנוע מצב שבו המיקוד נלכד.

נגישות טובה יותר

בהנחיות לאתרים נגישים מצוין שצריך לנהל את המיקוד ולהגדיר סדר מיקוד הגיוני ושימושי. הנתון הזה כולל גם את יכולת הגילוי וגם את האינטראקטיביות. בעבר, אפשר היה להסתיר את האפשרות למצוא את התוכן באמצעות aria-hidden="true", אבל קשה יותר להסתיר את האפשרות לבצע אינטראקציה עם התוכן.

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

יש שני תרחישים לדוגמה שבהם כדאי להחיל את inert על רכיב כדי לשפר את הנגישות:

  • כשרכיב הוא חלק מעץ ה-DOM, אבל הוא מחוץ למסך או מוסתר.
  • כשרכיב הוא חלק מעץ ה-DOM, אבל לא אמור להיות אינטראקטיבי.

רכיבי DOM מחוץ למסך או מוסתרים

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

רכיבי DOM לא אינטראקטיביים

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

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

צילום עם נעילה של המיקוד

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

באמצעות inert, תוכלו לוודא שרק תוכן שגלוי לכולם יהיה נגיש. האפשרות הזו מועילה במקרים הבאים:

  • רכיבים חוסמים כמו תיבת דו-שיח מודאלית, תפריט שמסיט את המיקוד או סרגל ניווט צדדי.
  • קרוסלה עם פריטים לא פעילים.
  • תוכן טופס לא רלוונטי (לדוגמה, העלאת העמעום והשבתה של השדות 'כתובת למשלוח' כשתיבת הסימון 'זהה לכתובת לחיוב' מסומנת).
  • השבתת כל ממשק המשתמש במצב לא עקבי.

סימון חזותי של רכיבי inert

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

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

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

אילו אינטראקציות ותנועות חסומות?

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

ערך ברירת המחדל של inert הוא false.