המאפיין inert הוא מאפיין HTML גלובלי שמפשט את ההסרה והשחזור של אירועי קלט של משתמשים ברכיב מסוים, כולל אירועי מיקוד ואירועים מטכנולוגיות מסייעות.
אינרציה היא התנהגות ברירת מחדל ברכיבי תיבת דו-שיח, למשל כשמשתמשים ב-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;
}
לא כל המשתמשים יכולים לראות את כל חלקי הדף בבת אחת. לדוגמה: ייתכן שמשתמשים בקוראי מסך, במכשירים קטנים או עם זכוכית מגדלת, ואפילו משתמשים שרק משתמשים בחלונות קטנים במיוחד לא יוכלו לראות את החלק הפעיל של הדף, והם עשויים להרגיש מתוסכלים אם חלקים שאינם קבועים אינם קבועים. כשמדובר באמצעי בקרה נפרדים, המאפיין המושבת הוא כנראה מתאים יותר.
אילו אינטראקציות ותנועות חסומות?
כברירת מחדל, inert חוסם אירועי התמקדות וקליקים. בטכנולוגיות המסייעות, היכולת הזו חוסמת גם את אפשרות הגילוי באמצעות טאבים ואת יכולת הגילוי. בנוסף, יכול להיות שהדפדפן יתעלם מחיפוש בדף ומבחירת טקסט ברכיב.
ערך ברירת המחדל של inert הוא false.