تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

هناك حالتا استخدام رئيسيتان لتطبيق inert على عنصر لتسهيل الاستخدام بشكل أفضل:

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

عناصر DOM المخفية خارج الشاشة أو

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

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

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

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

حصر التركيز

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

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

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

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

بشكلٍ تلقائي، ما من مؤشر مرئي على كون شجرة فرعية غير نشطة. يُوصى بأن تحدد بوضوح الأجزاء النشطة وغير النشطة في نموذج العناصر في المستند (DOM).

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

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

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

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

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