سمة inert

Emma Twersky

السمة inert هي سمة HTML عامة تعمل على تبسيط كيفية إزالة أحداث إدخال المستخدم واستعادتها لعنصر معيّن، بما في ذلك أحداث التركيز والأحداث من التقنيات المساعِدة.

إنّ العنصر غير النشط هو سلوك تلقائي في عناصر مربّع الحوار، مثل استخدام showModal لفتح مربّع حوار للمستخدمين لإجراء اختيار ثم إغلاقه من الشاشة. بعد فتح <dialog>، تصبح بقية الصفحة غير تفاعلية، على سبيل المثال، لن يعود بإمكانك النقر على الروابط أو الانتقال إليها باستخدام مفتاح التبويب.

يمكنك استخدام السمة 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;
}

لا يمكن لجميع المستخدمين رؤية جميع أجزاء الصفحة في الوقت نفسه. على سبيل المثال، قد لا يتمكّن مستخدمو برامج قراءة الشاشة أو الأجهزة الصغيرة أو المكبّرات، وحتى المستخدمون الذين يستخدمون فقط نوافذ صغيرة جدًا، من رؤية الجزء النشط من الصفحة، وقد يشعرون بالاستياء إذا لم تكن الأقسام غير التفاعلية غير تفاعلية بشكل واضح. بالنسبة إلى عناصر التحكّم الفردية، قد تكون السمة disabled أكثر ملاءمةً.

ما هي التفاعلات والحركات التي يتم حظرها؟

يحظِر العنصر inert تلقائيًا أحداث التركيز والنقر. بالنسبة إلى التقنيات المساعِدة، يؤدي ذلك أيضًا إلى حظر استخدام مفاتيح التبويب وإمكانية العثور على المحتوى. قد يتجاهل المتصفّح أيضًا البحث في الصفحة واختيار النص في العنصر.

القيمة التلقائية لـ inert هي false.