המאפיין inert הוא מאפיין HTML גלובלי שמאפשר להסיר ולשחזר אירועי קלט של משתמשים ברכיב מסוים, כולל אירועי מיקוד ואירועים מטכנולוגיות מסייעות.
Inert היא התנהגות ברירת מחדל ברכיבים של תיבת דו-שיח, למשל כשמשתמשים ב-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 לא אינטראקטיביים
סיבה נפוצה נוספת לנגישות היא עיצוב ממשק משתמש גלוי או גלוי באופן חלקי, אך לא אינטראקטיבי בבירור. הפעולה הזו יכולה להתבצע במהלך טעינת הדף, בזמן שליחת הטופס, או במקרה ששכבת-על של תיבת דו-שיח פתוחה, לדוגמה.
כדי לספק למשתמשים את החוויה הטובה ביותר, צריך לציין את מצב ממשק המשתמש ואת ה-Trap. את המיקוד בחלק האינטראקטיבי בדף.
לכידת התמקדות
לכידת מיקוד הוא קונספט מרכזי של נגישות טובה בממשק המשתמש. צריך לוודא שקורא המסך מתמקד ברכיבים אינטראקטיביים בממשק המשתמש ולהיות מודעים לכך שרכיב כלשהו חוסם את האינטראקטיביות. כך גם מונעים מקוראי מסך זדוניים להגיע אל מאחורי שכבת-על בדף, או לשלוח בטעות טופס בזמן העיבוד של השליחה הראשונה.
באמצעות inert, תוכלו לוודא שהתוכן היחיד שגלוי לכולם נגיש. האפשרות הזו שימושית במקרים הבאים:
- רכיבי חסימה כמו תיבת דו-שיח מודאלית, תפריט להדגשת מיקוד או ניווט צדדי.
- קרוסלה עם פריטים לא פעילים.
- תוכן לא רלוונטי של טפסים (לדוגמה, עמעום והשבתת השדות 'כתובת למשלוח' כשתיבת הסימון 'זהה לכתובת לחיוב' סומנה).
- השבתה של כל ממשק המשתמש במצב לא עקבי.
יש לציין באופן חזותי רכיבי inert
כברירת מחדל, אין אינדיקציה ויזואלית שעץ משנה הוא קבוע. מומלץ לסמן בבירור אילו חלקים של ה-DOM פעילים ואילו חלקים לא פעילים.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
לא כל המשתמשים יכולים לראות את כל חלקי הדף בבת אחת. לדוגמה, אם משתמשים בקוראי מסך, במכשירים קטנים או עם מכשירי הגדלה, ואפילו משתמשים שמשתמשים רק בחלונות קטנים במיוחד, לא יוכלו לראות את החלק הפעיל של הדף, ויתנהגו תסכול אם חלקים אינטנסיביים לא בבירור. לגבי אמצעי בקרה נפרדים, המאפיין המושבת מתאים יותר ככל הנראה.
אילו אינטראקציות ותנועות חסומות?
כברירת מחדל, inert חוסם אירועי מיקוד וקליק. כשמדובר בטכנולוגיות מסייעות, הן גם חוסמות את הכרטיסיות ואת יכולת הגילוי. יכול להיות שהדפדפן יתעלם גם מחיפוש בדפים ומבחירת טקסט ברכיב.
ערך ברירת המחדל של inert הוא false.