המאפיין inert

Emma Twersky

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

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

אפשר להשתמש במאפיין 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.