سمة inert

Emma Twersky

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

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

عناصر DOM غير التفاعلية

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

لتقديم أفضل تجربة للمستخدمين، يجب الإشارة إلى حالة واجهة المستخدم و"حبس" التركيز على الجزء التفاعلي من الصفحة.

حصر التركيز

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

باستخدام inert، يمكنك التأكّد من إمكانية الوصول إلى المحتوى القابل للاكتشاف فقط. وهذا مفيد لما يلي:

• حظر عناصر مثل مربّع حوار مشروط أو قائمة تجذب التركيز أو شريط تنقّل جانبي
• لوحة عرض دوّارة تحتوي على عناصر غير نشطة
• محتوى النماذج غير القابل للتطبيق (على سبيل المثال، التلاشي التدريجي وإيقاف حقول "عنوان الشحن" عند وضع علامة في مربّع الاختيار "نفس عنوان إرسال الفواتير"
• إيقاف واجهة المستخدم بالكامل عندما تكون في حالة غير متّسقة

الإشارة مرئيةً إلى عناصر inert

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

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

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

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

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

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