السمة inert هي سمة HTML عالمية تبسّط طريقة إزالة واستعادة أحداث إدخال المستخدم لأحد العناصر، بما في ذلك أحداث التركيز والأحداث الناتجة من التكنولوجيا المساعِدة.
إنّ Inert هو سلوك تلقائي في عناصر 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 للمطوّرين إمكانية إزالة عنصر من ترتيب التنقل بـ Tab ومن شجرة تسهيل الاستخدام. يتيح لك هذا التحكّم في قابلية الاكتشاف والتفاعل، كما يتيح إمكانية إنشاء أنماط أكثر قابلية للاستخدام ويمكن الوصول إليها.
هناك حالتا استخدام رئيسيتان لتطبيق 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.