דף זה תורגם על ידי Cloud Translation API.

המאפיין 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;
}

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

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

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

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